<section class="o-society-section o-society-section--ads" data-society-section>
<div class="o-society-section__wrapper">
<div class="o-society-section__container">
<div class="o-society-section__inner">
<article class="m-society-article m-society-article--narrow" data-society-article>
<a class="m-society-article__link" href="#link"></a>
<figure class="m-society-article__figure">
<div class="m-society-article__figure-wrap">
<img class="m-society-article__figure-img" src="../../img/highlighted-article.png">
</div>
</figure>
<div class="m-society-article__inner">
<div class="m-society-article__wrap">
<header class="m-society-article__header">
<h1 class="m-society-article__title">
<a href="#link" class="m-society-article__title-link">Un guérisseur romand révèle ses secrets</a>
</h1>
<div class="m-society-article__meta">
<a class="m-society-article__category" href="#category">Reportages</a>
<p class="m-society-article__date-author">
<span class="m-society-article__date">2 mars 2018</span>
<span class="m-society-article__author">Par <a class="m-society-article__author-link" href="#author">Patrick Baumann</a></span>
</p>
</div>
</header>
<p class="m-society-article__content">Iquis dolupta imped quam es del-laut oquis dolupta imped quam es del-laut offi cius aut autatem inctorat eium quiam qui berorat.ra conem rat alit aut quam atur, offi cipisti aut ad modis quam inci susciis iur mo quiae sitatur,
eos sin num ut dolest, sim harum qui oditate as nis natqua-tur, se restini hicae. ad modis quam inci susciis iur mo quiae sitatur, eos sin num ut dolest...</p>
<footer class="m-society-article__footer"><a href="#button" class="a-button a-button--full">
<span>Découvrir</span>
</a>
</footer>
</div>
</div>
</article>
<div class="a-ad-zone a-ad-zone--content o-society-section__ad">
<div class="a-ad-zone__inner">
<div class="a-ad-zone__content"></div>
<div class="a-ad-zone__caption">Publicité</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="o-society-section {{ modifiers_classes }}" data-society-section>
<div class="o-society-section__wrapper">
<div class="o-society-section__container">
<div class="o-society-section__inner">
{{render society_article }}
{{#if ad }}
{{> '@a-ad-zone' caption="true" modifiers="content" extra_classes="o-society-section__ad" }}
{{/if}}
</div>
</div>
</div>
</section>
.o-society-section {
position: relative;
background-color: $color-black-light;
padding-bottom: 30px;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
@include media($sm-breakpoint) {
flex-wrap: nowrap;
padding: 3em 0;
}
@include media($hp-breakpoint) {
padding: 5em 0;
}
@include media($md-breakpoint) {
border-right-color: $color-black;
border-left-color: $color-black;
border-right-width: 16px;
border-left-width: 16px;
}
&__wrapper {
@extend .grid-wrapper--wide;
}
&__container {
@extend .grid-container;
position: relative;
padding-left: 0;
padding-right: 0;
}
&__inner {
@extend .row;
margin: 0;
@include media($hp-breakpoint) {
flex-wrap: nowrap;
}
}
.m-society-article {
@extend .col-md-12;
}
&__text-wrap {
@include media($sm-breakpoint) {
margin-left: ((100% / $grid-columns) * -1);
}
@include media($md-breakpoint) {
margin-left: $gutter-compensation-sm;
}
}
&__ad {
@extend .col-xs-12;
padding: 0;
margin-top: 3em;
margin-bottom: 0;
@media (max-width: ($hp-breakpoint - 1) ) {
.a-ad-zone__content {
height: 250px;
}
.a-ad-zone__caption {
display: none;
}
}
@include media($hp-breakpoint) {
@include flex-basis(100% / $grid-columns * 4);
margin-top: 0;
.a-ad-zone__inner {
margin: 0 16px 0 auto;
}
}
}
}
.o-society-section--ads {
.m-society-article {
z-index: 5;
&__inner {
@include fluid-props( right, $hp-breakpoint, $fluid-max, 0px, -100px);
}
@include media($hp-breakpoint) {
@include flex-basis(100% / $grid-columns * 8);
&__figure {
width: (6 / 8) * 100%;
flex-basis: (6 / 8) * 100%;
}
&__inner {
position: absolute;
width: (4 / 8) * 100%;
flex-basis: (4 / 8) * 100%;
}
}
@include media($lg-breakpoint) {
&__figure {
width: (6.5 / 8) * 100%;
flex-basis: (6.5 / 8) * 100%;
}
}
}
}
{
"society_article": "@m-society-article--narrow",
"ad": true,
"modifiers": [
"ads"
]
}
There are no notes for this item.