<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="footer-post">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
<ul class="footer-post__links">
<li class="footer-post__link">
<a class="link
link_has-icon link_has-icon_before
link_has-icon link_has-icon_after
" href="#">
<svg class="icon icon-16_chevron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left"></use>
</svg>
<span>A long line for a link</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</li>
<li class="footer-post__link">
<a class="link
link_has-icon link_has-icon_before
link_has-icon link_has-icon_after
" href="#">
<svg class="icon icon-16_chevron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-left"></use>
</svg>
<span>A long line for a link</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</li>
</ul>
<div class="footer-post__tag">
<div class="footer-post__author">
<span class="caption-label">ESCRITO POR <a href='#'>JOhn doe</a></span>
<div class="footer-post__author-img">
<img src="/dist/images/testimonials-bg.jpg" />
</div>
</div>
<div class="footer-post__update-date">
<span class="caption-label">Actualizado por <a href='#'> Mía Wallace</a></span>
<div class="footer-post__update-img">
<img src="/dist/images/img-update.jpg" />
</div>
</div>
</div>
<span class="border"></span>
<div class="text-label">
<span class="caption-label">Share</span>
</div>
<ul class="footer-post__list">
<li class="footer-post__item">
<a class="footer-post__link-social" href="#whatsapp">
<svg class="icon icon-16_whatsapp ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_whatsapp"></use>
</svg>
</a>
</li>
<li class="footer-post__item">
<a class="footer-post__link-social" href="#x">
<svg class="icon icon-16_x-old-twitter ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_x-old-twitter"></use>
</svg>
</a>
</li>
<li class="footer-post__item">
<a class="footer-post__link-social" href="#fb">
<svg class="icon icon-16_facebook ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_facebook"></use>
</svg>
</a>
</li>
<li class="footer-post__item">
<a class="footer-post__link-social" href="#in">
<svg class="icon icon-16_linkedin ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_linkedin"></use>
</svg>
</a>
</li>
<li class="footer-post__item">
<a class="footer-post__link-social" href="#sobre">
<svg class="icon icon-16_mail ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_mail"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="footer-post">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
{{#if item}}
<ul class="footer-post__links">
{{#each item}}
<li class="footer-post__link">
{{> @link this.link }}
</li>
{{/each}}
</ul>
{{/if}}
<div class="footer-post__tag">
<div class="footer-post__author">
{{> @caption author }}
{{#if imgAuthor}}
<div class="footer-post__author-img">
<img src="{{ srcAuthor }}" />
</div>
{{/if}}
</div>
<div class="footer-post__update-date">
{{> @caption updateDate }}
{{#if imgUpdate }}
<div class="footer-post__update-img">
<img src="{{ srcUpdate }}" />
</div>
{{/if}}
</div>
</div>
<span class="border"></span>
{{#if text-label-s}}
<div class="text-label">
{{> @caption text-label-s }}
</div>
{{/if}}
{{#if social}}
<ul class="footer-post__list">
{{#each social}}
<li class="footer-post__item">
<a class="footer-post__link-social" href="{{ this.href }}">
{{> @icon this.icon }}
</a>
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopMedium": true,
"paddingBottomMedium": true
},
"text-label-s": {
"type": "-label",
"text": "Share"
},
"imgAuthor": true,
"imgUpdate": true,
"srcAuthor": "/dist/images/testimonials-bg.jpg",
"srcUpdate": "/dist/images/img-update.jpg",
"updateDate": {
"type": "-label",
"text": "Actualizado por <a href='#'> Mía Wallace</a>"
},
"author": {
"type": "-label",
"text": "ESCRITO POR <a href='#'>JOhn doe</a>"
},
"social": [
{
"href": "#whatsapp",
"icon": {
"name": "16_whatsapp"
}
},
{
"href": "#x",
"icon": {
"name": "16_x-old-twitter"
}
},
{
"href": "#fb",
"icon": {
"name": "16_facebook"
}
},
{
"href": "#in",
"icon": {
"name": "16_linkedin"
}
},
{
"href": "#sobre",
"icon": {
"name": "16_mail"
}
}
],
"item": [
{
"link": {
"href": "#",
"text": "A long line for a link",
"icon-before": {
"name": "16_chevron-left",
"isBefore": true
},
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
}
}
},
{
"link": {
"href": "#",
"text": "A long line for a link",
"icon-before": {
"name": "16_chevron-left",
"isBefore": true
},
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
}
}
}
]
}
.footer-post {
.border{
border-top: solid 1px var(--color-border); padding-bottom: 15px;display: block;
}
.text-label{
text-indent: 12px;
}
&__list {
display: flex;
flex-wrap: wrap;
padding:16px;
gap:40px;
}
&__item {
@media (--viewport-ms-min) {
margin-right: 20px;
}
&:last-child {
margin-right: 0;
}
}
&__link-social {
position: relative;
display: flex;
.icon {
fill: var(--color-icon-accent);
path {
fill: var(--color-icon-accent);
}
}
&:hover,
&:focus {
.icon {
fill: var(--color-secondary-brand);
}
}
}
&__links {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: 0 0px 64px 0;
gap:30px;
}
&__link {
}
&__tag {
display:flex;
flex-flow: wrap;
gap: 24px;
margin-bottom: 24px;
@media (--viewport-xs-max) {
flex-flow:column;
}
}
&__update-date, &__author{
background-color: var(--color-background-accent);
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 5px;
max-width: max-content;
&-img {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.caption-label {
color: var(--color-text);
}
a {
color:var(--color-text-link-secondary);
}
}
}
No notes defined.