GDL - Global Design Language

Story: Card 

<article class="c-story c-story--card  u-relative" data-channel="/life/">

    <div class="c-story__media">
        <figure class="o-skeleton o-skeleton-media--horizontal">
            <a class="u-size-full u-mb-small u-absolute u-top" href="#">
                <img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="https://unsplash.it/600/338?random" loading="lazy" alt="Angels there and shore with or. The visiter chamber clasp." />
            </a>
        </figure>
    </div>

    <header class="c-story__header">
        <span class="c-story__kicker u-label-02 u-mb-xsmall u-block">Label</span>
        <a class="o-link-text" href="#">
            <h1 class="c-story__heading  u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
        </a>

        <p class="c-story__summary u-body-04 u-color-secondary u-mb-none">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.</p>

        <span class="c-story__byline u-label-08 u-color-secondary u-mb-xsmall u-block">
            di John Doe

            &middot;
            23 maggio 2020

        </span>

    </header>
</article>
 
<article class="c-story c-story--card {% if grid %}l-grid__item{% endif %} u-relative" {% if grid %}data-grid-position="{{grid_position}}"{% endif %} data-channel="{{channel}}">

  {% if media %}
  <div class="c-story__media">
    <figure class="o-skeleton o-skeleton-media--horizontal">
      <a class="u-size-full u-mb-small u-absolute u-top" href="#">
        <img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="{{media.horizontal}}" loading="lazy" alt="{{title}}"/>
      </a>
    </figure>
  </div>
  {% endif %}

  <header class="c-story__header">
    <span class="c-story__kicker u-label-02 u-mb-xsmall u-block">{{label}}</span>
    <a class="o-link-text" href="#">
      <h1 class="c-story__heading {% if size == 'big' %}u-heading-02 {% elif size == 'compact' %}u-heading-04 {% elif size == 'narrow' %}u-heading-05 {% elif size == 'tiny' %}u-heading-06 {% endif %} u-m-none">{{title}}</h1>
    </a>

    {% if summary %}
      <p class="c-story__summary u-body-04 u-color-secondary u-mb-none">{{summary}}</p>
    {% endif %}

    {% if author %}  
      <span class="c-story__byline u-label-08 u-color-secondary u-mb-xsmall u-block">
          di {{ author }}

        {% if date %}
          &middot;
          {{ date }}
        {% endif %}

      </span>
    {% endif %}

  </header>
</article>
 
{
  "title": "Angels there and shore with or. The visiter chamber clasp.",
  "summary": "Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.",
  "author": "John Doe",
  "label": "Label",
  "date": "23 maggio 2020",
  "channel": "/life/",
  "media": {
    "horizontal_hi": [
      "https://unsplash.it/1000/563?random"
    ],
    "horizontal_mid": [
      "https://unsplash.it/600/338?random"
    ],
    "horizontal_low": [
      "https://unsplash.it/300/169?random"
    ],
    "vertical_hi": [
      "https://unsplash.it/450/600?random"
    ],
    "vertical_mid": [
      "https://unsplash.it/240/320?random"
    ],
    "vertical_low": [
      "https://unsplash.it/180/240?random"
    ],
    "square_hi": [
      "https://unsplash.it/600/600?random"
    ],
    "square_mid": [
      "https://unsplash.it/200/200?random"
    ],
    "square_low": [
      "https://unsplash.it/80/80?random"
    ],
    "horizontal": [
      "https://unsplash.it/600/338?random"
    ],
    "vertical": [
      "https://unsplash.it/450/600?random"
    ]
  },
  "modifier": "card"
}
  • Content: 
    // Name:            Story
