<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ñade tu Nómina 1
</h2>
</div>
</div>
<div class="cards-grid__cards" data-number-of-visible-elements="2">
<div class="cards-grid__wrap">
<ul class="cards-grid__cards__items">
<li class="cards-grid__cards__item">
<div class="card noBG hasIcon upload-lightbox">
<div class="card__icon small">
<img src="/dist/images/informacionpersonal.svg" class="icon" alt="Icon" />
</div>
<div class="card__content">
<div class="card__title">
<div class="
bodycopy-m
">
<a href='#'>Carga el archivo</a> o arrástralo sobre el cuadro
</div>
</div>
<div class="card__clarification">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>¿No sabes cómo? Sigue estos consejos:</span>
<svg class="icon icon-16_chevron-up icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-up"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="cards-grid__cards__item">
<div class="card noBG upload-lightbox upload-lightbox-multiple">
<div class="card__content">
<div class="card__title">
<div class="wrap">
<h3 class="
title-m
">6 fotos incluídas</h3>
<span class="bodycopy-xs">6 fotos incluídas</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div><svg class="icon icon-camera-on ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#camera-on"></use>
</svg>
</div>
<div class="card__multiple-photos">
<ul>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</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ñade tu Nómina 1"
},
"description": false,
"link": false,
"item": [
{
"card": {
"label": false,
"secondary-link": false,
"NoBG": true,
"hasIcon": true,
"smallIcon": true,
"isUploadLightbox": true,
"isBodycopyM": true,
"title": {
"text": "<a href='#'>Carga el archivo</a> o arrástralo sobre el cuadro"
},
"src": "/dist/images/informacionpersonal.svg",
"alt": "Icon",
"clarification-link": {
"href": "#",
"text": "¿No sabes cómo? Sigue estos consejos:",
"icon-after": {
"name": "16_chevron-up",
"isAfter": true
}
}
}
},
{
"card": {
"label": false,
"secondary-link": false,
"NoBG": true,
"isUploadLightbox": true,
"isUploadLightboxMultiple": true,
"title": {
"text": "6 fotos incluídas"
},
"subtitle": {
"text": "6 fotos incluídas",
"type": "-xs"
},
"icon-title": {
"name": "camera-on"
},
"item": [
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
},
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
},
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
},
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
},
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
},
{
"src": "https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg",
"alt": "Imagen alt",
"pie": {
"text": "Nombre del archivo con ellipsis",
"type": "-xs"
},
"icon": {
"name": "16_feedback-success"
},
"icon-right": {
"name": "16_trash"
}
}
]
}
}
],
"isOutOfGrid": 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