GDL - Global Design Language

Story: Search 

<article class="c-story  c-story--search u-py-medium " data-channel="/notizie/">

    <figure class="c-story__media u-size-full">
        <a class="u-block u-relative" 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 class="c-story__content">

        <header class="c-story__header">
            <a class="o-link-text" href="#">
                <h1 class="u-heading-04  u-mb-small u-mt-none">Angels there and shore with or. The visiter chamber clasp.</h1>
            </a>
        </header>

        <span class="u-label-05 u-color-base u-inline-block u-mb-xsmall">4 commenti</span>

        <div class="u-flex u-items-center u-justify-start u-mb-xsmall">

            <svg class="o-icon o-icon--sm u-mr-xxsmall">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
            </svg>
            <a class="o-link-text" href="#">
                <span class="u-label-03 u-mr-xxsmall">Conca d&#39;oro</span>
            </a>

            <span class="u-label-03 u-color-secondary">Via Val di Lanzo</span>

        </div>

        <ul class="u-p-none u-m-none u-list-none u-flex u-items-center">
            <svg class="o-icon o-icon--sm u-mr-xxsmall">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tag"></use>
            </svg>

            <li class="u-relative u-mr-xxsmall">
                <a class="u-no-underline" href="#">
                    <span class="o-link-text u-label-03 u-color-base">tag1,</span>
                </a>
            </li>

            <li class="u-relative u-mr-xxsmall">
                <a class="u-no-underline" href="#">
                    <span class="o-link-text u-label-03 u-color-base">tag2,</span>
                </a>
            </li>

            <li class="u-relative u-mr-xxsmall">
                <a class="u-no-underline" href="#">
                    <span class="o-link-text u-label-03 u-color-base">tag3,</span>
                </a>
            </li>

            <li class="u-relative u-mr-xxsmall">
                <a class="u-no-underline" href="#">
                    <span class="o-link-text u-label-03 u-color-base">tag4</span>
                </a>
            </li>

        </ul>

    </div>

    <span class="c-story__byline u-label-08 u-color-secondary u-mb-xsmall u-block">
        <span class="c-story__kicker u-label-02 u-mb-xsmall u-mr-xsmall u-block">Label</span>

        23 maggio 2020

    </span>

</article>
 
<article class="c-story  c-story--{{modifier}} u-py-medium {% if grid %}l-grid__item{% endif %}" {% if grid %}data-grid-position="{{grid_position}}"{% endif %} data-channel="{{channel}}">

  {% if media %}
    <figure class="c-story__media u-size-full">
      <a class="u-block u-relative" href="#">
        {% if video %}
          <div class="o-icon-play u-absolute u-bottom u-mb-small u-ml-small"></div>
        {% endif %}
        <img decoding="async" referrerpolicy="no-referrer" class="u-size-full" src="{{media}}" loading="lazy" alt="{{title}}">
      </a>
    </figure>
  {% endif %}
  
  <div class="c-story__content">

    <header class="c-story__header">
      <a class="o-link-text" href="#">
        <h1 class="{% 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-mb-small u-mt-none">{{title}}</h1>
      </a>
    </header>

    {% if meta %}

      {% if comments %}
        <span class="u-label-05 u-color-base u-inline-block u-mb-xsmall">{{comments}} commenti</span>
      {% endif %}

      <div class="u-flex u-items-center u-justify-start u-mb-xsmall">
        {% if zone %}
          <svg class="o-icon o-icon--sm u-mr-xxsmall">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-map-pin"></use>
          </svg>
          <a class="o-link-text" href="#">
            <span class="u-label-03 u-mr-xxsmall">{{zone}}</span> 
          </a>
        {% endif %}
        {% if address %}
          <span class="u-label-03 u-color-secondary">{{address}}</span>
        {% endif %}
      </div>

      <ul class="u-p-none u-m-none u-list-none u-flex u-items-center">
        <svg class="o-icon o-icon--sm u-mr-xxsmall">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tag"></use>
        </svg>
        {% for i in range(0,4) %}
        <li class="u-relative u-mr-xxsmall">
          <a class="u-no-underline" href="#">
            <span class="o-link-text u-label-03 u-color-base">tag{{i+1}}{% if i !== 3 %},{% endif %}</span>
          </a>
        </li>
        {% endfor %}
      </ul>

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

  {% if author or date or counter %}  
    <span class="c-story__byline u-label-08 u-color-secondary u-mb-xsmall u-block">
      <span class="c-story__kicker u-label-02 u-mb-xsmall u-mr-xsmall u-block">{{label}}</span>

      {% if date %}
        {{ date }}
      {% endif %}

    </span>
  {% endif %}

</article>
 
{
  "title": "Angels there and shore with or. The visiter chamber clasp.",
  "summary": false,
  "author": "John Doe",
  "label": "Label",
  "date": "23 maggio 2020",
  "channel": "/notizie/",
  "media": [
    "https://unsplash.it/600/338?random"
  ],
  "modifier": "search",
  "size": "compact",
  "meta": true,
  "comments": 4,
  "zone": "Conca d'oro",
  "address": "Via Val di Lanzo"
}
  • 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`
//
// ========================================================================


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

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

  @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};
  }  

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

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

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

  &--inset,
  &--stack,
  &--card,
  &--overlay,
  &--inline,
  &--inline-sm,
  &--inline-lg,
  &--square-dark  {
    .c-story__content {
      grid-area: headline;
    }

    grid-template-areas: 
      "media"
      "headline"
      "summary"
      "sublinks"
      "byline";
  }

  &--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-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";
  }

  &--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 {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      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;
  }

  &__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 &,
    .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 & {
      @include z(undercover);
      width: 100%;
      height: 100%;
      margin-bottom: 0;
      object-fit: cover;
      object-position: center;  
    }
  }

  &__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 {
    background-color: var(--kicker-bg);
  
    .c-story--dossier & {
      --kicker-bg: #{$approfondimento-base};
    }
  }

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

    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;
  }

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

    &::before {
      content: '';
      display: block;
      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: 9.5 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.