GDL - Global Design Language

Subscription: Selected 

<div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base

c-subscription--selected 
">

    <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
        <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">Basic</h2>
        <ul class="c-subscription__features u-body-04 u-list-none">

            <li class="c-subscription__feature u-mb-small u-relative">Zero pubblicità su Siti e App del Network</li>

            <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Sintesi della settimana via e-mail</li>

            <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Dossier: Tutti gli approfondimenti della tua città</li>

            <li class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through">Gli approfondimenti e inchieste Premium di tutte le città e nazionali</li>

        </ul>

        <div class="u-p-base u-flex u-column u-items-center u-border-divider u-border-1 u-border-solid u-relative u-size-full u-radius-base">
            <div class="c-subscription__promo u-label-02 u-uppercase u-color-negative u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-whitespace u-top">Il tuo piano</div>
            <div class="u-py-base">
                <h3 class="u-title-05 u-m-none">1€<span class="u-caption-01">/mese</span></h3>
            </div>
            <div class="u-px-base l-list-border u-size-full">
                <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                    <span>Data di attivazione </span>
                    <strong>24/05/2024</strong>
                </div>
                <div class="u-flex u-justify-between u-caption-02 u-gap-small">
                    <span>Prossimo rinnovo</span>
                    <strong>24/05/2024</strong>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="c-subscription u-radius-base u-self-center u-mx-xsmall u-flex-one u-shadow-bottom u-mb-base
{% if modifier %}{{modifier}}{% endif%}
{% if selected %}c-subscription--selected {% endif %}
{% if recomended and not selected or time !='mese' %}c-subscription--recomended{% endif%}">
  {% if recomended and not selected %}
  <div class="c-subscription__recomended u-size-full u-py-small u-px-xsmall u-text-center u label-05 u">La più scelta da voi</div>
  {% endif%}
  <div class=" u-p-base u-p-large@lg u-flex u-column u-gap-small u-items-center u-justify-between">
    <h2 class="u-title-05 u-m-none u-size-full u-text-center u-border-divider u-border-1 u-border-bottom-solid u-pb-base">{{title}}</h2>
    <ul class="c-subscription__features u-body-04 u-list-none">
      {% for feature in features %}
        <li {% if not feature.active %}class="c-subscription__feature c-subscription__feature--disabled u-color-off u-mb-small u-relative u-line-through"{% else%}class="c-subscription__feature u-mb-small u-relative"{% endif %}>{{feature.text}}</li>
      {% endfor %}  
    </ul>
    {% if selected %}
    <div class="u-p-base u-flex u-column u-items-center u-border-divider u-border-1 u-border-solid u-relative u-size-full u-radius-base">
      <div class="c-subscription__promo u-label-02 u-uppercase u-color-negative u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-whitespace u-top">Il tuo piano</div>
      <div class="u-py-base">
        <h3 class="{% if recomended and not selected %}u-heading-09{% else %}u-title-05{% endif %} u-m-none">{{price}}<span class="u-caption-01">/{{time}}</span></h3>
      </div>
      <div class="u-px-base l-list-border u-size-full">
        <div class="u-flex u-justify-between u-caption-02 u-gap-small">
          <span>Data di attivazione </span>
          <strong>24/05/2024</strong>
        </div>
        <div class="u-flex u-justify-between u-caption-02 u-gap-small">
          <span>Prossimo rinnovo</span>
          <strong>24/05/2024</strong>
        </div>
      </div>
    </div>
    {% else %}
    <div class="c-subscription__price o-bg-base u-p-base u-radius-base u-flex u-column u-items-center u-gap-medium u-size-full u-relative u-justify-center">
      {% if recomended %}
      <div class="c-subscription__promo u-label-02 u-uppercase u-color-inverse u-px-xsmall u-py-xxsmall u-radius-small u-absolute u-top">{{promo}}</div>
      {% endif %}
      <div class="u-flex u-column u-items-center ">
        <h3 class="{% if recomended %}u-heading-09{% else %}u-title-05{% endif %} u-m-none">{{price}}<span class="u-caption-01">/{{time}}</span></h3>
        {% if recomended %}
        <span class="u-block u-caption-01">{{recomended}}</span>
        {% endif %}
      </div>
      {% render "@button--primary", {label:'Attiva subito', size: 'wide'}, true %}
    </div>
    {% endif %}
  </div>
