<section class="o-article-list ">
<div class="o-article-list__wrap">
<div class="o-article-list__cont">
<div class="o-article-list__inner">
<article class="m-preview-article 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-1.jpg" class="m-preview-article__image">
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</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">Photos</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">Photos</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 expositions sont organisées en l'honneur du peintre…</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>
<article class="m-preview-article o-article-list__item col-md-8" 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-3.jpg" class="m-preview-article__image">
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</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">Photos</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">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media m-preview-article--excerpt-on-mobile o-article-list__item col-md-4" 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-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">10</text>
</g>
</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 expositions sont organisées en l'honneur du peintre…</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>
<article class="m-highlight-article" data-highlight-article>
<div class="m-highlight-article__inner">
<a href="#" class="m-highlight-article__link"></a>
<a class="m-highlight-article__all-link" href="#"><span>Toutes les galeries</span> <svg class="a-icon a-icon--primary" role="img" title="Découvrez les meilleures restaurant en photographies">
<use xlink:href="#arrow-left" />
</svg>
</a>
<div class="m-highlight-article__image-wrap">
<div class="m-highlight-article__image-inner">
<img src="../../img/article-highlight.jpg" class="m-highlight-article__image">
</div>
<div class="m-highlight-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">10</text>
</g>
</svg>
</div>
</div>
<div class="m-highlight-article__content-wrap">
<div class="m-highlight-article__title-wrap">
<a href="#" class="m-highlight-article__title-link">
<h1 class="m-highlight-article__title">Découvrez les meilleures restaurant en photographies</h1>
</a>
<hr class="m-highlight-article__separator">
<div class="m-highlight-article__meta">
<p class="m-highlight-article__date-author-wrap"><span class="m-highlight-article__date">2 mars 2018</span> <a class="m-highlight-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-highlight-article__category-link">Photos</a>
</div>
</div>
<a href="#" class="m-highlight-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…</a>
<div class="m-highlight-article__btn-wrap"><a href="#" class="a-button ">
<span>Découvrir</span>
</a>
</div>
</div>
<hr class="m-highlight-article__separator--mobile">
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-4" 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/preview-article1.png" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-gallery-number" width="55" height="55" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" data-gallery-number>
<g fill="#FFF" fill-rule="evenodd">
<path fill-rule="nonzero" d="M11.124 36v2H5V8h36v6.074h-2V10H7v26z"/>
<path class="frame" d="M14 47V17h36v30H14zm2-2h32V19H16v26z" fill-rule="nonzero"/>
<text class="text" x="22" y="37">33</text>
</g>
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">Les trois Romandes de Miss Suisse 2018</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">Photos</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">Photos</a>
</div>
</article>
<article class="m-preview-article m-preview-article--media o-article-list__item col-md-8" 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 expositions sont organisées en l'honneur du peintre…</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/article-1.jpg",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"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": "#"
}
},
{
"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 expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"columns": 8,
"data": {
"image": "/img/article-3.jpg",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"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": "#"
}
},
{
"columns": 4,
"data": {
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"gallery": true,
"numphotos": 10,
"modifiers": [
"media",
"excerpt-on-mobile"
],
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
},
{
"highlight": true,
"data": {
"image": "/img/article-highlight.jpg",
"title": "Découvrez les meilleures restaurant en photographies",
"category": "Photos",
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans 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",
"buttontext": "Découvrir",
"numphotos": 10,
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"alllink": "#"
}
},
{
"columns": 4,
"format": "@m-preview-article",
"data": {
"image": "/img/preview-article1.png",
"title": "Les trois Romandes de Miss Suisse 2018",
"category": "Photos",
"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": "#",
"modifiers": [
"media"
],
"gallery": true,
"numphotos": 33
}
},
{
"columns": 8,
"format": "@m-preview-article",
"data": {
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"videolength": "3:25",
"modifiers": [
"media"
],
"excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans expositions sont organisées en l'honneur du peintre…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#"
}
}
]
}