<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_large ">
<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="dedicated-links">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="dedicated-links__text">
<div class="dedicated-links__title">
<h2 class="
title-l
">
Échale un vistazo a estos enlaces y documentos de interés
</h2>
</div>
</div>
<div class="dedicated-links__list">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Échale un vistazo a estos enlaces de interés</span>
<svg class="icon icon-external icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Documento corporativo.pdf (12MB)</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Documento corporativo.pdf (12MB)</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Documento corporativo.pdf (12MB)</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Documento corporativo.pdf (12MB)</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
<div class="dedicated-link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Échale un vistazo a estos enlaces de interés</span>
<svg class="icon icon-external icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="dedicated-links{{#if accent-light-bg}} accent-light-bg{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="dedicated-links__text">
{{#if label}}
<div class="dedicated-links__label">
{{> @text-label-m label }}
</div>
{{/if}}
<div class="dedicated-links__title{{#if secondary-color}} secondary-color{{/if}}">
{{> @title-l title }}
</div>
{{#if desc}}
<div class="dedicated-links__desc rich-text">
{{> @bodycopy-m desc }}
</div>
{{/if}}
</div>
<div class="dedicated-links__list">
<ul class="row">
{{#each link}}
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="dedicated-links__item">
{{> @dedicated-link this }}
</div>
</li>
{{/each}}
</ul>
</div>
{{#if related-link}}
<div class="dedicated-links__related-link">
{{> @link related-link }}
</div>
{{/if}}
{{#if isPagination}}
<div class="dedicated-links__pagination">
{{ render '@pagination' }}
</div>
{{else if bottom-link}}
<div class="dedicated-links__bottom-link">
{{> @link bottom-link }}
</div>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Échale un vistazo a estos enlaces y documentos de interés"
},
"link": [
{
"link": {
"isSimple": true,
"icon-after": {
"name": "external",
"isAfter": true
},
"href": "#",
"text": "Échale un vistazo a estos enlaces de interés"
}
},
{
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Documento corporativo.pdf (12MB)"
}
},
{
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Documento corporativo.pdf (12MB)"
}
},
{
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Documento corporativo.pdf (12MB)"
}
},
{
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Documento corporativo.pdf (12MB)"
}
},
{
"link": {
"isSimple": true,
"icon-after": {
"name": "external",
"isAfter": true
},
"href": "#",
"text": "Échale un vistazo a estos enlaces de interés"
}
}
]
}
.dedicated-links {
&__text {
margin-bottom: 48px;
text-align: center;
}
&__label {
margin-bottom: 20px;
text-align: center;
}
&__pagination {
margin-top: 48px;
.pagination{
display:flex;
justify-content: center;
}
}
&__bottom-link {
margin-top: 48px;
text-align: center;
}
&__title {
&.secondary-color{
.title-l{color: var(--color-secondary);}
}
}
&__desc {
margin-top: 20px;
}
&__list {
@media (--viewport-sm-min) {
margin-bottom: -30px;
}
.col {
&:last-child {
.dedicated-links__item {
@media (--viewport-ms-max) {
margin-bottom: 0;
}
}
}
}
}
&__item {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 30px;
}
&__related-link{
text-align: center; margin-top: 60px;
}
&.accent-light-bg{background-color: var(--color-accent-light);
@media (--viewport-xs-max) {
padding: 0 20px;
margin: 0 -20px;
}
.dedicated-links__title {margin-top:50px;}
.dedicated-links__related-link {margin-bottom:50px;}
.dedicated-link .link{border-color: var(--color-accent-dark);}
}
}
Variantes: Default, Secondary colors, With description, With related link, Accent Light Background.