<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="
access-report
">
<div class="access-report__nav">
<ul class="access-report__nav-list">
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="empleados" type="radio" name="reports" value="Empleados">
<label class="
access-report__nav-label
visible
" for="empleados">
<h3 id="empleados" class="
title-s
">Empleados</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="accionistas" type="radio" name="reports" value="Accionistas">
<label class="
access-report__nav-label
" for="accionistas">
<h3 id="accionistas" class="
title-s
">Accionistas</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="mediadores" type="radio" name="reports" value="Mediadores">
<label class="
access-report__nav-label
" for="mediadores">
<h3 id="mediadores" class="
title-s
">Mediadores</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="profesionales" type="radio" name="reports" value="Profesionales">
<label class="
access-report__nav-label
" for="profesionales">
<h3 id="profesionales" class="
title-s
">Profesionales</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="clientes" type="radio" name="reports" value="Clientes">
<label class="
access-report__nav-label
" for="clientes">
<h3 id="clientes" class="
title-s
">Clientes</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="proveedores" type="radio" name="reports" value="Proveedores">
<label class="
access-report__nav-label
" for="proveedores">
<h3 id="proveedores" class="
title-s
">Proveedores</h3>
</label>
</div>
</li>
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="sociedad" type="radio" name="reports" value="Sociedad">
<label class="
access-report__nav-label
" for="sociedad">
<h3 id="sociedad" class="
title-s
">Sociedad</h3>
</label>
</div>
</li>
</ul>
</div>
<div class="access-report__content">
<ul class="row">
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report visible">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 2</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 2
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 3</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 3
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 4</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 4
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 5</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 5
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 6</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 6
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
<div class="report">
<div class="report__label">
<div class="text-label-m">Mejoramos de forma constante 7</div>
</div>
<div class="report__title">
<h2 class="
title-l
">
Nuestros empleados tienen una media de 15 años de antigüedad 7
</h2>
</div>
<div class="report__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="report__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Descargar informe</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="
access-report
{{#if isYellow}}access-report_bg-color_yellow{{/if}}
">
<div class="access-report__nav">
<ul class="access-report__nav-list">
{{#each nav}}
<li class="access-report__nav-item">
<div class="access-report__nav-radio">
<input class="access-report__nav-input" id="{{ this.id }}" type="radio" name="reports" value="{{ this.text }}">
<label class="
access-report__nav-label
{{#if this.isVisible}}visible{{/if}}
" for="{{ this.id }}">
{{> @title-s this }}
</label>
</div>
</li>
{{/each}}
</ul>
</div>
<div class="access-report__content">
<ul class="row">
{{#each reports}}
<li class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-sm-mr-ml col-lg-6 col">
{{> @report this }}
</div>
</div>
</li>
{{/each}}
</ul>
</li>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"isYellow": false,
"nav": [
{
"isVisible": true,
"text": "Empleados",
"id": "empleados",
"isH3": true
},
{
"text": "Accionistas",
"id": "accionistas",
"isH3": true
},
{
"text": "Mediadores",
"id": "mediadores",
"isH3": true
},
{
"text": "Profesionales",
"id": "profesionales",
"isH3": true
},
{
"text": "Clientes",
"id": "clientes",
"isH3": true
},
{
"text": "Proveedores",
"id": "proveedores",
"isH3": true
},
{
"text": "Sociedad",
"id": "sociedad",
"isH3": true
}
],
"reports": [
{
"visible": true,
"text-label": {
"text": "Mejoramos de forma constante"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 2"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 2"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 3"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 3"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 4"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 4"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 5"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 5"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 6"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 6"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
},
{
"text-label": {
"text": "Mejoramos de forma constante 7"
},
"title": {
"text": "Nuestros empleados tienen una media de 15 años de antigüedad 7"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible. Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"link": {
"isSimple": true,
"icon-after": {
"name": "download",
"isAfter": true
},
"href": "#",
"text": "Descargar informe"
}
}
]
}
.access-report {
padding: 100px 0;
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -19px;
}
&_bg-color {
&_yellow {
background-color: var(--color-accent-light);
}
}
&__nav {
overflow-x: scroll;
scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox*/
-ms-overflow-style: none; /* Hide the scrollbar in IE and Edge*/
margin-bottom: 80px;
text-align: center;
&::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chromium */
}
&-list {
display: inline-flex;
}
&-item {
margin-right: 40px;
@media (--viewport-sm-min) {
margin-right: 75px;
}
&:first-child {
padding-left: 20px;
@media (--viewport-ms-min) {
padding-left: 60px;
}
@media (--viewport-sm-min) {
padding-left: 109px;
}
}
&:last-child {
padding-right: 20px;
margin-right: 0;
@media (--viewport-ms-min) {
padding-right: 60px;
}
@media (--viewport-sm-min) {
padding-right: 103px;
}
}
}
&-input {
position: absolute;
left: -9999px;
opacity: 0;
&:hover,
&:focus {
+ .access-report__nav-label {
&::after {
width: 100%;
}
}
}
}
&-label {
position: relative;
display: block;
padding-bottom: 5px;
transition: opacity 0.5s;
&::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 0;
height: 1px;
background-color: var(--color-accent);
transition: all 0.3s;
content: '';
}
&:hover,
&:focus {
&::after {
width: 100%;
}
}
&.visible {
&::after {
width: 100%;
}
}
}
&-title {
position: relative;
&::after {
position: absolute;
bottom: -5px;
left: 0;
display: block;
width: 0;
height: 1px;
background-color: var(--color-accent);
content: "";
}
}
}
&__content {
@media (--viewport-xs-max) {
padding: 0 20px;
}
}
.report {
display: none;
&.visible {
display: block;
}
}
}
Variantes: Default, With white bg Permite definir id y value a cada input de la navegación, hacer visible o no cada label y configurar su id también