GDL - Global Design Language

Card: Ristoranti 

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

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

        <a href="#" class="u-size-full u-absolute u-left u-top ">

            <img class="u-size-full" decoding="async" referrerpolicy="no-referrer" src="https://citynews-romatoday.stgy.ovh/~media/horizontal-hi/52683334049215/zimg_2809_8_original-2.jpg" loading="lazy" alt="Ristorante Da Pinuccio">

        </a>
    </figure>

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

            <span class="c-card__kicker u-label-02 u-mb-xsmall u-block">Osteria</span>

            <a href="#" class="o-link-text u-block">
                <h2 class="c-card__heading u-m-none u-heading-08">Ristorante Da Pinuccio</h2>
            </a>

        </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-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>

    </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": "Ristorante Da Pinuccio",
  "label": "Osteria",
  "media": "https://citynews-romatoday.stgy.ovh/~media/horizontal-hi/52683334049215/zimg_2809_8_original-2.jpg",
  "modifier": "base",
  "details": true,
  "adress": 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.