<section class="splitter splitter_bg-color_white splitter_padding_top_medium splitter_padding_bottom_medium ">
<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="table-extra">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-3 col-lg-3">
<h2 class="
title-l
">
UCI Key Ratings
</h2>
</div>
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-9 col-lg-9">
<div class="table">
<div class="table__content table__content_col_5" id="exampleTable">
<table>
<thead>
<tr class="secondaryBrandBG">
<th>
<div class="text-label-m">Title1</div>
<a href="https://hipotecas.com" target="_blank"><svg class="icon icon-external ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</th>
<th>
<div class="text-label-m">Title2</div>
<a href="https://hipotecas.com" target="_blank"><svg class="icon icon-external ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</th>
<th>
<div class="text-label-m">Title3</div>
<a href="https://hipotecas.com" target="_blank"><svg class="icon icon-external ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</th>
<th>
<div class="text-label-m">Title4</div>
<a href="https://hipotecas.com" target="_blank"><svg class="icon icon-external ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</th>
<th>
<div class="text-label-m">Title5</div>
<a href="https://hipotecas.com" target="_blank"><svg class="icon icon-external ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#external"></use>
</svg>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
<td class="accentLightBG">
<div class="
bodycopy-m
">
Subtitle
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
<tr>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
<td>
<div class="
bodycopy-m
">
Text
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div{{#if hasID}} id="{{idComponent}}"{{/if}} class="table-extra">
{{#if title}}<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-3 col-lg-3">
{{> @title-l title }}
</div>
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-9 col-lg-9">
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-12 col-lg-12">
{{/if}}
{{> @table table }}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopMedium": true,
"paddingBottomMedium": true
},
"title": {
"text": "UCI Key Ratings"
},
"table": {
"is5Cols": true,
"isSecondaryBrandBG": true,
"header-cell": [
{
"isLabelM": true,
"text": "Title1",
"href": "https://hipotecas.com",
"target": "_blank",
"icon": {
"name": "external"
}
},
{
"isLabelM": true,
"text": "Title2",
"href": "https://hipotecas.com",
"target": "_blank",
"icon": {
"name": "external"
}
},
{
"isLabelM": true,
"text": "Title3",
"href": "https://hipotecas.com",
"target": "_blank",
"icon": {
"name": "external"
}
},
{
"isLabelM": true,
"text": "Title4",
"href": "https://hipotecas.com",
"target": "_blank",
"icon": {
"name": "external"
}
},
{
"isLabelM": true,
"text": "Title5",
"href": "https://hipotecas.com",
"target": "_blank",
"icon": {
"name": "external"
}
}
],
"body-row": [
[
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
},
{
"text": "Subtitle",
"isAccentLightBG": true
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
],
[
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
},
{
"text": "Text"
}
]
]
}
}
.table-extra {
.title-l{
color: var(--color-secondary-brand);
@media (--viewport-ms-max) {
margin-bottom: 30px;
text-align: center;
}
@media (--viewport-xs-max) {
margin-bottom: 15px;
text-align: center;
}
}
.table__content{
&_col {
&_5 {
th,
td {
min-width:140px;
width:20%;
@media (--viewport-ms-max) {
min-width: 190px;
}
@media (--viewport-xs-max) {
min-width: 130px;
}
}
}
}
table{
thead{
tr{
th{padding: 15px 20px; text-align: left;
a{float:right;}
}
}
}
tbody{
tr{border-top: 1px solid var(--color-accent-light);
&:last-child{border-bottom: 1.5px solid var(--color-secondary-brand);}
td{padding: 15px 20px; text-align: left;}
}
}
}
}
}
No notes defined.