<div class="row">
<div class="col summary with-line col-xs-10 col-ms-10 col-xs-mr-ml col-sm-10 col-lg-9">
<div class="summary__title-m">
<h3 class="
title-m
">Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet</h3>
</div>
</div>
</div>
<div class="row">
<div
class="col summary{{#if isLine}} with-line{{/if}}{{#if isAccentDark}} accent-dark{{/if}} col-xs-10 col-ms-10 col-xs-mr-ml col-sm-10 col-lg-9">
{{#if img}}
{{> @icon icon }}
{{/if}}
<div class="summary__title-m{{#if isAccent}} accent{{/if}}">
{{> @title-m title-m }}
</div>
</div>
</div>
{
"img": false,
"icon": {
"name": "quotation-marks"
},
"src": "https://hipotecas.com/-/media/Project/Ecoweb/Icons/quotation-marks.svg",
"title-m": {
"text": "Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet"
},
"isLine": true
}
.summary {margin-bottom: 20px;
svg {
margin: 0 0 10px;
line-height: 0;
width: 54px;
height: 54px;
fill: var(--color-primary-brand);
}
&__title-m {
.title-m {
color: var(--color-secondary);
}
h3 {
color: var(--color-secondary);
margin: 0;
}
&.accent {
.title-m {
color: var(--color-accent);
}
h3 {
color: var(--color-accent);
margin: 0;
}
}
}
&.with-line {
padding-left: 0;
padding-right: 0;
margin-bottom: 20px;
border-left: solid 2px var(--color-accent);
&.accent-dark {
border-color: var(--color-accent-dark);
}
.title-m {
padding: 20px 0 20px 20px;
}
}
}
No notes defined.