<section class="c-intro u-mb-medium u-relative" data-channel="/opinioni/">
<div class="o-container u-p-small u-p-medium@md">
<div class="u-flex u-items-start">
<div class="u-mr-base">
<figure class="c-avatar u-ratio-1 c-avatar--large 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/altimari-veronica.png" loading="lazy" alt="" />
</a>
</figure>
</div>
<div class="u-flex u-size-full u-justify-between">
<div class="u-size-full u-flex u-column">
<a href="/blog/" class="u-no-underline o-link-text u-title-05 u-mb-small"> Opinioni </a>
<h1 class="u-title-02 u-m-none">
<a class="c-intro__title u-no-underline o-link-text" href="#"> Nome e Cognome </a>
</h1>
<h4 class="u-label-07 u-color-secondary u-mt-xsmall u-mb-none"> Giornalista Romatoday.it </h4>
</div>
</div>
</div>
</div>
</section>
<section class="c-intro u-mb-medium u-relative" data-channel="/opinioni/">
<div class="o-container u-p-small u-p-medium@md">
<div class="u-flex u-items-start">
<div class="u-mr-base">{% render "@avatar",{large:'true', thumb:'https://admin.previewtoday.strategy.it/images/test/altimari-veronica.png'}, false %}</div>
<div class="u-flex u-size-full u-justify-between">
<div class="u-size-full u-flex u-column">
<a href="/blog/" class="u-no-underline o-link-text u-title-05 u-mb-small"> Opinioni </a>
{% if title %}
<h1 class="u-title-02 u-m-none">
<a class="c-intro__title u-no-underline o-link-text" href="#"> {{ title }} </a>
</h1>
{% endif %}
{% if byline %}
<h4 class="u-label-07 u-color-secondary u-mt-xsmall u-mb-none"> {{ byline }} </h4>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{
"description": "Classe '86, nata e cresciuta a Firenze, vivo a Roma dal 2007. Laureata in Filosofia all'Università Roma Tre, iscritta all'ordine dei giornalisti della Toscana dal 2013. Amo scrivere di questa città, descriverne pezzi di vita, far parlare chi la vive ogni giorno in tutta la sua follia. Lo faccio dal 2010 per Romatoday, quotidiano online del gruppo Citynews, occupandomi per lo più di temi di cronaca bianca: degrado urbano, opere pubbliche, disservizi, trasporti, rifiuti. Sempre a caccia di storie e denunce a cui dare voce.",
"title": "Nome e Cognome",
"byline": "Giornalista Romatoday.it",
"channel": "/notizie/",
"share": [
"facebook",
"twitter",
"email"
],
"tags": [
{
"item": "Arresto"
},
{
"item": "Ostia"
},
{
"item": "Cronaca"
},
{
"item": "Parco"
},
{
"item": "Omicidio"
},
{
"item": "Green"
},
{
"item": "Politica"
},
{
"item": "Degrado"
},
{
"item": "Atac"
},
{
"item": "Furto"
}
],
"theme": "yellow"
}
// Name: Intro
// Description: Show editor bio, description and social links
//
// Component: `c-intro`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
//
// ========================================================================
@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
.c-intro {
// Custom properties
// ========================================================================
--intro-avatar-size: 5rem;
--intro-details-size: 55.5rem;
--intro-bg-color: var(--background-color-contrast);
--intro-border-color: var(--divider-color);
--intro-text-decoration: var(--divider-color);
--intro-text-decoration-hover: var(--link-color-dark);
--intro-bg-social-icon: var(--link-color-dark);
// ========================================================================
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--intro-border-color);
border-top-width: 1px;
border-top-style: solid;
border-top-color: var(--intro-border-color);
background-color: var(--intro-bg-color);
@if $layout!=amp {
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel*="opinioni"]:not([data-color-scheme*="light"]) &,
body[data-theme="today"]:not([data-color-scheme*="light"]) &[data-channel*="opinioni"] {
--intro-bg-color: #{$category-04-darker-alpha};
--intro-border-color: #{$category-04-darker};
--intro-title-text: #{$inverse-01};
--intro-text-decoration: #{$category-04-darker};
--intro-bg-social-icon: #{$category-04-darker};
}
}
[data-theme="today"][data-color-scheme*="dark"][data-channel*="opinioni"] &,
[data-theme="today"][data-color-scheme*="dark"] &[data-channel*="opinioni"] {
--intro-bg-color: #{$category-04-darker-alpha};
--intro-border-color: #{$category-04-darker};
--intro-title-text: #{$inverse-01};
--intro-text-decoration: #{$category-04-darker};
--intro-bg-social-icon: #{$category-04-darker};
}
}
// ========================================================================
body:not([data-color-scheme*="light"]) & {
--intro-bg-social-icon: #{$ui-03};
}
//
// Channel color variations
//
body[data-theme="today"] &[data-channel*="opinioni"],
[data-theme="today"][data-channel*="opinioni"] & {
--intro-bg-color: #{$category-04-lighter};
--intro-border-color: #{$category-04};
--intro-title-text: #{$category-04-darker};
--intro-text-decoration: #{$category-04};
--intro-text-decoration-hover: #{$category-04-dark};
--intro-bg-social-icon: #{$category-04-darker};
}
&::after {
position: absolute;
right: 0;
bottom: -5px;
content: '';
width: 100%;
height: 1px;
background-color: var(--intro-border-color);
}
&__avatar {
width: var(--intro-avatar-size);
height: var(--intro-avatar-size);
flex: 1 0 auto;
margin-bottom: $margin-base;
@if $responsive-breakpoints {
@include bp(md) {
margin-bottom: 0;
}
}
}
&__rank,
&__title {
color: var(--intro-title-text);
}
&__tags {
padding-top: $padding-medium;
border-top: 1px solid var(--divider-color);
}
// .c-share {
// display: none;
// @if $responsive-breakpoints {
// @include bp(md) {
// display: flex;
// }
// }
// }
.c-share__item {
background-color: var(--intro-bg-social-icon);
}
&__details {
// @if $responsive-breakpoints {
// @include bp(md) {
// max-width: var(--intro-details-size);
// }
// }
> p {
margin: 0;
> a,
> strong > a {
border-bottom: 1px solid var(--intro-text-decoration);
color: var(--link-color-dark);
text-decoration: none;
transition: border .2s ease-out;
&:hover {
border-bottom-color: var(--intro-text-decoration-hover);
}
}
}
.c-intro__tags {
.u-label-03 {
border-bottom: none;
}
}
}
&[data-channel*="opinioni"] {
--intro-bg-color: var(--background-color);
--intro-avatar-size: 6rem;
}
}
Show editor bio, description and social links
Possible variations:
In order to display a intro component use following syntax:
{% render "@intro--default" %} {% render "@intro--blog" %} {% render "@intro--local" %}