<div class="subsidy-result">
<div class="subsidy-result__head">
<span class="title-m
">Título ayuda/subvención c. elipsis a partir de 50 caracteres</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="caption-label">ABIERTA hasta agotar fondos</span>
</div>
<ul class="subsidy-result__data">
<li>
<svg class="icon icon-ambito-geografico-hipotecas ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#ambito-geografico-hipotecas"></use>
</svg>
<div class="
bodycopy-m
">
Ámbito geográfico:
</div>
<div class="
bodycopy-m
">
Lorem ipsum
</div>
</li>
<li>
<svg class="icon icon-arrow-top-hipotecas ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-top-hipotecas"></use>
</svg>
<div class="
bodycopy-m
">
Cuantía máxima:
</div>
<div class="
bodycopy-m
">
999.999€
</div>
</li>
<li>
<svg class="icon icon-presupuesto-hipotecas ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#presupuesto-hipotecas"></use>
</svg>
<div class="
bodycopy-m
">
Presupuesto:
</div>
<div class="
bodycopy-m
">
999.999€
</div>
</li>
<li>
<svg class="icon icon-arrow-down-hipotecas ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-down-hipotecas"></use>
</svg>
<div class="
bodycopy-m
">
Presupuesto mínimo:
</div>
<div class="
bodycopy-m
">
9.999€
</div>
</li>
</ul>
<div class="subsidy-result__links">
<div class="wrap">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Visitar página oficial</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Abrir pdf (opcional)</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
</div>
<a class="btn
btn_dark
" href="#" id="">
Más información
<svg class="icon icon-16_arrow-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-right"></use>
</svg>
</a>
</div>
</div>
<div class="subsidy-result{{#if closed}} closed{{/if}}{{#if pending}} pending{{/if}}">
<div class="subsidy-result__head">
{{> @title title }}
{{> @caption label }}
</div>
<ul class="subsidy-result__data">
{{#each item}}
<li>
{{#if icon}}{{> @icon icon }}{{/if}}
{{> @bodycopy-m nom }}
{{> @bodycopy-m desc }}
</li>
{{/each}}
</ul>
<div class="subsidy-result__links">
<div class="wrap">
{{> @link link1 }}
{{> @link link2 }}
</div>
{{> @btn btn }}
</div>
</div>
{
"title": {
"text": "Título ayuda/subvención c. elipsis a partir de 50 caracteres",
"type": "-m"
},
"label": {
"text": "ABIERTA hasta agotar fondos",
"type": "-label"
},
"link1": {
"href": "#",
"text": "Visitar página oficial",
"icon-after": {
"name": "16_external-link",
"isAfter": true
}
},
"link2": {
"href": "#",
"text": "Abrir pdf (opcional)",
"icon-after": {
"name": "16_external-link",
"isAfter": true
}
},
"btn": {
"href": "#",
"text": "Más información",
"isDark": true,
"icon-after": {
"name": "16_arrow-right",
"isAfter": true
}
},
"item": [
{
"icon": {
"name": "ambito-geografico-hipotecas"
},
"nom": {
"text": "Ámbito geográfico:"
},
"desc": {
"text": "Lorem ipsum"
}
},
{
"icon": {
"name": "arrow-top-hipotecas"
},
"nom": {
"text": "Cuantía máxima:"
},
"desc": {
"text": "999.999€"
}
},
{
"icon": {
"name": "presupuesto-hipotecas"
},
"nom": {
"text": "Presupuesto:"
},
"desc": {
"text": "999.999€"
}
},
{
"icon": {
"name": "arrow-down-hipotecas"
},
"nom": {
"text": "Presupuesto mínimo:"
},
"desc": {
"text": "9.999€"
}
}
],
"icon-deadline": {
"name": "plazo-hipotecas"
},
"icon-alert": {
"name": "warning-hipotecas"
},
"nom-alert": {
"text": "Atención próximo vencimiento"
},
"isAlert": true
}
.subsidy-result {
padding: 40px 24px;
border-bottom: 1px solid var(--color-border);
@media (--viewport-ms-max){
padding: 40px 0;
}
&__head {
display: flex;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
.title-m{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.caption-label{
white-space: nowrap;
padding: 8px 12px;
background-color: var(--color-background-success);
}
@media (--viewport-ms-max) {
flex-direction: column;
align-items: flex-start;
gap: 16px;
.title-m{
white-space: unset;
}
}
}
&.closed{
.subsidy-result__head {
.caption-label{
background-color: var(--color-background-error);
}
}
}
&.pending{
.subsidy-result__head {
.caption-label{
background-color: var(--color-background-alert);
}
}
}
&__data {
display: flex;
flex-direction: row;
flex-wrap: wrap;
row-gap: 16px;
li {
width: 50%;
float: left;
display: flex;
column-gap: 8px;
@media (--viewport-ms-max) {
width: 100%;
div:first-of-type{
white-space: nowrap;
}
}
div:last-of-type{
color: var(--color-text-subtle);
}
}
}
&__links {
margin-top: 64px;
display: flex;
justify-content: space-between;
@media (--viewport-ms-max) {
margin-top: 48px;
}
.wrap {
display: flex;
gap: 24px;
@media (--viewport-ms-max) {
flex-direction: column;
a{
width: max-content;
}
}
}
@media (--viewport-ms-max) {
justify-content: unset;
width: max-content;
flex-direction: column;
gap: 24px;
a.btn{
width: max-content;
}
}
}
}
Variantes: Default, is Alert.