<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="contact">
<div class="contact__head">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
<div class="contact__head-wrapper">
<div class="contact__title">
<span class="title-l
">Contactos UCI</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__subtitle">
<span class="bodycopy-m">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__link">
<a class="link
" href="#">
<span>Link global optional</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="contact__body">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="contact__body-wrapper">
<div class="contact__list">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-3 col-lg-3 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/hablamos.svg" alt="Icon">
</div>
<div class="contact__item-title">
<h3 class="
title-l
">
Fale connosco
</h3>
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="tel:+351213002042">
<span>(+351) 213 002 042</span>
</a>
</div>
<div class="contact__item-desc">
<span class="bodycopy">
<p>(Custo de chamada para rede fixa nacional)</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="tel:+351932442604">
<span>(+351) 932 442 604</span>
</a>
</div>
<div class="contact__item-desc">
<span class="bodycopy">
<p>(Custo de chamada para rede móvel nacional)</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__item-desc">
<span class="bodycopy">
<p>Días úteis das 9h00 ás 18h00</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-3 col-lg-3 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/escribenos.svg" alt="Icon">
</div>
<div class="contact__item-title">
<h3 class="
title-l
">
Envie uma mensagem
</h3>
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="mailto:uci@uci.pt">
<span>uci@uci.pt</span>
</a>
</div>
<div class="contact__item-link">
<a class="link
" href="#">
<span>Solicitar contacto</span>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-3 col-lg-3 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/nuestrasagencias.svg" alt="Icon">
</div>
<div class="contact__item-title">
<h3 class="
title-l
">
Visite uma agência UCI
</h3>
</div>
<div class="contact__item-link">
<a class="link
" href="#">
<span>Onde estamos</span>
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-3 col-lg-3 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/gestor-personal-uci.svg" alt="Icon">
</div>
<div class="contact__item-title">
<h3 class="
title-l
">
Lorem ipsum
</h3>
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="mailto:loremipsum@loremipsum.pt">
<span>loremipsum@loremipsum.pt</span>
</a>
</div>
<div class="contact__item-link">
<a class="link
" href="#">
<span>Lorem ipsum</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="button"> <a class="btn
" href="#" id="">
Si lo prefieres, te llamamos
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="contact" {{#if hasID}}id="{{idComponent}}" {{/if}}>
{{#if title}}
<div class="contact__head">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
<div class="contact__head-wrapper">
<div class="contact__title">
{{> @title title }}
</div>
{{#if subtitle}}
<div class="contact__subtitle">
{{> @bodycopy subtitle }}
</div>
{{/if}}
{{#if title-link}}
<div class="contact__link">
{{> @link title-link }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/if}}
<div class="contact__body{{#if noTopBorder}} no-top-border{{/if}}">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="contact__body-wrapper">
<div class="contact__list">
<ul class="row">
{{#each contact}}
<li
class="{{#if isTwoCols}}col-xs-12 col-ms-12 col-sm-6 col-lg-6 col{{else if isFourCols}}col-xs-12 col-ms-12 col-sm-3 col-lg-3 col{{else}}col-xs-12 col-ms-12 col-sm-4 col-lg-4 col{{/if}}">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="{{ this.src }}" alt="{{ this.alt }}">
</div>
<div class="contact__item-title">
{{> @title-l this.title }}
</div>
{{#each numberWithDescription}}
{{#if this.contact}}
<div class="contact__item-link">
{{> @link this.contact }}
</div>
{{else if this.contact-text}}
<div class="contact__item-link">
{{> @bodycopy this.contact-text }}
</div>
{{/if}}
{{#if this.lightbox}}
<div class="contact__item-lightbox">
{{> @lightbox this.lightbox }}
</div>
{{/if}}
{{#if this.desc}}
<div class="contact__item-desc">
{{> @bodycopy this.desc }}
</div>
{{/if}}
{{/each}}
{{#if link}}
<div class="contact__item-link">
{{> @link this.link }}
</div>
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
{{#if button}}
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="button">{{> @btn button }}</div>
</div>
</div>
{{/if}}
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Contactos UCI",
"type": "-l"
},
"subtitle": {
"text": "Lorem ipsum dolor sit amet",
"type": "-m"
},
"title-link": {
"text": "Link global optional",
"href": "#"
},
"contact": [
{
"isFourCols": true,
"src": "/dist/images/hablamos.svg",
"alt": "Icon",
"title": {
"text": "Fale connosco",
"isH3": true
},
"numberWithDescription": [
{
"contact": {
"href": "tel:+351213002042",
"isLarge": true,
"isSimple": true,
"text": "(+351) 213 002 042"
},
"desc": {
"text": "<p>(Custo de chamada para rede fixa nacional)</p>"
}
},
{
"contact": {
"href": "tel:+351932442604",
"isLarge": true,
"isSimple": true,
"text": "(+351) 932 442 604"
},
"desc": {
"text": "<p>(Custo de chamada para rede móvel nacional)</p>"
}
},
{
"desc": {
"text": "<p>Días úteis das 9h00 ás 18h00</p>"
}
}
]
},
{
"isFourCols": true,
"src": "/dist/images/escribenos.svg",
"alt": "Icon",
"title": {
"text": "Envie uma mensagem",
"isH3": true
},
"numberWithDescription": [
{
"contact": {
"href": "mailto:uci@uci.pt",
"isLarge": true,
"isSimple": true,
"text": "uci@uci.pt"
}
}
],
"link": {
"text": "Solicitar contacto",
"href": "#"
}
},
{
"isFourCols": true,
"src": "/dist/images/nuestrasagencias.svg",
"alt": "Icon",
"title": {
"text": "Visite uma agência UCI",
"isH3": true
},
"link": {
"text": "Onde estamos",
"href": "#"
}
},
{
"isFourCols": true,
"src": "/dist/images/gestor-personal-uci.svg",
"alt": "Icon",
"title": {
"text": "Lorem ipsum",
"isH3": true
},
"numberWithDescription": [
{
"contact": {
"href": "mailto:loremipsum@loremipsum.pt",
"isLarge": true,
"isSimple": true,
"text": "loremipsum@loremipsum.pt"
}
}
],
"link": {
"text": "Lorem ipsum",
"href": "#"
}
}
],
"button": {
"href": "#",
"text": "Si lo prefieres, te llamamos"
}
}
.contact {
&__title {
text-align: center;
}
&__subtitle {
text-align: center;margin-top: 24px;
}
&__link {
text-align: center;margin-top: 24px;
}
&__head {
margin-bottom: 60px;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
}
&__body {
position: relative;
/*@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
} Lo quito porque provoca un bug en mobile en la modal */
&::before,
&::after {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: var(--color-secondary-light);
content: '';
}
&.no-top-border {
&::before {
height: 0;
}
}
&::before {
top: 0;
}
&::after {
bottom: 0;
}
}
&__list {
padding: 40px 0;
@media (--viewport-ms-min) {
padding: 60px 80px;
}
@media (--viewport-sm-min) {
padding: 60px 0;
}
&>.row {
justify-content: center;
}
}
&__item {
padding: 20px 0;
text-align: center;
&-link {
margin-top: 20px;
}
&-desc {
margin-top: 5px;
@media (--viewport-sm-min) {
margin-top: 5px;
}
&:last-of-type {
margin-top: 20px;
@media (--viewport-sm-min) {
margin-top: 20px;
}
}
}
&-lightbox {
display: flex;
justify-content: center;
margin-top: 20px;
}
}
&__pic {
max-width: 54px;
margin: 0 auto 10px;
@media (--viewport-ms-min) {
margin-bottom: 20px;
}
}
&__img {
display: block;
max-width: 100%;
height: auto;
}
.button{
display: flex;
justify-content: center;
margin-top: 60px;
@media (--viewport-xs-min) {
margin-top: 40px;
}
}
}
Permite configurar el src de la imagen. Lightbox y Descripción opcionales