<article class="c-card u-flex u-column">

    <figure class="o-skeleton o-skeleton-media--horizontal u-relative">

        <span class="c-card__kicker c-card__kicker--inverse c-card__kicker--generic u-label-02 u-absolute u-py-xxsmall u-px-xsmall">teatro</span>
        <a href="#" class="u-size-full u-absolute u-left u-top ">

            <span class="c-card__gradient">
                <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" src="https://unsplash.it/1000/563?random" loading="lazy" alt="Banksy A visual protest oltre 90 opere in mostra al Chiostro del Bramante">
            </span>

        </a>
    </figure>

    <div class="c-card__content u-flex u-column u-p-base u-color-secondary">
        <header class="c-card__pull-down">

            <a href="#" class="o-link-text u-block">
                <h2 class="c-card__heading u-m-none u-heading-08">Banksy A visual protest oltre 90 opere in mostra al Chiostro del Bramante</h2>
            </a>

            <div class="u-mt-small">
                <svg class="c-rating c-rating--filled o-icon o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
                </svg>
                <svg class="c-rating c-rating--filled o-icon o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
                </svg>
                <svg class="c-rating c-rating--filled o-icon o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
                </svg>
                <svg class="c-rating c-rating--filled o-icon o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
                </svg>
                <svg class="c-rating c-rating--filled o-icon o-icon--sm">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use>
                </svg>
            </div>

        </header>

        <ul class="c-card__list-details u-p-none u-mb-none u-mt-small u-list-none">

            <li class="c-card__item-details u-relative ">
                <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
                </svg>
                <span class="u-label-07 u-ml-medium u-inline-block">Dal 8 al 28 febbraio 2021</span>
            </li>

            <li class="c-card__item-details u-relative ">
                <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
                </svg>
                <a class="c-card__link" href="#"><span class="u-label-07 u-ml-medium u-inline-block">Zona: Conca d'Oro / Roma</span></a>
            </li>

        </ul>

        <ul class="u-p-none u-mt-small u-mb-none u-list-none u-flex">
            <li class="u-mr-xxsmall">
                <span class="c-badge u-label-02 u-py-xxsmall u-px-xsmall">gratis</span>
            </li>
            <li class="u-mr-xxsmall">
                <span class="c-badge u-label-02 u-py-xxsmall u-px-xsmall">finisce oggi</span>
            </li>
        </ul>

    </div>