</div>
 
{
  "title": "Basic",
  "price": "1€",
  "time": "mese",
  "features": [
    {
      "text": "Zero pubblicità su Siti e App del Network",
      "active": true
    },
    {
      "text": "Sintesi della settimana via e-mail",
      "active": false
    },
    {
      "text": "Dossier: Tutti gli approfondimenti della tua città",
      "active": false
    },
    {
      "text": "Gli approfondimenti e inchieste Premium di tutte le città e nazionali",
      "active": false
    }
  ],
  "cta": "Attiva subito",
  "selected": true,
  "promo": "Il tuo piano"
}
  • Content: 
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;

.c-subscription {
  background-color: var(--background-color-gray);
  min-width: 280px;
  max-width: 480px;

  &--selected {
    background-color: var(--background-color);
    border: 1px solid var(--divider-color);
  }
  &--recomended {
    order: -1;
    @include bp(md) {
      order: 0;
    }
  }
  &__recomended {
    background-color: var(--divider-color);
    border-top-left-radius: $padding-xsmall;
    border-top-right-radius: $padding-xsmall;  }
  &__promo {
    --_promo-bg: #{$color-green};
    background-color: var(--_promo-bg);
    left: 50%;
    transform: translate(-50%, -50%);
    .c-subscription--selected  &{
      --_promo-bg: var(--background-color-negative);
    }
  }
  &__features {
    padding-left: 26px;
  }
  &__feature {
    &::after{
      --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxwYXRoIGQ9Ik0yMiAxMS4wOFYxMmExMCAxMCAwIDEgMS01LjkzLTkuMTQiLz48cG9seWxpbmUgcG9pbnRzPSIyMiA0IDEyIDE0LjAxIDkgMTEuMDEiLz48L3N2Zz4=");
      content: '';
      position: absolute;
      left: -$padding-medium;
      top: 0;
      width: 1rem;
      height: 1rem;
      background-image: var(--_feature);
      body[data-color-scheme*="dark"] &{
        --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID48cGF0aCBkPSJNMjIgMTEuMDhWMTJhMTAgMTAgMCAxIDEtNS45My05LjE0Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjIgNCAxMiAxNC4wMSA5IDExLjAxIi8+PC9zdmc+");
      }
      @media (prefers-color-scheme: dark) {
        body:not([data-color-scheme*="light"]) &{
          --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID48cGF0aCBkPSJNMjIgMTEuMDhWMTJhMTAgMTAgMCAxIDEtNS45My05LjE0Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjIgNCAxMiAxNC4wMSA5IDExLjAxIi8+PC9zdmc+");
        }
      }
    }
    &--disabled {
      &::after{
        --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjNiM2IzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjQuOTMiIHkxPSI0LjkzIiB4Mj0iMTkuMDciIHkyPSIxOS4wNyIvPjwvc3ZnPg==");
        body[data-color-scheme*="dark"] &{
          --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjNiM2IzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjQuOTMiIHkxPSI0LjkzIiB4Mj0iMTkuMDciIHkyPSIxOS4wNyIvPjwvc3ZnPg==");
        }
        @media (prefers-color-scheme: dark) {
          body:not([data-color-scheme*="light"]) &{
            --_feature: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjNiM2IzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjQuOTMiIHkxPSI0LjkzIiB4Mj0iMTkuMDciIHkyPSIxOS4wNyIvPjwvc3ZnPg==");
          }
        }
      }
    }

    html:not([data-premium--available-plus]) [data-feature-items] &{
      &:nth-child(3){
        display: none;
      }
    }
    
  }
  &__price {
    min-height: 160px;
  }
}
  • URL: /components/raw/subscription/_subscription.scss
  • Filesystem Path: src/lib/components/subscription/_subscription.scss
  • Size: 4 KB

No notes defined.