<div class="card-contact">
<div class="card-contact__content">
<div class="card-contact__pic">
<svg class="icon icon-hipoteca_casamasreforma ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#hipoteca_casamasreforma"></use>
</svg>
</div>
<div class="card-contact__title">
<h3 class="
title-m
">Si eres cliente</h3>
</div>
<div class="card-contact__link">
<a class="link
link_simple
link_has-icon link_has-icon_before
" href="mailto:clientes@uci.com">
<svg class="icon icon-mail icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#mail"></use>
</svg>
<span>clientes@uci.com</span>
</a>
</div>
<div class="card-contact__link2">
<a class="link
link_simple
link_has-icon link_has-icon_before
" href="tel:912063790">
<svg class="icon icon-tel icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#tel"></use>
</svg>
<span>912 06 37 90</span>
</a>
</div>
<div class="card-contact__more-info">
<div class="
bodycopy-s
">
L-V de 10.00 a 18.00h
</div>
</div>
</div>
</div>
<div class="card-contact{{#if isInactive}} inactive{{/if}}">
<div class="card-contact__content">
{{#if image-src}}
<div class="card-contact__pic">
<img class="card-contact__img" src="{{ image-src }}" alt="{{ image-alt }}" />
</div>
{{/if}}
{{#if image-inactive-src}}
<div class="card-contact__pic">
<img class="card-contact__img" src="{{ image-inactive-src }}" alt="{{ image-alt }}" />
</div>
{{/if}}
{{#if icon}}
<div class="card-contact__pic">
{{> @icon icon }}
</div>
{{/if}}
<div class="card-contact__title">
{{> @title-m title }}
</div>
{{#if text}}
<div class="card-contact__link">
{{> @bodycopy-m text }}
</div>
{{/if}}
{{#if link}}
<div class="card-contact__link">
{{> @link link }}
</div>
{{/if}}
{{#if link2}}
<div class="card-contact__link2">
{{> @link link2 }}
</div>
{{/if}}
{{#if more-info}}
<div class="card-contact__more-info">
{{> @bodycopy-s more-info }}
</div>
{{/if}}
</div>
</div>
{
"image-src": false,
"image-alt": "Icon",
"title": {
"text": "Si eres cliente"
},
"link": {
"text": "clientes@uci.com",
"href": "mailto:clientes@uci.com",
"isSimple": true,
"icon-before": {
"name": "mail",
"isBefore": true
}
},
"link2": {
"text": "912 06 37 90",
"href": "tel:912063790",
"isSimple": true,
"icon-before": {
"name": "tel",
"isBefore": true
}
},
"more-info": {
"text": "L-V de 10.00 a 18.00h",
"colorAccent": true
},
"icon": {
"name": "hipoteca_casamasreforma"
}
}
.card-contact {
display: flex;
flex-direction: column;
height: 100%;
border: solid 1px var(--color-grey3);
padding: 16px 48px;
&__pic {
overflow: hidden;
margin-bottom: 10px;
img {
width: 40px;
height: auto;
}
svg.icon {
width: 40px;
height: 40px;
.inactive & {
filter: grayscale(100%) contrast(0);
}
}
}
&__content {
flex-grow: 1;
text-align: center;
}
&__label {
margin-bottom: 10px;
}
&__title {
margin-bottom: 6px;
}
&__link,
&__link2 {
padding-top: 4px;
.link {
font-family: 'Jornada Sans Book';
font-size: 16px;
font-weight: normal;
line-height: 26px;
letter-spacing: 0;
&.link_has-icon {
display: flex;
align-items: center;
justify-content: center;
padding-left: 0;
.icon {
top: auto;
position: relative;
margin-right: 15px;
}
}
}
}
&__more-info {
padding-top: 4px;
.bodycopy-s {
color: var(--color-grey2);
}
}
&.inactive {
border: solid 1px var(--color-border);
.card-contact__title {
.title-m {
color: var(--color-text-disabled);
}
}
.card-contact__link {
.bodycopy-m {
color: var(--color-text-disabled);
}
}
}
}
No notes defined.