<section class="splitter splitter_bg-color_white splitter_padding_top_medium splitter_padding_bottom_medium ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="share-page withParagraph">
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml col-lg-mr-ml">
<span class="title-l
">Añade un segundo titular</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Caminar con alguien no es lo mismo que caminar con quien tú quieres.<br />A un lado estaremos nosotros, y al otro, tu gente, esos para los que quieres lo mejor.<br />Comparte la invitación para poder añadir un segundo titular al Área de Tramitación y poder dar seguimiento a la operación.</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml col-lg-mr-ml">
<div class="share-page__wrapper">
<div class="share-page__body">
<ul class="share-page__list">
<li class="share-page__item">
<a class="share-page__link" href="#WHATSSP">
<svg class="icon icon-WHATSSP ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#WHATSSP"></use>
</svg>
</a>
</li>
<li class="share-page__item">
<a class="share-page__link" href="#TELEGRAMM">
<svg class="icon icon-TELEGRAMM ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#TELEGRAMM"></use>
</svg>
</a>
</li>
<li class="share-page__item">
<a class="share-page__link" href="#EMAIL">
<svg class="icon icon-EMAIL ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#EMAIL"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="share-page{{#if paragraph}} withParagraph{{/if}}">
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml col-lg-mr-ml">
{{> @title title }}
{{#if paragraph}}{{> @bodycopy paragraph }}{{/if}}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11 col-xs-mr-ml col-ms-mr-ml col-sm-mr-ml col-lg-mr-ml">
<div class="share-page__wrapper">
<div class="share-page__body">
<ul class="share-page__list">
{{#each share-item}}
<li class="share-page__item">
<a class="share-page__link" href="{{ this.href }}">
{{> @icon this.icon }}
</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopMedium": true,
"paddingBottomMedium": true
},
"title": {
"text": "Añade un segundo titular",
"type": "-l"
},
"share-item": [
{
"href": "#WHATSSP",
"icon": {
"name": "WHATSSP"
}
},
{
"href": "#TELEGRAMM",
"icon": {
"name": "TELEGRAMM"
}
},
{
"href": "#EMAIL",
"icon": {
"name": "EMAIL"
}
}
],
"paragraph": {
"text": "<p>Caminar con alguien no es lo mismo que caminar con quien tú quieres.<br />A un lado estaremos nosotros, y al otro, tu gente, esos para los que quieres lo mejor.<br />Comparte la invitación para poder añadir un segundo titular al Área de Tramitación y poder dar seguimiento a la operación.</p>",
"type": "-m"
}
}
.share-page {
/* el estilo definido para el title-l es un apaño para corregir la visualización y aplicar diferentes estilos a los que lleva por defecto el h2*/
.title-l {
text-align: center;
color: var(--color-accent);
margin-bottom: 20px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
font-size: 18px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0;
@media (--viewport-ms-min) {
font-size: 24px;
line-height: 34px;
}
@media (--viewport-sm-min) {
font-size: 24px;
line-height: 34px;
}
@media (--viewport-md-min) {
font-size: 26px;
line-height: 36px;
}
@media (--viewport-lg-min) {
font-size: 30px;
line-height: 38px;
}
}
&__list {
display: flex;
flex-wrap: nowrap;
margin: -5px 0;
justify-content: center;
}
&__item {
margin: 5px 20px 5px 0;
@media (--viewport-ms-min) {
margin-right: 30px;
}
&:last-child {
margin-right: 0;
}
}
&__link {
position: relative;
display: flex;
.icon {
width: 54px;
height: 54px;
fill: var(--color-tertiary);
@media (--viewport-xs-max) {
width: 30px;
height: 30px;
}
}
&:hover,
&:focus {
.icon {
fill: var(--color-tertiary-dark);
}
}
}
&.withParagraph{
.title-l {
color: var(--color-text-accent-bold);
margin-bottom: 30px;
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
}
.bodycopy-m {
margin-bottom: 30px;
text-align: center;
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
}
}
}
El href de cada icono es configurable