Tangible Pattern Library

Card: Showcase 

<article class="c-card c-card--showcase c-card--top-image c-card--1-1">

    <div class="c-card__date">
        22 May 2026

    </div>

    <a href="card-url" class="c-card__click-area">
        <div class="c-card__image-block">
            <img class="c-card__image" src="//picsum.photos/640/480" srcset="//picsum.photos/640/480" sizes="100vw" loading="lazy" alt="lorem ipsum" />
        </div>
    </a>

    <div class="c-card__content">

        <p class="c-card__section">Section name</p>

        <a class="c-card__title" href="#link-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
        </a>
        </ul>

    </div>

</article>
 
{% set elementClass = cardModifier is defined ? cardModifier : null %}
<{{ mainCardURL is defined and mainCardURL is not null ? 'article' : 'div' }} class="c-card c-card--showcase {{ elementClass }}">

  {# DATE #}
  <div class="c-card__date">
  {{ date | date("j F Y") }}
    {# {{ (date is defined and date is not null) ? date | date("j F Y") : staticDate }} #}
  </div>
  {# END DATE #}

  {# IMAGE #}
  {% if cardImage is defined and cardImage is not null %}
    {% if mainCardURL is defined and mainCardURL is not null %}
    <a href="{{ mainCardURL }}" class="c-card__click-area">
    {% endif %}
      <div class="c-card__image-block">
        <img class="c-card__image"
            src="{{ cardImage.src }}"
            srcset="{{ cardImage.srcset }}"
            sizes="100vw"
            loading="lazy"
            alt="{{ cardImage.alt }}" />
      </div>
    {% if mainCardURL is defined and mainCardURL is not null %}
    </a>
    {% endif %}
  {% endif %}
  {# END IMAGE #}

  <div class="c-card__content">

    {# SECTION #}
    <p class="c-card__section">{{ sectionName }}</p>
    {# END SECTION #}

    {# TITLE #}
    {% if actions is defined and actions is not null %}
      {% for item in actions %}
        <a class="c-card__title" href="{{ item.url }}">{{ item.text }}</a>
      {% endfor %}
    </a>
    </ul>
    {% endif %}
    {# END TITLE #}

  </div>

</{{ mainCardURL is defined and mainCardURL is not null ? 'article' : 'div' }}>
 
{
  "cardModifier": "c-card--top-image c-card--1-1",
  "mainCardURL": "card-url",
  "cardImage": {
    "src": "//picsum.photos/640/480",
    "srcset": "//picsum.photos/640/480",
    "alt": "lorem ipsum"
  },
  "title": "Lorem ipsum dolor sit amet",
  "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque nulla eligendi adipisci distinctio quis at architecto in est possimus. Vero earum dignissimos molestias quo velit quas, magnam a perspiciatis est.",
  "chips": [
    {
      "title": "Chip normal",
      "chipVersion": "chip"
    },
    {
      "url": "#chip-click",
      "title": "Chip clickable",
      "chipVersion": "chip--clickable"
    }
  ],
  "actions": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "url": "#link-1"
    }
  ],
  "staticDate": "24 Marzo 2023",
  "sectionName": "Section name"
}
  • Content: 
    .c-card {
  display: flex;
  flex-direction: column;
}

.c-card__click-area {
  color: currentColor;
}

.c-card__image-block {
  overflow: hidden;
}

.c-card__image {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.c-card__content {
  // background-color: useHSL(--neutral-off-white);
  padding: spacing(space-24) 0;
}

.c-card__title {
  @include font-scale(level-5, $font-primary, bold);
  color: useHSL(--visionary-blu-500);
}

.c-card__subtitle {
  @include font-scale(level-4, $font-primary, regular);
  color: useHSL(--visionary-blu-500);
}

.c-card__body-text {
  @include font-scale(level-3, $font-primary, regular);
  color: useHSL(--visionary-blu-500);
}

.c-card__title + .c-card__subtitle {
  margin-top: spacing(space-8);
}

.c-card__subtitle + .c-card__body-text {
  margin-top: spacing(space-24);
}

.c-card__chips {
  margin-bottom: spacing(space-8);
}

.c-card__actions {
  margin-top: spacing(space-12);
  margin-bottom: 0;

  a {
    display: block;
  }

}

.c-card__authors {
  display: block;
  flex-wrap: initial;
  margin: 0;
  margin-top: auto;
}

.c-card__authors-label {
  @include font-scale(level-3, $font-primary, bold);
  color: useHSL(--visionary-blu-500);
}

.c-card__authors-list {
  list-style: none;
}

.c-card__author {
  margin: 0;
  @include font-scale(level-3, $font-primary, regular);
}

// Added for showcase variant
.c-card__date {
  @include font-scale(level-3, $font-primary, regular);
  color: useHSL(--visionary-blu-500);
  margin-bottom: spacing(space-8);
}

.c-card__section {
  @include font-scale(level-2, $font-primary, bold);
  margin-bottom: spacing(space-8);
}

  /*------------------------------------*
    Hover state
  *------------------------------------*/
  .c-card:hover,
  .c-card:focus-within {
    .c-card__click-area {
      color: useHSL(--rebel-coral-400);
    }
  }

/*------------------------------------*
  Bottom image
*------------------------------------*/
.c-card--bottom-image {
  flex-direction: column-reverse;
}

/*------------------------------------*
  Ratio 1:1
*------------------------------------*/
.c-card--1-1 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 100%;
    }
  }

  .c-card__image {
    aspect-ratio: 1 / 1;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 4:3 
*------------------------------------*/
.c-card--4-3 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 75%;
    }
  }

  .c-card__image {
    aspect-ratio: 4 / 3;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 3:2 
*------------------------------------*/
.c-card--3-2 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 66.67%;
    }
  }

  .c-card__image {
    aspect-ratio: 3 / 2;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 16:9 
*------------------------------------*/
.c-card--16-9 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 56.25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 9;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 16:10 
*------------------------------------*/
.c-card--16-10 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 62.50%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 10;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 9:16 
*------------------------------------*/
.c-card--9-16 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 177.78%;
    }
  }

  .c-card__image {
    aspect-ratio: 9 / 16;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 10:16 
*------------------------------------*/
.c-card--10-16 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 160%;
    }
  }

  .c-card__image {
    aspect-ratio: 10 / 16;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ratio 3:4 
*------------------------------------*/
.c-card--3-4 {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 133.33%;
    }
  }

  .c-card__image {
    aspect-ratio: 3 / 4;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Ultrawide
*------------------------------------*/
.c-card--ultrawide {

  .c-card__image-block {
    max-height: remify(650px);
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 56.25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 9;
    @include aspect-ratio-fallback;
  }

}

/*------------------------------------*
  Event
*------------------------------------*/
.c-card--event {
  border: remify(1px) solid useHSL(--visionary-blu-10);
  padding: spacing(space-16);
  height: auto;
  min-height: remify(330px);
  // display: block;

  @include min-screen(bp(large)) {
    min-height: remify(430px);
    padding: spacing(space-24);
  }

  .c-card__content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .c-card__body-text {
    margin-top: spacing(space-4);
  }

  .c-card__author {
    float: left;
    margin-right: spacing(space-8);

    &:after {
      content: ',';
    }

  }

  .c-card__author:last-child {
    margin-right: 0;

    &:after {
      display: none;
    }

  }

}

/*------------------------------------*
  Post
*------------------------------------*/
.c-card--post {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 66.67%;
    }
  }
  
  .c-card__image {
    aspect-ratio: 3 / 2;
    @include aspect-ratio-fallback;
  }

  .c-card__authors {
    display: block;
    margin: initial;
    margin-top: spacing(space-24);
  }

  .c-card__author {
    @include font-scale(level-2, $font-primary, bold);
    margin: 0;
  }

  .c-card__author:before {
    content: ' ';
  }

  .c-card__author + .c-card__author:before {
    content: ', ';
  }

}

/*------------------------------------*
  Centered
*------------------------------------*/
.c-card--centered {

  .c-card__title,
  .c-card__body-text,
  .c-card__image-block,
  .c-card__actions {
    text-align: center;
  }

  .c-card__content {
    @include min-screen(bp(2xlarge)) {
      max-width: remify(450px);
      margin-left: auto;
      margin-right: auto;
    }
  }

}

/*------------------------------------*
  Colors Reverse
*------------------------------------*/
.c-card--colors-reverse {

  .c-card__title,
  .c-card__subtitle,
  .c-card__body-text,
  .c-card__actions a {
    color: useHSL(--neutral-off-white);
  }

}

/*------------------------------------*
  No authors
*------------------------------------*/
.c-card--no-authors {

  .c-card__authors {
    display: none;
  }
  
}

/*------------------------------------*
  Brackets card homepage
*------------------------------------*/
.c-card--brackets-home {
  
  .c-card__title {
    @include font-scale(level-7, $font-primary, bold);
    margin-bottom: spacing(space-16);
  }
  
}

/*------------------------------------*
  Product card
*------------------------------------*/
.c-card--product {

  .c-card__image-block {
    @supports not (aspect-ratio: 16 / 9) {
      position: relative;
      height: 0;
      padding-top: 25%;
    }
  }

  .c-card__image {
    aspect-ratio: 16 / 4;
    @include aspect-ratio-fallback;
  }

  .c-card__content {
    background-color: useHSL(--neutral-off-white);
    padding: spacing(space-24);
  }

  .c-card__body-text {
    margin-top: spacing(space-16);
  }

  .c-card__sell-block {
    margin-top: spacing(space-16);
    margin-bottom: spacing(space-24);
  }

  .sell-block__label {
    @include font-scale(level-2, $font-primary, regular);
    text-transform: uppercase;
    margin-bottom: spacing(space-8);
  }

  .sell-block__body {
    @include font-scale(level-4, $font-primary);
  }

}

/*------------------------------------*\
  Showcase card
\*------------------------------------*/
.c-card--showcase {

  .c-card__content {
    padding: spacing(space-16) 0;

    @include min-screen(bp(medium)) {
      padding: spacing(space-24) 0;
    }
  }

}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/pattern-library/02-components/card/_card.scss
  • Size: 8.8 KB
  • Handle: @card--showcase
  • Preview:
  • Filesystem Path: src/pattern-library/02-components/card/card--showcase.twig

No notes defined.