Story: Editorial

Ready

HTML
View
Context
Assets
Info
Notes


        
        <article class="c-story c-story--editorial  u-relative" data-channel="/opinioni/">

    <figure class="c-avatar    u-relative u-radius-circle u-overflow-hidden ">
        <a href="#">
            <img decoding="async" referrerpolicy="no-referrer" class="c-avatar__thumb u-absolute u-left u-bottom u-size-full" src="https://admin.previewtoday.strategy.it/images/test/alberto_berlini.png" loading="lazy" alt="" />
        </a>
    </figure>

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

        <span class="c-story__byline u-label-09 u-inline-block u-mb-xxsmall">
            <svg class="o-icon o-icon--sm o-icon--fill">
                <use xlink:href="#icon-apex" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
            </svg>
            <span class="u-inline-block">Massimiliano Dona</span>
        </span>

    </header>

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

</article>


        <article class="c-story c-story--{{modifier}} {% if grid %}l-grid__item{% endif %} u-relative" data-channel="{{channel}}">

  {% if thumb %}
    {% render "@avatar" %}
  {% endif %}

  <header class="c-story__header">
    <a class="o-link-text" href="#">
      <h1 class="{% if fullpage %}u-heading-03{% else %}u-heading-05{% endif %} u-truncate u-truncate-3 u-mb-none u-mt-none">{{title}}</h1>
    </a>
    {% if  not simpleLayout %} 
      <span class="c-story__byline u-label-09 u-inline-block u-mb-xxsmall">
        <svg class="o-icon o-icon--sm o-icon--fill">
          <use xlink:href="#icon-apex" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
        <span class="u-inline-block">{{ author }}</span>
      </span>
    {% endif %}
    
    {% if showDate %}
      <span class="u-label-08 u-color-secondary u-block u-mb-xxsmall">{{ date }}</span>
    {% endif %}
  </header>

  {% if simpleLayout %} 
    <span class="c-story__byline u-label-09 u-inline-block">
      <svg class="o-icon o-icon--sm o-icon--fill">
        <use xlink:href="#icon-apex" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
      </svg>
      <span class="u-inline-block">{{ author }}</span>
    </span>
  {% endif %}

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

</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": "Massimiliano Dona",
  "label": "Label",
  "date": "23 maggio 2020",
  "channel": "/opinioni/",
  "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"
    ]
  },
  "modifier": "editorial",
  "thumb": "https://admin.previewtoday.strategy.it/images/test/2022/tamer.png"
}

File:

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

Handle: @story--editorial
Variants (23): Stack -- big , Cover , Stack -- compact , Stack -- narrow , Stack -- tiny , Stack -- square , Stack -- squaresmall , Inline Large , Inline Small , Inline -- big , Inline -- compact , Inline -- narrow , Inline -- tiny , Inset -- big , Inset -- compact , Square -- dark , Card , Overlay -- vertical , Overlay -- horizontal , Editorial , Number , Search , Live
Preview:
- With layout
- Component only
Filesystem Path: src/lib/components/story/story--editorial.njk
References (1): @avatar
Referenced by (3): @header, @header--local, @items--editorial

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:

stack big
stack compact
stack narrow
stack tiny
inline big
inline compact
inline narrow
inline tiny
inset big
inset compact
card
overlay big
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.