<!-- No lleva splitter porque en uno de los organismos que compone el Resources center filtered -->
<div class="resources-center resources-center_results ">
<div class="resources-center__title">
<h2 class="
title-l
">
Explore o nosso centro de recursos
</h2>
</div>
<div class="resources-center__resultsText">
<div class="resources-center__resultsText-generic">
<div id="" class="
bodycopy-l
">A mostrar resultados de pesquisa:</div>
</div>
<div class="resources-center__resultsText-chosen">
<div id="" class="
bodycopy-l
">Guias</div> <span class="clear-filter">
<button id="" class="btn
" type="">
Limpiar filtro
</button>
</span>
</div>
</div>
<div class="resources-center__list">
<div class="row">
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/featured.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Vídeo</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/access-highlight-bg.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Webinar</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/access-highlight-bg-lap.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Guia</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/distributor-2.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Vídeo</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/distributor-3.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Guia</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa? O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/hipotecas-featured.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Webinar</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/testimonials-bg.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Webinar</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/testimonials-bg2.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Guia</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
<div class="resources-card">
<div class="resources-card__img">
<a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/product.jpg)">
</a>
</div>
<a class="resources-card__category" href="#ok-category-link-working">
<div class="
text-label-s
"><span>Guia</span></div>
</a>
<div class="resources-card__core">
<div class="resources-card__text">
<div class="resources-card__text-title">
<h3 class="
title-m
">O que deve ter em conta antes de comprar uma casa?</h3>
</div>
<div class="resources-card__text-date">
<div class="text-label-m">10 abril 2022</div>
</div>
</div>
<a class="resources-card__icon" href="#ok-arrow-link-workin">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</li>
</div>
</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-center {{#if isResultsPage}} resources-center_results {{/if}}">
<div class="resources-center__title">
{{> @title-l title}}
</div>
<div class="resources-center__resultsText">
<div class="resources-center__resultsText-generic">
{{> @bodycopy-l genericText}}
</div>
<div class="resources-center__resultsText-chosen">
{{> @bodycopy-l chosenCategory}}
<span class="clear-filter">
{{#if btn}}
{{> '@btn' btn}}
{{else}}
{{> '@link' filter}}
{{/if}}
</span>
</div>
</div>
<div class="resources-center__list">
<div class="row">
{{#each cards}}
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4">
{{> @resources-card this }}
</li>
{{/each}}
</div>
</div>
</div>
{
"hasID": false,
"title": {
"text": "Explore o nosso centro de recursos"
},
"genericText": {
"text": "A mostrar resultados de pesquisa:"
},
"chosenCategory": {
"text": "Guias"
},
"cards": [
{
"hasImage": true,
"href": "#",
"src": "/dist/images/featured.jpg",
"category": {
"text": "Vídeo"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/access-highlight-bg.jpg",
"category": {
"text": "Webinar"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/access-highlight-bg-lap.jpg",
"category": {
"text": "Guia"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/distributor-2.jpg",
"category": {
"text": "Vídeo"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/distributor-3.jpg",
"category": {
"text": "Guia"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa? O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/hipotecas-featured.jpg",
"category": {
"text": "Webinar"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/testimonials-bg.jpg",
"category": {
"text": "Webinar"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/testimonials-bg2.jpg",
"category": {
"text": "Guia"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
},
{
"hasImage": true,
"href": "#",
"src": "/dist/images/product.jpg",
"category": {
"text": "Guia"
},
"title": {
"text": "O que deve ter em conta antes de comprar uma casa?"
},
"date": {
"text": "10 abril 2022"
}
}
],
"isResultsPage": true,
"btn": {
"text": "Limpiar filtro"
}
}
.resources-center {
display: flex;
flex-flow: column;
&_results {
.resources-center {
&__title {
display: none;
}
&__resultsText{
display:flex;
flex-flow:column;
align-items: flex-start;
/*padding-bottom:50px;*/
}
}
}
&__resultsText {
display:none;
margin-bottom: 2rem;
&-generic {
margin-bottom: var(--gutter-ms-vertical);
.bodycopy-l {
font-family: 'Jornada Sans Book';
}
}
&-chosen {
margin-bottom: var(--gutter-ms-vertical);
.bodycopy-l {
font-family: 'Jornada Sans Medium';
display: inline;
}
.clear-filter{
color: var(--color-accent-dark);
margin-left: var(--gutter-width);
}
}
}
&__title {
display: flex;
justify-content: center;
text-align: center;
padding-bottom: 50px;
.title-l {
color: var(--color-text);
}
}
&__list {
display: block;
@media(--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__card {
display: block;
padding-bottom: 20px;
@media(--viewport-ms-max) {
display: flex;
justify-content: center;
width: 100%;
padding: 0px 0px;
}
}
}
Variantes: Default, Results format