<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<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="cards-grid alignLeft">
<div class="cards-grid__head">
<div class="cards-grid__title">
<h2 class="
title-l
">
Añadir DNI
</h2>
</div>
</div>
<div class="cards-grid__cards" data-number-of-visible-elements="2">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col cards-grid__cards__item">
<div class="card lightBG clarification thick hasIcon">
<div class="card__icon">
<img src="/dist/images/desktop1680_uci.svg" class="icon" alt="Icon" />
</div>
<div class="card__content">
<div class="card__title">
<div class="
bodycopy-m
">
Carga el archivo o arrastralo sobre el cuadro
</div>
</div>
<div class="card__btn">
<a class="btn
" href="#" id="">
Carga archivo
</a>
</div>
<div class="card__clarification">
<div class="bodycopy-xs
">
Formatos aceptados: jpg, png, pdf / 15 mb máximo.
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col cards-grid__cards__item">
<div class="card lightBG clarification thick hasIcon">
<div class="card__icon">
<img src="/dist/images/fotografia_uci.svg" class="icon" alt="Icon" />
</div>
<div class="card__content">
<div class="card__title">
<div class="
bodycopy-m
">
Haz una foto y nosotros nos ocupamos del resto
</div>
</div>
<div class="card__btn">
<a class="btn
" href="#" id="">
Escanear documento
</a>
</div>
<div class="card__clarification">
<div class="bodycopy-xs
">
Asegúrate de que la zona esté iluminada y lorem ipsum dolor sit amet
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="cards-list__bottom-link">
<a class="link
" href="#">
<span>Cancelar</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}}
class="cards-grid{{#if isFourCols}} fourcols{{/if}}{{#if isAccentLight}} AccentLight{{/if}}{{#if isTwoColsWide}} alignLeft{{/if}}{{#if isOneColWide}} alignLeft{{/if}}{{#if isOutOfGrid}} alignLeft{{/if}}">
<div class="cards-grid__head">
<div class="cards-grid__title">
{{> @title-l title }}
</div>
{{#if description}}
<div class="cards-grid__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
{{#if link}}
<div class="cards-grid__link">
{{> @link link }}
</div>
{{/if}}
</div>
<div class="cards-grid__cards" data-number-of-visible-elements="{{data-number}}">
{{#if isThreeCols}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4 col cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
{{else isTwoCols}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-8 col-lg-8 col col-ms-mr-ml">
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else isTwoColsWide}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else isOutOfGrid}}
<div class="cards-grid__wrap">
<ul class="cards-grid__cards__items">
{{#each item}}
<li class="cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
{{else isOneColWide}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-12col-sm-12 col-lg-12 col cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
{{/if}}
{{#if moreItems}}
<div class="cards-list__link">
<button class="link link_more link_simple link_has-icon link_has-icon_after" type="button">
<span>Ver más</span>
{{> "@icon--plus" plus}}
</button>
<button class="link link_more_less link_simple link_has-icon link_has-icon_after" type="button"
style="display:none">
<span>Ver menos</span>
{{render "@icon--less" less}}
</button>
</div>
{{else if isPagination}}
<div class="cards-list__pagination">
{{ render '@pagination' }}
</div>
{{else if bottom-link}}
<div class="cards-list__bottom-link">
{{> @link bottom-link }}
</div>
{{else if bottom-btn}}
<div class="cards-list__bottom-btn">
{{> @btn bottom-btn }}
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomLarge": false,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"data-number": "2",
"title": {
"text": "Añadir DNI"
},
"description": false,
"link": false,
"item": [
{
"card": {
"label": false,
"secondary-link": false,
"isLightBG": true,
"hasIcon": true,
"isThick": true,
"isBodycopyM": true,
"title": {
"text": "Carga el archivo o arrastralo sobre el cuadro"
},
"src": "/dist/images/desktop1680_uci.svg",
"alt": "Icon",
"btn": {
"href": "#",
"text": "Carga archivo"
},
"clarification": {
"text": "Formatos aceptados: jpg, png, pdf / 15 mb máximo."
}
}
},
{
"card": {
"label": false,
"secondary-link": false,
"isLightBG": true,
"hasIcon": true,
"isThick": true,
"isBodycopyM": true,
"title": {
"text": "Haz una foto y nosotros nos ocupamos del resto"
},
"src": "/dist/images/fotografia_uci.svg",
"alt": "Icon",
"btn": {
"href": "#",
"text": "Escanear documento"
},
"clarification": {
"text": "Asegúrate de que la zona esté iluminada y lorem ipsum dolor sit amet"
}
}
}
],
"bottom-link": {
"href": "#",
"text": "Cancelar"
},
"isTwoColsWide": true
}
.cards-grid {
&__head {
margin-bottom: 10px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
.cards-grid__description {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.cards-grid__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.cards-grid__title {
margin-bottom: 20px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
}
&__cards {
.card {
margin-top: 30px;
padding-bottom: 30px;
@media (--viewport-sm-min) {
margin-top: 0;
}
@media (--viewport-ms-max) {
margin-top: 15px;
}
&.accentBG {
margin-bottom: 30px;
padding-bottom: 0;
}
&.upload {
margin-bottom: initial;
padding-bottom: 40px;
}
}
}
&.AccentLight {
background-color: var(--color-accent-light);
padding: 40px;
.cards-grid__cards .card {
padding-bottom: 0;
}
}
.cards-list__link,
.cards-list__bottom-link,
.cards-list__bottom-btn {
text-align: center;
}
.cards-list__pagination .pagination .pagination__list {
justify-content: center;
}
&.alignLeft {
.cards-grid__title,
.cards-list__bottom-link {
text-align: left;
}
.cards-grid__head {
margin-bottom: 40px;
}
}
&__wrap {
.cards-grid__cards__items {
display: flex;
gap: 32px;
width: 100%;
@media (--viewport-ms-max) {
flex-direction: column;
}
.cards-grid__cards__item {
width: 50%;
@media (--viewport-ms-max) {
width: 100%;
}
}
}
}
/* ESTILOS PARA QUE NO HAYA ERRORES EN VIEJAS INSTANCIAS DEL LATEST (CA)
&__list {
margin-bottom: -30px;
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__item {
height: 100%;
margin-bottom: 30px;
}
&__footer {
margin-top: 30px;
text-align: center;
} */
}
Variantes: Default, For category tag