Card: Story

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-card  c-card--single  " data-theme="default" data-layout="story">

    <div class="c-card__label-wrapper">
        <span class="c-card__label o-detail--7 ">Story</span>
    </div>

    <div class="c-card__content-wrapper">

        <img class="o-image c-card__image" loading="lazy" src="../../images/card_story.png" alt="[Story Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel" />

        <h3 class="o-heading c-card__title o-heading--h4-primary">
            [Story Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris...
        </h3>

        <span class="c-card__topic o-detail--6">Global Topic text</span>

    </div>
</div>


        {# Variables #}
{% set base_class = button.base_class|default('c-card') %}
{% set truncation = false %}
{% set truncation_length = 0 %}
{% set heading_class = "o-heading--h4-primary" %}

{# Set Title Truncation #}
{% if card.attributes.layout == "resource" or card.attributes.layout == "story" or card.attributes.layout == "news" %}
  {% set truncation = true %}
  {% set truncation_length = 100 %}
{% elseif card.attributes.layout == "product" or card.attributes.layout == "event" or card.attributes.layout == "course" %}
  {% set truncation = true %}
  {% set truncation_length = 50 %}
{% endif %}

{# Set Heading Level #}
{% if card.attributes.layout == "page" or card.attributes.layout == "resource" %}
  {% set heading_class = "o-heading--h3-primary" %}
{% elseif card.attributes.layout == "event" or card.attributes.layout == "course" %}
  {% set heading_class = "o-heading--h4-secondary" %}
{% elseif card.attributes.layout == "news" %}
  {% set heading_class = "o-heading--h5-secondary" %}
{% endif %}


{# {% if card.url %}
<a href="{{card.url}}" target={{card.external ? '_blank' : ''}} style="display: block;">
{% endif %} #}
<div
  class="{{bem(base_class)}} {{(card.archive) ? 'c-card--archived' : ''}} {{(card.attributes.single) ? 'c-card--single' : ''}} {{(card.attributes.dynamic) ? 'c-card--dynamic' : ''}} {% if card.hide %}is-hidden{% endif %}"
  data-theme="{{card.attributes.theme}}" 
  data-layout="{{card.attributes.layout}}"
  {% if card.image and card.attributes.layout == "page"  %}
    style="background-image: url('{{card.image}}'); background-size: cover;"
  {% endif %}
>
  
    {# Card Label #}
    {% if card.label %}
      <div class="{{bem(base_class, 'label-wrapper')}}">
        {% if card.label %}
          <span class="{{bem(base_class, 'label')}} o-detail--7 {{(card.external) ? 'external' : ''}}">{{card.label}}</span>
        {% endif %}
      </div>
    {% endif %}
    
    <div class="{{bem(base_class, 'content-wrapper')}}">
      {# Card Image #}
      {% if card.image and card.attributes.layout != "page" %}
        {% include "@image" with {
          "image": {
            "src": card.image,
            "alt": card.title,
            "extra": bem(base_class, 'image')
          }
        } %}
      {% endif %}
      
      {# Add an inner wrapper for certain content layouts #}
      {% if card.attributes.layout == "bio" or card.attributes.layout == "event" or card.attributes.layout == "course" or card.attributes.layout == "product" %}
        <div class="{{bem(base_class, 'inner-wrapper')}}">
      {% endif %}
          {% if card.archive %}
            <span class="o-caption--primary-caption2"><i>Archived</i></span>
          {% endif %}

          {% if card.attributes.layout == "bio" %}
            <div class="{{bem(base_class, 'title-wrapper')}}">
          {% endif %}
              {# Card Title #}
              {% if card.title %}
                {% include "@heading" with {
                  "heading": {
                    "level": "3",
                    "text": (truncation) ? card.title|truncate(truncation_length) : card.title,
                    "extra": [bem(base_class, 'title'), heading_class]
                  }
                } %}
              {% endif %}
              
              {# Card Subtitle #}
              {% if card.subtitle %}
                {% if card.attributes.layout == 'bio' %}
                  <span class="bem(base_class, 'subtitle') o-body--p2">{{card.subtitle}}</span>
                {% else %}
                  {% include "@heading" with {
                    "heading": {
                      "level": "3",
                      "size": "md",
                      "text": (card.attributes.layout == "resource") ? card.subtitle|truncate(100) : card.subtitle,
                      "modifiers": "secondary",
                      "extra": [bem(base_class, 'subtitle'), "o-heading--h3-secondary"]
                    }
                  } %}
                {% endif %}
              {% endif %}
          {% if card.attributes.layout == "bio" %}
            </div>
          {% endif %}

          {# Card CTA #}
          {% if card.url %}
            {% if card.attributes.layout == 'product' %}
              {% include "@link" with {
                "link": {
                  "text": (card.cta) ? card.cta : "",
                  "url": card.url,
                  "modifiers": "secondary",
                  "external": (card.external) ? true : false,
                  "arrow": true
                }
              } %}
            {% else %}
              {% include "@button" with {
                "button": {
                  "text": (card.cta) ? card.cta : "",
                  "url": card.url,
                  "target": (card.external) ? "_blank" : "",
                  "modifiers": (card.cta) ? "secondary" : "icon",
                  "arrow": "true",
                  "external": (card.external) ? true : false,
                  "extra": [bem(base_class, 'button')]
                }
              } %}
            {% endif %}
          {% endif %}
          
          {% if card.attributes.layout == "news" %}
            <div class="{{bem(base_class, 'tertiary-wrapper')}}">
          {% endif %}
              {# Card Topic #}
              {% if card.topic %}
                <span class="{{bem(base_class, 'topic')}} o-detail--6">{{card.topic}}</span>
              {% endif %}

              {# Article Date #}
              {% if card.article_date %}
                <span class="{{bem(base_class, 'article-date')}} o-detail--6">{{card.article_date}}</span>
              {% endif %}
          {% if card.attributes.layout == "news" %}
            </div>
          {% endif %}
          
          {# Card Columns #}
          {% if card.columns %}
            <div class={{bem(base_class, 'columns')}}>
              {% for info in card.columns %}
                <span class="o-caption--primary-caption2">{{info.left}}</span>
                <span class="o-caption--primary-caption2">{{info.right}}</span>
              {% endfor %}
            </div>
          {% endif %}
      
      {# End conditional inner wrapper for certain content layouts #}
      {% if card.attributes.layout == "bio" or card.attributes.layout == "event" or card.attributes.layout == "course" or card.attributes.layout == "product" %}
        </div>
      {% endif %}
    </div>
</div>
{# {% if card.url %}
</a>
{% endif %} #}


        
            
            {
  "card": {
    "title": "[Story Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel",
    "label": "Story",
    "topic": "Global Topic text",
    "image": "../../images/card_story.png",
    "attributes": {
      "theme": "default",
      "layout": "story",
      "single": true
    }
  }
}

File:

Content:


                                /* Card */
.c-card {
  display: flex;
  gap: var(--ds-space-xs);
  width: 100%;
  height: 100%;
  min-height: 375px;
  padding: var(--ds-space-xs);
  border: 1px solid transparent;
  border-radius: var(--ds-border-radius);
  position: relative;
  // transition: all var(--ds-animation-duration) var(--ds-animation-timing);
  transition: color var(--ds-animation-duration) var(--ds-animation-timing),
    border-color var(--ds-animation-duration) var(--ds-animation-timing),
    trnsform var(--ds-animation-duration) var(--ds-animation-timing);

  &.is-hidden {
    opacity: 0;
    pointer-events: none;
  }

  &:hover {
    cursor: pointer;
    background-color: #F2F2F2;
    border-color: var(--ds-color-red-204);
    color: #666;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #EB3323;
      z-index: var(--ds-z-index-100);
      mix-blend-mode: color;
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgb(235, 51, 35, 0.25);
      background-blend-mode: overlay;
      z-index: var(--ds-z-index-200);
    }

    .c-card__button {
      background-color: var(--ds-color-red-204);
      color: var(--ds-color-red-204);
    }

    .o-link {
      color: var(--ds-color-red-204);

      .o-icon.transition {
        transform: translateX(var(--ds-space-xs));
      }
    }

    .c-card__topic {
      color: currentColor;
    }
  }

  &--archived {
    background-color: var(--ds-color-gray-100);
    border: 1px solid var(--ds-color-border-tertiary);

    .c-card__image {
      filter: grayscale(100%);
    }
  }

  &--single {
    max-width: 325px;
  }

  &[data-layout="page"] {
    flex-flow: column nowrap;
    justify-content: space-between;
    border-color: var(--ds-color-theme-background-primary);

    &:hover {
      border-color: var(--ds-color-red-204);
    }

    .c-card__content-wrapper {
      flex-flow: row nowrap;
      justify-self: flex-end;
      justify-content: space-between;
      align-items: center;
      flex: 0;

      .o-button {
        background: var(--ds-color-gray-100);
      }
    }
  }

  &[data-layout="product"] {
    .c-card__image {
      order: 3;
    }
  }

  &[data-layout="bio"] {
    .c-card__content-wrapper:not(:has(.c-card__image)) {
      align-self: flex-end;
    }

    .c-card__image {
      width: 100%;
      max-width: 170px;
      max-height: 172px;
      align-self: flex-end;
    }
  }

  &[data-layout="event"] {
    .c-card__content-wrapper:not(:has(.c-card__image)) {
      align-self: flex-end;
    }

    .c-card__image {
      width: 100%;
      height: 172px;
      object-fit: cover;
    }
  }

  &[data-layout="course"] {
    .c-card__content-wrapper:not(:has(.c-card__image)) {
      align-self: flex-end;
    }

    .c-card__image {
      width: 145px;
      height: 145px;
      object-fit: cover;
      clip-path: circle(50%);
      align-self: flex-end;
    }
  }

  &[data-layout="story"] {
    .c-card__title {
      flex: 1;
    }

    .c-card__image {
      width: 100%;
      height: 172px;
      object-fit: cover;
    }
  }

  &[data-layout="news"] {
    .c-card__title {
      order: 1;
      flex: 1;
    }

    .c-card__image {
      order: 2;
      width: 100%;
      height: 155px;
      object-fit: cover;
    }

    .c-card__tertiary-wrapper {
      order: 3;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: var(--ds-space-xxs);
      border-top: 1px dotted var(--ds-color-border-primary);
    }

    &:hover {
      .c-card__tertiary-wrapper {
        border-color: var(--ds-color-red-204);
      }
    }
  }

  // Label
  &__label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-xs);
    width: fit-content;
    writing-mode: vertical-rl;

    &::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: currentColor;
      border-radius: 50%;
    }

    &.external {
      &::before {
        content: url('data:image/svg+xml,<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.09 0.5L2.53 0.5L2.53 2L13.97 2L0 15.97L1.06 17.03L15.03 3.06L15.03 14.5H16.53L16.53 1.94L15.09 0.5Z" fill="%23EB2A23"/></svg>');
        display: inline-block;
        width: 17px;
        height: 17px;
        background-color: transparent;
        border-radius: 0;
      }
    }
  }

  // Content
  &__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-xs);
    flex: 1;

    &:has(.c-card__inner-wrapper) {
      justify-content: space-between;
    }
  }

  &__inner-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-xs);
  }

  &__columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-space-xxs);
  }

  &__topic {
    width: fit-content;
    background: var(--ds-color-gray-100);
    color: var(--ds-color-content-primary);
    border-left: 1px solid var(--ds-color-border-tertiary);
    border-bottom: 1px solid var(--ds-color-border-tertiary);
    padding: var(--ds-space-xxxs) var(--ds-space-xxs);
  }
}

URL: /components/raw/card/_card.scss
Filesystem Path: components/02-molecules/card/_card.scss
Size: 5.3 KB

Handle: @card--story
Variants (10): Page , Resource , Product , Bio , Event , Course , Story , News , External , Archive
Preview:
- With layout
- Component only
Filesystem Path: components/02-molecules/card/card.twig
References (4): @image, @heading, @link, @button

The card type is controlled with a data attribute called data-layout. For example: data-layout='page'. The layout options are:

page
resource
product
bio
event
course
story
news

All properties are optional. You can define a card with an external link be setting external: true