<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="socials">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
<span class="border"></span>
<div class="socials__wrapper">
<div class="socials__body">
<div class="
text-label-s
"><span>Share</span></div>
<ul class="socials__list">
<li class="socials__item">
<a class="socials__link" href="#fb">
<svg class="icon icon-fb ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#fb"></use>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#in">
<svg class="icon icon-in ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#in"></use>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#tw">
<svg class="icon icon-tw ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#tw"></use>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#pt">
<svg class="icon icon-pinterest ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#pinterest"></use>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#tg">
<svg class="icon icon-telegram ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#telegram"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="socials">
<div class="row">
{{#if isForBlog}}
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
<span class="border"></span>
{{else}}
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11">
{{/if}}
<div class="socials__wrapper">
<div class="socials__body">
{{#if text-label-s}}
{{> @text-label-s text-label-s }}
{{/if}}
<ul class="socials__list">
{{#each social}}
<li class="socials__item">
<a class="socials__link" href="{{ this.href }}">
{{> @icon this.icon }}
</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopMedium": true,
"paddingBottomMedium": true
},
"social": [
{
"href": "#fb",
"icon": {
"name": "fb"
}
},
{
"href": "#in",
"icon": {
"name": "in"
}
},
{
"href": "#tw",
"icon": {
"name": "tw"
}
},
{
"href": "#pt",
"icon": {
"name": "pinterest"
}
},
{
"href": "#tg",
"icon": {
"name": "telegram"
}
}
],
"isForBlog": true,
"text-label-s": {
"text": "Share"
}
}
.socials {
.border{
border-top: solid 1px var(--color-bg-2); padding-bottom: 15px;display: block;
}
.text-label-s{
margin-bottom: 10px;
}
&__list {
display: flex;
flex-wrap: wrap;
margin: -5px 0;
}
&__item {
margin: 5px 45px 5px 0;
@media (--viewport-ms-min) {
margin-right: 20px;
}
&:last-child {
margin-right: 0;
}
}
&__link {
position: relative;
display: flex;
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 40px;
height: 40px;
content: '';
}
&:hover,
&:focus {
.icon {
fill: var(--color-accent);
}
}
.icon {
width: 20px;
height: 20px;
@media (--viewport-ms-min) {
width: 16px;
height: 16px;
}
}
}
}
Configurable el href de cada social