<article class="c-story c-story--inline " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--responsive u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 ">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-04
u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
</a>
<p class="
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
<article class="c-story {% if dossier %}c-story--dossier{% endif %} c-story--{{modifier}} {% if grid %}l-grid__item{% endif %} {% if showNumber %}u-relative{% endif%} " {% if grid %}data-grid-position="{{grid_position}}"{% endif %} data-channel="{{channel}}">
{% if media %}
<div class="c-story__media {% if hideMedia %}u-block u-none@md{% endif %}">
<figure class="o-skeleton {% if square %}o-skeleton-media--5-4{% else %}o-skeleton-media--responsive{% endif %} u-relative">
{% if video %}
<a href="#" class="c-story__play o-icon-play"></a>
{% endif %}
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
{% if square %}
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.square}}" alt="{{title}}">
{% else %}
<source srcset="{{media.horizontal}}" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.vertical}}" alt="{{title}}">
{% endif %}
</picture>
</a>
</figure>
</div>
{% endif %}
<div class="c-story__content u-relative">
{% if showNumber %}
<div class="c-story__number u-absolute">{{number}}.</div>
{% endif %}
<header class="c-story__header {% if showNumber %}u-pl-xlarge{% endif %}">
<div class="c-story__kicker u-mb-xsmall">
{% if approfondimento %}
<a class="u-no-underline" href="#">
{% if dossier %}
<small class="c-story__badge u-color-inverse u-label-10 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-xxxsmall">
dossier
</small>
{% else %}
<small class="c-story__badge u-color-inverse u-label-10 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-xxxsmall">
approfondimento
</small>
{% endif %}
</a>
{% endif %}
<span class="u-label-02 {% if square %}u-ml-medium u-relative u-line-decoration u-block{% endif %}">{{label}}</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
{% if truncate %}u-truncate u-truncate-{{truncate}}{% endif %}
c-story__heading
{% if size == 'big' %}u-heading-02
{% elif size == 'medium' %}u-heading-09
{% elif size == 'small' %}u-heading-08
{% elif size == 'compact' %}u-heading-04
{% elif size == 'narrow' %}u-heading-04
{% elif size == 'heading-05' %}u-heading-05
{% elif size == 'tiny' %}u-heading-06
{% elif size == 'u-heading-10' %}u-heading-10
{% elif size == 'heading-05-06' %}u-heading-05-06{% endif %}
u-m-none">{% if decoration %}<span class="u-decoration u-decoration--highlighted u-my-large">{{title}}</span>{% else %}{{title}}{% endif %}</h1>
</a>
{% if modifier=='inline-sm' or modifier=='inline' or modifier=='inline-lg' or modifier=='square-dark' %}
<p class="
{% if deskSummary %} u-none u-block@md {% endif %}
{% if dark %} u-color-inverse{% endif %}
{% if hideSummary %}u-block u-none@md{% endif %}
{% if truncate %}u-truncate {% endif %}
{% if truncate==3 %}u-truncate-3 {% else %}u-truncate-4 {% endif %}
c-story__summary u-body-03 u-truncate u-mb-none ">{{summary}}
</p>
{% endif %}
{% if sublinks and (modifier=='inline-sm' or modifier=='inline-lg') %}
<ul class="c-story__sublinks u-list-none u-mt-small u-mb-none u-pl-none">
{% for sublink in sublinks %}
<li class="c-story__sublink">
<a class="u-no-underline" href="#">
<span class="c-story__kicker o-dot u-label-03">{{sublink.kicker}}</span>
<span class="o-link-text u-heading-07" >{{sublink.title}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</header>
{% if modifier!='square-dark' and modifier!='inline-sm' and modifier!='inline' and modifier!='inline-lg'%}
{% if truncate %}
<div class="c-story__summary u-truncate">
{% endif %}
<p class="
{% if deskSummary %} u-none u-block@md {% endif %}
{% if hideSummary %}u-block u-none@md{% endif %}
{% if square %}u-color-secondary{% endif %}
{% if not truncate %}c-story__summary u-mb-none {% else %}u-m-none {% endif %}
u-body-03">{{summary}}</p>
{% if truncate %}
</div>
{% endif %}
{% endif %}
{% if sublinks and (modifier!='inline-sm' and modifier!='inline-lg') %}
<ul class="c-story__sublinks u-list-none u-mt-small u-mb-none u-pl-none">
{% for sublink in sublinks %}
<li class="c-story__sublink">
<a class="u-no-underline" href="#">
<span class="c-story__kicker o-dot u-label-03">{{sublink.kicker}}</span>
<span class="o-link-text u-heading-07" >{{sublink.title}}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if showAuthor or showDate or showCounter %}
<span class="c-story__byline u-label-08 u-color-secondary u-mt-small u-block">
{% if showCounter %}
{{ counter }} foto
{% if showAuthor or showDate %}
·
{% endif %}
{% endif %}
{% if showAuthor %}
di {{ author }}
{% endif %}
{% if showAuthor and showDate %}
·
{% endif %}
{% if showDate %}
{{ date }}
{% endif %}
</span>
{% endif %}
{% if live %}
<div class="c-story__live o-bg-dark u-p-base u-z-cover u-block u-none@md u-mt-small">
<a class="u-no-underline o-link-text u-flex u-content-between u-items-center" href="/notizie/tutte/">
<span class="u-labal-08 u-uppercase u-mb-none">
<span class="o-icon-live o-icon-live--out">
<span class="o-icon-live o-icon-live--in is-blinking"></span>
</span>
Ultim'ora
</span>
<svg class="u-ml-auto o-icon o-icon--inverse o-icon--md">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</a>
</div>
{% endif %}
</div>
</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": "/notizie/",
"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": "inline",
"size": "narrow"
}
// 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};
}
}
Story component is used to display news content.
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;Possible layout variations:
In order to generate a variation you must declare modifier and size parameters.
modifier - related to layout, string data type, accepted values: stack, inline, inset, card, overlaysize - related to headlines size, string data type, accepted values: big, compact, narrow, tinymedia - 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)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.
In order to display a list of stories please refer to Templates docs.