<section class="c-intro u-mb-medium u-relative">
<div class="o-container u-p-small u-p-medium@md">
<div class="u-flex u-items-center u-column u-row@md">
<div class="u-mr-base@md">
<figure class="c-avatar 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/alagna_sveva.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 u-items-center u-items-start@md">
<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 class="c-share u-flex">
<a href="#" class="u-mr-xsmall">
<div class="c-share__item c-share__item--facebook u-flex u-items-center u-justify-center">
<svg class="o-icon--md o-icon--fill-inverse ">
<use xlink:href="#icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</a>
<a href="#" class="u-mr-xsmall">
<div class="c-share__item c-share__item--twitter u-flex u-items-center u-justify-center">
<svg class="o-icon--md o-icon--fill-inverse ">
<use xlink:href="#icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</a>
<a href="#" class="u-mr-xsmall">
<div class="c-share__item c-share__item--whatsapp u-flex u-items-center u-justify-center">
<svg class="o-icon--md o-icon--fill-inverse ">
<use xlink:href="#icon-whatsapp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</a>
<a href="#" class="u-mr-xsmall">
<div class="c-share__item c-share__item--email u-flex u-items-center u-justify-center">
<svg class="o-icon--md o-icon o-icon--inverse ">
<use xlink:href="#icon-email" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="c-intro__details u-body-03 u-mt-medium">
<p>
Descrizione del blog
</p>
</div>
</div>
</section>
<section class="c-intro u-mb-medium u-relative">
<div class="o-container u-p-small u-p-medium@md">
<div class="u-flex u-items-center u-column u-row@md">
<div class="u-mr-base@md">
{% render "@avatar",{large:'true', thumb:'https://admin.previewtoday.strategy.it/images/test/alagna_sveva.png'}, false %}
</div>
<div class="u-flex u-size-full u-justify-between">
<div class="u-size-full u-flex u-column u-items-center u-items-start@md">
{% 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>
{% if not hideShare %}
{% render "@share" %}
{% endif %}
</div>
</div>
{% if not hideDescription %}
<div class="c-intro__details u-body-03 u-mt-medium">
<p>
{{ description }}
</p>
{% if tags %}
<div class="c-intro__tags u-flex u-items-center u-wrap u-relative u-mt-medium">
<span class="u-label-05 u-color-secondary u-mr-base">Scrive di:</span>
<ul class="u-flex u-wrap u-m-none u-list-none u-list-reset">
{% for tag in tags %}
<li class="u-mr-xsmall">
<a class="o-link-text u-label-03 u-no-underline" href="#">{{ tag.item }} </a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endif %}
</div>
</section>
{
"description": "Descrizione del blog",
"title": "Nome e Cognome",
"byline": "Giornalista Romatoday.it",
"channel": "/notizie/",
"share": [
"facebook",
"twitter",
"email"
],
"tags": false
}
// Name: Intro
// Description: Show editor bio, description and social links
//
// Component: `c-intro`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
//
// ========================================================================
.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);
// ========================================================================
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};
}
@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};
}
// ========================================================================
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);
&::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;
@include bp(md) {
margin-bottom: 0;
}
}
&__title {
color: var(--intro-title-text);
}
&__tags {
padding-top: $padding-medium;
border-top: 1px solid var(--divider-color);
}
.c-share {
display: none;
@include bp(md) {
display: flex;
}
}
.c-share__item {
background-color: var(--intro-bg-social-icon);
}
&__details {
@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(--bg-color);
--intro-avatar-size: 8rem;
}
}