<section class="o-article-list o-article-list--red-title">
<h2 class="o-article-list__title">Nouvelles séries</h2>
<div class="o-article-list__wrap">
<div class="o-article-list__cont">
<div class="o-article-list__inner">
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/banner4.png" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L'interview exclusif d'Adarsh Alem">
<use xlink:href="#video" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusif d'Adarsh Alem</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Vidéos</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Vidéos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-2.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L'interview exclusif du nouveau lauréat 2018 du guide Michelin">
<use xlink:href="#gallery" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L'interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
<p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</article>
</div>
</div>
</div>
</section>
<section class="o-article-list {{modifiers_classes}}">
{{#if title}}<h2 class="o-article-list__title">{{ title }}</h2>{{/if}}
<div class="o-article-list__wrap">
<div class="o-article-list__cont">
<div class="o-article-list__inner">
{{#each articles}}
{{#if highlight }}
{{> '@m-highlight-article' data }}
{{else}}
{{#if ad}}
{{> '@a-ad-zone' caption="true" modifiers="content" extra_classes=(concat "o-article-list__item o-article-list__item--ad col-sm-12 col-md-" columns) }}
{{else}}
{{> '@m-preview-article' data extra_classes=(concat "o-article-list__item col-md-" columns) }}
{{/if}}
{{/if}}
{{/each}}
</div>
</div>
</div>
</section>
.o-article-list {
@include fluid-props(padding-top, $fluid-min, $fluid-max, 16px, 30px);
@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 20px, 40px);
&__title {
letter-spacing: 1px;
text-align: center;
}
&__wrap {
@extend .grid-wrapper;
}
&__cont {
@extend .grid-container;
padding-left: 0;
padding-right: 0;
}
&__inner {
@extend .row;
}
&__item {
@extend .col-xs-12;
@extend .col-sm-6;
@include fluid-props(margin-top, $sm-breakpoint, $fluid-max, 42px, 64px, false);
&:first-child {
margin-top: 0;
}
@include media($sm-breakpoint) {
&:nth-child(2) {
margin-top: 0;
}
}
}
.m-highlight-article {
@extend .col-xs-12;
@include fluid-props(margin-top, $sm-breakpoint, $fluid-max, 42px, 64px, false);
@include media($sm-breakpoint) {
margin-bottom: 24px;
}
}
}
%separator {
content: "";
height: 1px;
background-color: $color-primary;
width: 50px;
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 6px;
margin-bottom: 22px;
@include media($sm-breakpoint) {
margin-top: 12px;
margin-bottom: 25px;
}
}
/**
* Background modifier
*/
.o-article-list--background {
background-color: $color-secondary;
padding-left: 8px;
padding-right: 8px;
@include media($sm-breakpoint) {
padding-left: 16px;
padding-right: 16px;
}
// &::after {
// @extend %separator;
// }
}
.o-article-list--red-title {
.o-article-list__title {
@extend .u-t-title-hlt-1;
margin-top: 0;
}
}
.o-article-list--red-title-underline {
.o-article-list__title {
@extend .u-t-title-hlt-1;
margin-top: 0;
&::after {
@extend %separator;
}
}
}
.o-article-list--black-title {
.o-article-list__title {
@extend .u-t-title-hlt-2;
margin-top: 0;
&::after {
@extend %separator;
}
}
}
.o-article-list--ad {
@extend %page-wrapping;
@include fluid-props(padding-top, $fluid-min, $fluid-max, 25px, 73px);
.a-ad-zone {
&__inner {
@include media($md-breakpoint) {
margin-right: 0;
}
}
}
}
.o-article-list--tree-cols {
@extend %page-wrapping;
.o-article-list__wrap {
@extend .grid-wrapper--wide;
}
.o-article-list__item:nth-child(3) {
@include media($md-breakpoint) {
margin-top: 0;
}
}
}
{
"articles": [
{
"columns": 6,
"data": {
"image": "/img/banner4.png",
"title": "L'interview exclusif d'Adarsh Alem",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"category": "Vidéos",
"videolength": "2:05",
"modifiers": [
"media"
]
}
},
{
"columns": 6,
"data": {
"image": "/img/article-2.jpg",
"title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
"category": "Reportages",
"tags": [
"Hebdomadaire"
],
"modifiers": [
"media"
],
"gallery": true,
"weekly": true,
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
}
],
"title": "Nouvelles séries",
"modifiers": [
"red-title"
]
}