// Description:     Shows news content of any kind
//
// Component:       `c-story`
//
//
// Modifiers:       `c-story--stack`
//                  `c-story--inline`
//                  `c-story--inset`
//                  `c-story--card`
//                  `c-story--overlay`
//                  'c-story--square-dark'
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.themes`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

$story-header-width: 85%;
$story-header-border-width: 3px;
$story-header-border-style: solid;
$story-sublink-dot-size: 3px;
$story-number-color: var(--story-number-color);
$story-number-size: 2rem;
$story-number-font: var(--font-sans-grotesk);
$story-number-lineheight: 2.5rem;

// ========================================================================

.c-story {

  // Custom properties
  // ======================================================================

  --story-number-color: #{$text-02};
  --story-kicker-bg: #{$category-01-dark};
  --story-kicker-text: var(--theme-color);  

  // ========================================================================

  display: grid;
  grid-template-columns: 1fr;
  align-content: start; 

  // ======================================================================

  @media (prefers-color-scheme: dark) {  
    body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {   
      --story-number-color: #{$inverse-01};
    }
  }

  [data-channel*="/foto/"]:not([data-color-scheme="user-light"]) &,
  [data-channel*="/video/"]:not([data-color-scheme="user-light"]) &,
  body[data-color-scheme*="dark"]:not([data-model*="sponsor"]) &,
  #{$global-background-dark} &,
  #{$global-background-primary-dark} & {
    --story-number-color: #{$inverse-01};
  }

  &--square-dark {
    gap: 1rem;
    @include bp(md){
      align-content: center;
      align-items: center;
      grid-template-rows: 1fr;
    }
  }

  &--podcast,
  &--inset,
  &--stack,
  &--card,
  &--overlay,
  &--inline,
  &--inline-xs,
  &--inline-xs-reverse,
  &--inline-sm,
  &--inline-sm-reverse,
  &--inline-lg,
  &--square-dark {

    grid-template-areas: 
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";
    .c-story__content {
      grid-area: headline;
    }
  }
  
  &--square-dark,
  &--inline {
    @include bp(md) {
      grid-template-areas: 
        "headline media"
        "summary media"
        "sublinks sublinks"
        "byline byline";
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &--inline-sm {
    @include bp(md) {
      grid-template-areas: 
        "headline headline headline headline headline media media media"
        "summary summary summary summary summary media media media"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }  
  }

  &--inline-sm-reverse {
    @include bp(md) {
      grid-template-areas: 
        "media media media headline headline headline headline headline"
        "media media media summary summary summary summary summary"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }  
  } 

  &--inline-xs {
    @include bp(md) {
      grid-template-areas: 
        "headline headline headline headline headline media media media"
        "summary summary summary summary summary media media media"
        "sublinks sublinks sublinks sublinks sublinks sublinks sublinks sublinks"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }
    @include bp(lg) {
      grid-template-areas: 
        "headline headline headline media"
        "summary summary summary media"
        "sublinks sublinks sublinks sublinks"
        "byline byline byline byline";
      grid-template-columns: repeat(4, 1fr);
    }  
  }

  &--inline-xs-reverse {
    @include bp(md) {
      grid-template-areas: 
        "media media media headline headline headline headline headline"
        "media media media summary summary summary summary summary"
        "sublinks sublinks sublinks sublinks sublinks sublinks sublinks sublinks"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }
    @include bp(lg) {
      grid-template-areas: 
        "media headline headline headline"
        "media summary summary summary"
        "sublinks sublinks sublinks sublinks"
        "byline byline byline byline";
      grid-template-columns: repeat(4, 1fr);
    }  
  }
  
  
  &--inline-square {
    grid-template-areas: 
      "headline"
      "media"
      "summary"
      "sublinks"
      "byline";
    .c-story__content {
      grid-area: headline;
    }
    @include bp(md) {
      grid-template-areas: 
        "headline headline headline headline media media"
        "headline headline headline headline media media";
      grid-template-columns: repeat(6, 1fr);
    } 
  }

   &--inline-square-reverse {
    grid-template-areas: 
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";
    .c-story__content {
      grid-area: headline;
    }
    @include bp(md) {
      grid-template-areas: 
        "media media headline headline headline headline"
        "media media headline headline headline headline";
      grid-template-columns: repeat(6, 1fr);
    } 
  } 

  &--podcast {
    column-gap: 1rem;
    @include bp(md) {
      grid-template-areas: 
        "media media headline headline headline headline headline headline"
        "media media summary summary summary summary summary summary"
        "byline byline byline byline byline byline byline byline";
      grid-template-columns: repeat(8, 1fr);
    }  
  }  

  &--inline-lg {
    @include bp(md) {
      grid-template-areas: "headline headline headline media media media";
      grid-template-columns: repeat(6, 1fr);
    }
  }
      
  &--search {
    grid-template-areas: 
      "media"
      "byline"
      "content";
    border-bottom: 1px solid var(--divider-color);
    @include bp(sm) {
      grid-template-areas: 
        "byline byline media"
        "content content media";
      grid-template-columns: repeat(3, 1fr);
    }
    @include bp(lg) {
      grid-template-areas: 
        "byline content content content content media"
        "byline content content content content media";
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &--live {
    grid-template-areas: 
      "byline"
      "content";
    border-top: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--divider-color);
    @include bp(md) {
      grid-template-areas: "byline content"; }
    
    .c-story__body > p {
      margin-top: 0;
    }

    .c-story__body > p > a {
      color: var(--link-color);
      text-decoration-color: $ui-04;
      text-decoration-skip: ink;
      text-underline-offset: 2px;

      &:hover {
        text-decoration-color: var(--link-color);
      }
    }

    img[style] {
      width: auto !important;
      height: auto !important;
    } 
  }

  &--inset {
    grid-template-areas: 
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";
    @include bp(md) {
      grid-template-areas: 
        "headline headline headline"
        "summary summary media"
        "sublinks sublinks media"
        "byline byline media";
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &--card {
    align-items: stretch;
  }

  &--editorial {
    grid-template-areas: 
      "headline thumb"
      "byline byline"
      "summary summary";
    gap: .2rem;  
  }

  &--focus {
    grid-template-areas: 
      "media"
      "content";
    @include bp(md) {
      grid-template-areas:     
        "content content content content content media media media";
      grid-template-columns: repeat(8, 1fr);
    }
  }

  &--cover-image {
    grid-template-areas: 
      "content";
    @include bp(md) {
      grid-template-areas:     
        "content content content content content media media media";
      grid-template-columns: repeat(8, 1fr);
    }

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 100%;
      height: 100%;
      background-color: #{rgba($ui-02,.6)};
      z-index: -1;
    }
  }

  &__byline {
    grid-area: byline;

    .c-story--editorial & {
      color: var(--story-kicker-text);
    }

    .c-story--search & {
      display: flex;
    }

    .c-story--search & {
      @include bp(lg) {
        display: block;
      }
    }
  }

  &__content {
    grid-area: content;

    .c-story--podcast & {
      text-align: center;
      @include bp(md) {
        text-align: left;
      }
    }
  }

  &__header {

    .c-story--square-dark & {
      @include bp(lg) {
        padding: 0 $padding-xxxlarge;
      }
    }

    .c-story--live & {

      iframe {
        max-width: 100%;
      }
    }

    .c-story--card & {
      position: relative;
      width: $story-header-width;
      margin: -$margin-xlarge auto 0;
      padding: $padding-base;
      border-top-width: $story-header-border-width;
      border-top-style: $story-header-border-style;
      border-top-color: var(--story-header-border);
      background: var(--background-color);
      @include bp(lg) {
        padding-top: $padding-medium;
      }
    }

  }

  &__heading {
    .c-story--overlay & {
      @include type(heading-06);
      @include bp(lg) {
        @include type(heading-05);
      }
    }
  }

  &__media {
    grid-area: media;
    margin-bottom: $margin-small;

    img {
      transition: transform 9s ease-in-out;
      
      .c-story:not(.c-story--focus):hover & {
        transform: scale(1.3);
      }
    }

    .c-story--inline-square-reverse &,
    .c-story--inline-xs-reverse &,
    .c-story--inline-sm-reverse &{
      @include bp(md) {
        margin-bottom: 0;
        margin-right: $margin-small;
      }
    }
 
    .c-story--inline &,
    .c-story--inline-sm &,
    .c-story--inline-lg &,
    .c-story--focus &,
    .c-story--inset & {
      @include bp(md) {
        margin-bottom: 0;
      }
    }

    .c-story--inline &,
    .c-story--inline-sm &,
    .c-story--inline-lg &,
    .c-story--focus & {
      @include bp(md) {
        margin-left: $margin-small;
      }
    }

    .c-story--inset & {
      @include bp(md) {
        margin-top: $margin-small;
        padding-left: $padding-small;
      }
    }

    .c-story--overlay & {
      width: 100%;
      height: 100%;
      margin-bottom: 0;
      object-fit: cover;
      object-position: center;
      @include z(undercover);  
    }

    .c-story--podcast & {
      width: 70%;
      margin: 0 auto $margin-small;
      @include bp(md) {
        width: auto;
        margin: inherit;
        margin-left: 0.75rem;
      }
    }
  }

  &__number {
    top: $margin-medium;
    left: 0;
    color: $story-number-color;
    font-family: $story-number-font;
    font-size: $story-number-size;
    font-weight: 700;
    line-height: $story-number-lineheight;

    // .l-list-border > *:first-child & {
    //   top: 0;
    // }

    .l-list-multi-column > *:first-child & {
      top: $margin-medium;
    }
  }

  // 1. Prevent bad alignments in focus single layout
  &__badge {
    --_badge-bg: var(--kicker-bg);
    background-color: var(--_badge-bg);

    .c-story--dossier & {
      --_badge-bg: #{$dossier-base};
      color: #{$ui-07};
    }

    body[data-channel*="podcast"] &,
    body[data-model*="podcast"] & {
      --kicker-bg: #{$podcast-base};
    }

    // body[data-channel*="cibo"] &,
    // body[data-edition="cibotoday"] & {
    //   display: none;
    // }
  }

  &__kicker {
    grid-area: kicker;
    align-self: self-start; // 1
    color: var(--story-kicker-text);

    .c-story--dossier & {
      span {
        color: #{$ui-01};
        background-color: #{$ui-07};
        padding: $padding-xxxsmall $padding-xxsmall;
      }
    }

    a {color: var(--story-kicker-text);}

    .c-story--overlay & {
      background-color: var(--theme-color);
      color: $inverse-01;
    }

    .c-story--square-dark & {
      color: $inverse-01;
    }
    
    [data-theme="today"] .c-story--overlay & {
      background-color: var(--story-kicker-bg);
      color: $inverse-01;
    }
    
  }

  &__play {
    position: absolute;
    bottom: $margin-base;
    left: $margin-base;
    @include z(cover);
  }
  
  &__summary {
    grid-area: summary;
    margin-top: $margin-xsmall;
    p {
      margin: 0;
      color: var(--body-secondary-color);
      @include type(body-03);
    }
  }

  &__sublinks {
    position: relative;
    grid-area: sublinks;

    &::before {
      display: block;
      content: '';
      width: 30px;
      height: 1px;
      margin-bottom: $margin-small;
      background-color: var(--divider-color);
    }

    .c-story__sublink:not(:last-child) {
      margin-bottom: $margin-xsmall;
    }

    .c-story__kicker {
      color: var(--body-secondary-color);
    }
  }

  &__thumb {
    --story-thumb-size: 4rem;
    grid-area: thumb;
    width: var(--story-thumb-size);
    height: var(--story-thumb-size);
  }

  &__live {
    border-top: 1px solid $ui-01-50;
    margin: 0 #{-$margin-base} #{-$margin-base};
  }
}
  • URL: /components/raw/story/story.scss
  • Filesystem Path: src/lib/components/story/story.scss
  • Size: 14 KB

Story

Story component is used to display news content.

Templates

It comes along with 3 different templates:

  • story.njk default layout used for common cases with some variations (see Variations chapter);
  • story--card.njk card layout used for specific category content;
  • story--overlay.njk overlay layout used for featured content;

Variations

Possible layout variations:

  1. stack big
  2. stack compact
  3. stack narrow
  4. stack tiny
  5. inline big
  6. inline compact
  7. inline narrow
  8. inline tiny
  9. inset big
  10. inset compact
  11. card
  12. overlay big
  13. overlay narrow

In order to generate a variation you must declare modifier and size parameters.

Parameters

  • modifier - related to layout, string data type, accepted values: stack, inline, inset, card, overlay
  • size - related to headlines size, string data type, accepted values: big, compact, narrow, tiny
  • media - display image, boolean data type (default is true)
  • summary - display summary, boolean data type (default is true)
  • sublinks - display sublinks, boolean data type (default is true)
  • author - display author, boolean data type (default is true)
  • date - display date, boolean data type (default is true)

Usage

Render single story

In order to display a default story template use following syntax:

  {% render "@story", {modifier: '[modifier]', size:'[size]' }, true %}

If yout want to customize content set some parameters like:

  {% render "@story", {modifier: '[modifier]', size:'[size]', summary: false, author: false }, true %}

In this case we’re hiding summary and author content.

Render a list of stories

In order to display a list of stories please refer to Templates docs.