</article>
<article class="c-card u-flex u-column">

  {% if media %}
    {% if modifier=='wrapped' %} 
      <div class="u-px-base u-pt-base">
    {% endif %}

      <figure class="o-skeleton {% if aspectRatio %}o-skeleton-media--vertical{% else %}o-skeleton-media--horizontal{% endif %} u-relative">
      
        {% if modifier=='overlay' %}<span class="c-card__kicker c-card__kicker--inverse c-card__kicker--generic u-label-02 u-absolute u-py-xxsmall u-px-xsmall">teatro</span>{% endif %}
        <a href="#" class="u-size-full u-absolute u-left u-top {% if modifier=='wrapped' %}c-card__wrapped u-flex u-justify-center u-items-center{% endif %}">
          
          {% if modifier=='overlay' %}
          <span class="c-card__gradient">
            <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" src="{{media}}" loading="lazy" alt="{{title}}">
          </span>
          
          {% else %}

          <img class="{% if modifier=='wrapped' %}c-card__wrapped-item{% else %}u-size-full{% endif %}" decoding="async" referrerpolicy="no-referrer" src="{{media}}" loading="lazy" alt="{{title}}">
          {% endif %}
        </a>
      </figure>
    {% if modifier=='wrapped' %} 
      </div>
   {% endif %}
  {% endif %}


  <div class="c-card__content u-flex u-column u-p-base u-color-secondary">
    <header class="c-card__pull-down">
      {% if label %}
        <span class="c-card__kicker u-label-02 u-mb-xsmall u-block">{{label}}</span>
      {% endif %}
      <a href="#" class="o-link-text u-block">
        <h2 class="c-card__heading u-m-none u-heading-08">{{title}}</h2>
      </a>
      {% if rating %}
        <div class="u-mt-small">
          {% render "@rating" %}
        </div>
      {% endif %}
    </header>

    {% if details %}
      <ul class="c-card__list-details u-p-none u-mb-none u-mt-small u-list-none">
        {% if data %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
            </svg>
            <span class="u-label-07 u-ml-medium u-inline-block">Dal 8 al 28 febbraio 2021</span>
          </li>
        {% endif %}
        {% if adress %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
            </svg>
            <a class="c-card__link" href="#"><span class="u-label-07 u-ml-medium u-inline-block">Zona: Conca d'Oro / Roma</span></a>
          </li>
        {% endif %}
        {% if info %}
          <li class="c-card__item-details u-relative ">
            <svg class="o-icon o-icon--sm u-absolute c-card__icon-top">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use>
            </svg>
            <span class="u-label-07 u-ml-medium u-inline-block">Pasticceria fresca Paste Torte Colombe Uova e tutto cio che desiderate</span>
          </li>
        {% endif %}
      </ul>
      {% if modifier=='overlay' %}
        <ul class="u-p-none u-mt-small u-mb-none u-list-none u-flex">
          <li class="u-mr-xxsmall">
            {% render '@badge', {label: "gratis"},true%}
          </li>
          <li class="u-mr-xxsmall">
            {% render '@badge', {label: "finisce oggi"},true%}
          </li>
        </ul>
      {% endif %}

    {% endif %}
  </div>
</article>
{
  "title": "Banksy A visual protest oltre 90 opere in mostra al Chiostro del Bramante",
  "label": false,
  "media": "https://unsplash.it/1000/563?random",
  "modifier": "overlay",
  "details": true,
  "adress": true,
  "data": true,
  "rating": true
}
  • Content:
    // Name:            Card
    // Description:     Shows card event channel
    //
    // Component:       `c-card`
    //
    // Modifiers:       `c-card--eventi`
    //                  `c-card--film`
    //                  `c-card--risoranti`
    //                  `c-card--shopping`
    //
    // Dependencies:    `settings/v7/colors.tokens`
    //                  `settings/v7/colors.themes`
    //                  `settings/v7/colors.mode`
    //                  `settings/v7/global`
    //                  `settings/v7/spacing.tokens`
    //
    // ========================================================================
    
    // Variables
    // ========================================================================
    
    $card-kicker-pink: #e91f63;
    $card-kicker-grey: #607d8b;
    $card-kicker-green: #00bfa5;
    $card-kicker-orange: #ffa000;
    
    
    // ========================================================================
    
    .c-card {
      --card-kicker-color: #{$card-kicker-pink};
      --card-kicker-border: #{$ui-06};
      --card-background: #{$ui-05};
    
      [data-color-scheme*="dark"] &{
        --card-background: #{$ui-01-10};
        --card-kicker-border: #{$ui-03};
      }
      @media(prefers-color-scheme: dark) {
        body:not([data-color-scheme*="light"]) & {
          --card-background: #{$ui-01-10};
          --card-kicker-border: #{$ui-03};
        }
      }
    
      background-color: var(--card-background);
      
      &__kicker {
        color: var(--card-kicker-color);
        
        &--inverse {
          --card-kicker-color: #{$inverse-01};
          bottom: $margin-base;
          left: $margin-base;
          background-color: var(--card-kicker-background);
          z-index: 4;
        }
    
        &--cultura {
          --card-kicker-background: #{$card-kicker-pink};
        }
    
        &--svago {
          --card-kicker-background: #{$card-kicker-green};
        }
    
        &--food {
          --card-kicker-background: #{$card-kicker-orange};
        }
    
        &--generic {
          --card-kicker-background: #{$card-kicker-grey};
        }
      }
    
      &__content {
        height: 100%;
      }
    
      &__list-details {
        .c-card__item-details {
          &:nth-child(2),
          &:nth-child(3) {
            margin-top: $margin-small;
          }
        }
      }
    
      &__pull-down {
        flex: 1 0 auto;
      }
    
      &__gradient {
        position: relative;
        display: block;
        
        &:after {
          content: '';
          position: absolute;
          left: 0; 
          bottom: 0;
          width: 100%; 
          height: 50%;
          display: block;
          background: linear-gradient(180deg, rgba($color-black,0) 0%,  rgba($color-black,.2) 15%, rgba($color-black,.8) 80%);
        }
      }
    
      &__icon-top {
        top: 2px;
      }
    
      &__link {
        color: var(--body-secondary-color);
        transition: $global-interactive-transition;
        
        &:hover {
          color: var(--link-color-dark);
        }
      }
      
      &__wrapped {
        height: 100%;
        background: $ui-01;
        border: 1px solid $ui-04;
      }
    
      &__wrapped-item {
        object-fit: scale-down;
        width: 80%;
        height: 70%;
      }
    }
    
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/lib/components/card/card.scss
  • Size: 2.8 KB

No notes defined.