<!-- No lleva splitter porque en uno de los organismos que compone el Resources center filtered -->
<div class="resources">
<div class="resources__header">
<div class="resources__title">
<h2 class="
title-l
">
Cras iaculis nunc diam
</h2>
</div>
</div>
<div class="resources__options">
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col">
<div class="tile-resources">
<div class="tile-resources__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
<div class="tile-resources__content">
<div class="tile-resources__title">
<h3 class="
title-m
title-m_color_light
">Lorem ipsum dolor</h3>
</div>
<div class="tile-resources__bodycopy">
<div class="
bodycopy-m
bodycopy_color_light
">
Vestibulum sodales lacus in mauris accumsan consequat.
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col">
<div class="tile-resources">
<div class="tile-resources__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
<div class="tile-resources__content">
<div class="tile-resources__title">
<h3 class="
title-m
title-m_color_light
">Lorem ipsum dolor</h3>
</div>
<div class="tile-resources__bodycopy">
<div class="
bodycopy-m
bodycopy_color_light
">
Vestibulum sodales lacus in mauris accumsan consequat.
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col">
<div class="tile-resources">
<div class="tile-resources__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
<div class="tile-resources__content">
<div class="tile-resources__title">
<h3 class="
title-m
title-m_color_light
">Lorem ipsum dolor</h3>
</div>
<div class="tile-resources__bodycopy">
<div class="
bodycopy-m
bodycopy_color_light
">
Vestibulum sodales lacus in mauris accumsan consequat.
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col">
<div class="tile-resources">
<div class="tile-resources__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
<div class="tile-resources__content">
<div class="tile-resources__title">
<h3 class="
title-m
title-m_color_light
">Lorem ipsum dolor</h3>
</div>
<div class="tile-resources__bodycopy">
<div class="
bodycopy-m
bodycopy_color_light
">
Vestibulum sodales lacus in mauris accumsan consequat.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="resources__footer">
</div>
</div>
<!-- No lleva splitter porque en uno de los organismos que compone el Resources center filtered -->
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="resources">
<div class="resources__header">
<div class="resources__title">
{{> @title-l title }}
</div>
</div>
<div class="resources__options">
<ul class="row">
{{#each tile}}
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col">
{{> @tile-resources tile }}
</li>
{{/each}}
</ul>
</div>
<div class="resources__footer">
{{#if isLink}}
<div class="resources__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
{
"hasID": false,
"title": {
"text": "Cras iaculis nunc diam"
},
"link": {
"href": "#",
"text": "Lorem ipsum dolor sit",
"id": "resources-distributor-see-more-button"
},
"tile": [
{
"tile": {
"url": "#",
"imageUrl": "/dist/images/distributor-3.jpg",
"title": {
"text": "Lorem ipsum dolor",
"colorLight": true
},
"bodycopy": {
"text": "Vestibulum sodales lacus in mauris accumsan consequat.",
"colorLight": true
}
}
},
{
"tile": {
"url": "#",
"imageUrl": "/dist/images/distributor-3.jpg",
"title": {
"text": "Lorem ipsum dolor",
"colorLight": true
},
"bodycopy": {
"text": "Vestibulum sodales lacus in mauris accumsan consequat.",
"colorLight": true
}
}
},
{
"tile": {
"url": "#",
"imageUrl": "/dist/images/distributor-3.jpg",
"title": {
"text": "Lorem ipsum dolor",
"colorLight": true
},
"bodycopy": {
"text": "Vestibulum sodales lacus in mauris accumsan consequat.",
"colorLight": true
}
}
},
{
"tile": {
"url": "#",
"imageUrl": "/dist/images/distributor-3.jpg",
"title": {
"text": "Lorem ipsum dolor",
"colorLight": true
},
"bodycopy": {
"text": "Vestibulum sodales lacus in mauris accumsan consequat.",
"colorLight": true
}
}
}
]
}
.resources {
&__header {
margin-bottom: 10px;text-align:center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
}
&__title {
margin-bottom: 30px;
text-align: center;
.title-l{
color: var(--color-secondary);
}
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
&__link {
text-align: center;
margin-top: 20px;
.link{
cursor: pointer;
}
}
&__options {
.tile {
margin-top: 30px;
@media (--viewport-sm-min) {
margin-top: 0;
}
}
}
.tile-resources{
margin-bottom: 30px;
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
}
}
Variantes: Default, With link, With link and more than 4 options