<section class="splitter splitter_bg-color_white splitter_padding_bottom_40-60 ">
<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="post-headline">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
<div class="post-headline__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="post-headline__head">
<div class="post-headline__head-wrapper sticky-clone__wrapper">
<div class="wrap">
<div class="post-headline__category">
<span class="caption-label">label</span>
</div>
<div class="post-headline__title">
<h1 class="
title-xl
">6 Consejos para aumentar el valor de la vivienda</h1>
</div>
</div>
<div class="post-headline__socials">
<ul class="socials__list">
<li class="socials__item">
<a class="socials__link" href="#whatsapp">
<svg class="icon icon-whatsapp ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#whatsapp"></use>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#x">
<svg class="icon icon-x ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#x"></use>
</svg>
</a>
</li>
<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="#sobre">
<svg class="icon icon-sobre ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#sobre"></use>
</svg>
</a>
</li>
</ul>
<button class="post-headline__socials-trigger" type="button">
<div class="post-headline__socials-trigger-open">
<svg class="icon icon-share ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#share"></use>
</svg>
</div>
<div class="post-headline__socials-trigger-close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</div>
</button>
</div>
</div>
<div class="post-headline__progress">
<div class="porgress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<div class="post-headline__subtitle">
<div id="" class="
bodycopy-l
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ipsum magna. Curabitur cursus imperdiet elit commodo blandit. Nam fermentum nec ipsum vitae sodales. Praesent id luctus purus. In eu augue tellus. Proin vestibulum consequat sapien nec euismod. Proin non dolor libero. </p>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="post-headline__info">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-sm-ml col-md-12 col-lg-12 wrap">
<div class="post-headline__info-main">
<div class="post-headline__update-date">
<svg class="icon icon-16_calendar ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_calendar"></use>
</svg>
<span class="caption-label">Actualizado: <span>11 SEP 2020</span></span>
</div>
<div class="post-headline__date">
<svg class="icon icon-16_calendar ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_calendar"></use>
</svg>
<span class="caption-label">12 SEP 2020</span>
</div>
<div class="post-headline__time">
<svg class="icon icon-16_clock ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_clock"></use>
</svg>
<span class="caption-label">TIEMPO DE LECTURA: 4MINS</span>
</div>
<div class="post-headline__author">
<svg class="icon icon-16_edit-line ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_edit-line"></use>
</svg>
<span class="caption-label">ESCRITO POR: <a href='#'> HIPOTECAS.COM</a></span>
</div>
<div class="post-headline__author">
<svg class="icon icon-16_edit-section ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_edit-section"></use>
</svg>
<span class="caption-label">ACTUALIZADO POR: <a href='#'> MÍA WALLACE</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="post-headline">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8">
<div class="post-headline__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="post-headline__head">
<div class="post-headline__head-wrapper{{#if isSticky}} sticky-clone__wrapper{{/if}}">
<div class="wrap">
<div class="post-headline__category">
{{> @caption category }}
</div>
<div class="post-headline__title">
{{> @title-xl title }}
</div>
</div>
{{#if isSticky}}
<div class="post-headline__socials">
<ul class="socials__list">
{{#each social}}
<li class="socials__item">
<a class="socials__link" href="{{ this.href }}">
{{> @icon this.icon }}
</a>
</li>
{{/each}}
</ul>
<button class="post-headline__socials-trigger" type="button">
<div class="post-headline__socials-trigger-open">
{{ render '@icon--share' }}
</div>
<div class="post-headline__socials-trigger-close">
{{ render '@icon--close' }}
</div>
</button>
</div>
{{#if btn}}
<div class="post-headline__button">
{{> @btn btn }}
</div>
{{/if}}
{{/if}}
</div>
<div class="post-headline__progress">
<div class="porgress">
<div class="progress-bar"></div>
</div>
</div>
</div>
{{#if subtitle}}
<div class="post-headline__subtitle">
{{> @bodycopy-l subtitle}}
</div>
{{/if}}
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="post-headline__info">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-sm-ml col-md-12 col-lg-12 wrap">
<div class="post-headline__info-main">
<div class="post-headline__update-date">
{{ render '@icon--16-calendar' }}
{{> @caption updateDate }}
</div>
<div class="post-headline__date">
{{ render '@icon--16-calendar' }}
{{> @caption date }}
</div>
<div class="post-headline__time">
{{ render '@icon--16-clock' }}
{{> @caption time }}
</div>
<div class="post-headline__author">
{{ render '@icon--16-edit-line' }}
{{> @caption author }}
</div>
<div class="post-headline__author">
{{ render '@icon--16-edit-section' }}
{{> @caption updateSection }}
</div>
{{#if rating}}
<div class="post-headline__rating-wrapper">
<div class="post-headline__rating">
{{ render '@star' }}
{{ render '@star' }}
{{ render '@star' }}
{{ render '@star' }}
{{ render '@star--hollow' }}
</div>
</div>
{{/if}}
</div>
{{#if btn}}
<div class="post-headline__info-button">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottom4060": true
},
"isSticky": true,
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"category": {
"type": "-label",
"text": "label"
},
"social": [
{
"href": "#whatsapp",
"icon": {
"name": "whatsapp"
}
},
{
"href": "#x",
"icon": {
"name": "x"
}
},
{
"href": "#fb",
"icon": {
"name": "fb"
}
},
{
"href": "#in",
"icon": {
"name": "in"
}
},
{
"href": "#sobre",
"icon": {
"name": "sobre"
}
}
],
"updateDate": {
"type": "-label",
"text": "Actualizado: <span>11 SEP 2020</span>"
},
"date": {
"type": "-label",
"text": "12 SEP 2020"
},
"time": {
"type": "-label",
"text": "TIEMPO DE LECTURA: 4MINS"
},
"author": {
"type": "-label",
"text": "ESCRITO POR: <a href='#'> HIPOTECAS.COM</a>"
},
"updateSection": {
"type": "-label",
"text": "ACTUALIZADO POR: <a href='#'> MÍA WALLACE</a>"
},
"subtitle": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ipsum magna. Curabitur cursus imperdiet elit commodo blandit. Nam fermentum nec ipsum vitae sodales. Praesent id luctus purus. In eu augue tellus. Proin vestibulum consequat sapien nec euismod. Proin non dolor libero. </p>"
}
}
.post-headline {
&__head {
margin-bottom: 15px;
@media (--viewport-md-max) {
margin-bottom: 15px;
}
@media (--viewport-ms-max) {
margin-bottom: 20px;
}
&.sticky-clone {
flex-direction: column;
min-height: 60px;
.post-headline {
&__head {
&-wrapper {
justify-content: space-between;
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
max-width: var(--site-width);
min-height: 60px;
padding-top: 18px;
padding-right: calc(var(--gutter-width) - 1px);
padding-bottom: 16px;
padding-left: var(--gutter-width);
@media (--viewport-ms-min) {
padding-right: calc(
var(--gutter-width-ms-min) + 1px
);
padding-left: calc(
var(--gutter-width-ms-min) + 1px
);
}
@media (--viewport-sm-min) {
padding-top: 35px;
padding-right: calc(
var(--gutter-width-ms-min) - 1px
);
padding-bottom: 29px;
padding-left: calc(
var(--gutter-width-ms-min) - 1px
);
}
@media (--viewport-md-min) {
padding-right: calc(
var(--gutter-width-ms-min) + 2px
);
padding-left: var(--gutter-width-ms-min);
}
@media (--viewport-lg-min) {
padding-right: var(--gutter-width-lg-min);
padding-left: var(--gutter-width-lg-min);
}
&.active {
.post-headline {
&__title,
&__category {
opacity: 0;
position: absolute;
left: -9999px;
}
&__socials {
display: block;
width: 100%;
max-width: inherit !important;
flex-basis: auto !important;
padding-left: 0 !important;
.post-headline {
&__socials {
&-trigger {
&-open {
opacity: 0;
right: -9999px;
}
&-close {
opacity: 1;
right: 0;
@media (--viewport-ms-max) {
right: 5%;
top: 35px;
}
}
}
}
}
.socials__list {
opacity: 1;
left: 0;
}
}
&__socials-trigger{
@media (--viewport-ms-max) {
position: initial;
}
}
}
}
/*.post-headline__subtitle {
display:none;
}
.post-headline__category {
margin-bottom: 0;
margin-top: 0;
order:2;
}
.post-headline__title {
order:1;
}*/
.post-headline__socials {
order:2;
}
.wrap{
display: flex;
order: 1;
flex-direction: column;
flex-basis: 60%;
max-width: 60%;
padding-left: 0;
text-align: left;
@media (--viewport-sm-max) {
flex-basis: 50%;
max-width: 50%;
}
@media (--viewport-ms-max) {
flex-basis: 70%;
max-width: 70%;
}
@media (--viewport-xs-max) {
flex-basis: 50%;
max-width: 50%;
}
}
}
}
&__title,
&__category,
&__socials {
padding-right: var(--half-gutter-width);
padding-left: var(--half-gutter-width);
@media (--viewport-ms-min) {
padding-right: var(--half-gutter-width-ms-min, 0.5rem);
padding-left: var(--half-gutter-width-ms-min, 0.5rem);
}
@media (--viewport-lg-min) {
padding-right: var(--half-gutter-width-lg-min, 0.5rem);
padding-left: var(--half-gutter-width-lg-min, 0.5rem);
}
}
&__title {
.bodycopy-l {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'Jornada Sans Book';
font-size: 16px;
font-weight: normal;
line-height: 26px;
letter-spacing: 0;
color: var(--color-accent-dark);
@media (--viewport-sm-min) {
font-family: 'Jornada News Book';
font-size: 18px;
line-height: 28px;
}
@media (--viewport-md-min) {
font-size: 26px;
line-height: 36px;
}
@media (--viewport-lg-min) {
font-size: 20px;
line-height: 30px;
}
}
}
&__category {
margin-bottom: 4px;
margin-top: 0;
@media (--viewport-xs-only) {
/*display: none;*/
}
&-link {
display: flex;
.text-labels-s {
display: inline-block;
}
}
}
&__socials {
display: flex;
.socials {
&__list {
@media (--viewport-sm-min) {
opacity: 1;
position: static;
top: 0;
left: 0;
transform: none;
}
}
&__item {
margin: 5px 44px 5px 0;
.icon{fill: var(--color-primary-brand);}
@media (--viewport-sm-min) {
margin-right: 44px;
}
&:last-child {
margin-right: 0;
}
@media (--viewport-xs-max) {
margin: 5px 25px 5px 0;
}
}
}
}
&__button {
display: flex;
order: 3;
}
&__progress {
display: block;
}
}
}
}
&__title {
transition: opacity 0.3s;
.title-xl + .bodycopy-l {
margin-top: var(--gutter-ms-vertical);
margin-bottom: var(--gutter-ms-vertical);
color:var(--color-secondary);
}
}
&__subtitle {
ul {
> li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
@media (--viewport-ms-min) {
padding-left: 30px;
}
&::before {
position: absolute;
top: 11px;
left: 0;
display: block;
width: 15px;
height: 1px;
background-color: var(--color-accent);
content: '';
}
&:last-child {
margin-bottom: 0;
}
> ul {
margin-top: 20px;
margin-bottom: 0;
> li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
&::before {
position: absolute;
top: 10px;
left: 0;
display: block;
width: 10px;
height: 1px;
background-color: var(--color-accent);
content: '';
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
ol {
counter-reset: custom-counter;
li {
position: relative;
padding-left: 21px;
margin-bottom: 10px;
counter-increment: custom-counter;
&::before {
position: absolute;
top: 7px;
left: 0;
font-family: 'Jornada Sans Book';
font-size: 10px;
font-weight: normal;
line-height: 1;
letter-spacing: 0;
content: counter(custom-counter) ' /';
}
@media (--viewport-ms-min) {
padding-left: 28px;
margin-bottom: 10px;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
&__category {
margin-bottom: 15px;
transition: opacity 0.3s;
.caption-label {
color:var(--color-text);
}
&-link {
display: block;
&:hover,
&:focus {
.text-label-s {
color: var(--color-accent-dark-tertiary);
}
}
.text-label-s {
color: var(--color-accent);
transition: color 0.3s;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
&__botton {
float:right;
}
&__socials {
display: none;
justify-content: flex-end;
align-items: center;
flex-basis: 25%;
max-width: 25%;
padding-right: 0;
@media (--viewport-sm-max) {
flex-basis: 30%;
max-width: 30%;
}
@media (--viewport-ms-max) {
flex-basis: 25%;
max-width: 25%;
}
@media (--viewport-xs-max) {
flex-basis: 10%;
max-width: 10%;
}
&-trigger {
position: relative;
display: flex;
margin-left: auto;
margin-right: 40px;
width: 15px;
height: 15px;
@media (--viewport-sm-min) {
display: none;
}
@media (--viewport-xs-max) {
margin-right: 10px;
}
&::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);
}
}
&-open,
&-close {
position: absolute;
top: 0;
display: flex;
transition: opacity 0.3s;
}
&-open {
opacity: 1;
right: 0;
}
&-close {
opacity: 0;
right: -9999px;
}
.icon {
width: 15px;
height: 15px;
fill: var(--color-primary-brand);
}
}
.socials {
&__list {
opacity: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: -9999px;
transition: opacity 0.3s;
@media (--viewport-ms-max) {
width: 100%;
margin: 0;
padding: 27px 5%;
background-color: var(--color-white);
.post-headline__socials-trigger{
position: initial;
}
}
@media (--viewport-md-min) {
min-width: 152px;
}
.icon {
width: 20px;
height: 20px;
@media (--viewport-sm-min) {
width: 16px;
height: 16px;
}
}
}
}
}
&__button {
display: none;
}
&__progress {
position: absolute;
bottom: 0;
left: 0;
display: none;
width: 100%;
}
&__info {
margin-top: 25px;
.row{
.wrap{
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 32px;
@media (--viewport-ms-max) {
flex-direction: column;
align-items: flex-start;
}
}
}
&-main {
display: flex; gap: 16px; white-space: nowrap; flex-wrap: wrap;
@media (--viewport-xs-max) {
flex-flow: column;
}
@media (--viewport-ms-only) {
display: flex;
}
}
&-button {
@media (--viewport-ms-max) {
margin-top: 25px;
}
}
}
&__update-date{
background-color: var(--color-background-accent);
padding: 1px 10px;
height:29px;
.caption-label {
color: var(--color-text-accent-bold);
}
}
&__update-date,
&__date,
&__author ,
&__time {
display: flex;
align-items: center;
.icon {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-right: 5px;
fill: var(--color-icon);
}
}
&__author {
a {
color: var(--color-text-link-secondary);
}
}
/*
&__author ,
&__time {
@media (--viewport-xs-max) {
margin-top: 10px;
}
@media (--viewport-ms-only) {
margin-left: 40px;
}
@media (--viewport-sm-min) {
margin-top: 20px;
}
}
&__rating-wrapper {
@media (--viewport-xs-max) {
margin-top: 10px;
}
@media (--viewport-ms-only) {
margin-left: auto;
}
@media (--viewport-sm-min) {
margin-top: 20px;
}
}
*/
&__rating {
display: flex;
/*@media (--viewport-ms-only) {
margin-left: 40px;
}*/
}
}
Variantes: Default, Sticky false, Has subtitle. Se puede configurar el href de cada social.