Styleguide version 1.0.4

Media listing: Photo 

<div class="page page--listing">
    <div class="page__content">
        <header class="o-header" data-header>
            <div class="o-header__side-element">
                <img src="../../img/logo.svg" alt="L'illustré logo" class="o-header__logo">
            </div>
            <nav class="m-nav" data-nav>
                <ul class="m-nav__menu">
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="/">
					<svg class="a-icon" role="img" title="Accueil">
						<use xlink:href="#home" />
					</svg>
					<p class="m-nav__item-title">Accueil</p>
				</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
					<svg class="a-icon" role="img" title="Reportages">
						<use xlink:href="#article" />
					</svg>
					<p class="m-nav__item-title">Reportages</p>
				</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
					<svg class="a-icon" role="img" title="Portraits">
						<use xlink:href="#portrait" />
					</svg>
					<p class="m-nav__item-title">Portraits</p>
				</a>
                    </li>
                    <li class="m-nav__item">
                        <a class="m-nav__link" href="#">
					<svg class="a-icon" role="img" title="Vidéos">
						<use xlink:href="#video" />
					</svg>
					<p class="m-nav__item-title">Vidéos</p>
				</a>
                    </li>
                    <li class="m-nav__item is-current">
                        <a class="m-nav__link" href="#">
					<svg class="a-icon" role="img" title="Photos">
						<use xlink:href="#photo" />
					</svg>
					<p class="m-nav__item-title">Photos</p>
				</a>
                    </li>
                </ul>
            </nav>
            <div class="o-header__side-element o-header__side-element--right">
                <div class="o-header__side-element_content">
                    <a class="o-header__subscribe" href="#">S'abonner</a>
                    <a href="" class="o-header__search" rel="search">
				<svg class="a-icon" role="img" title="Recherche">
					<use xlink:href="#search" />
				</svg>
				<svg class="a-icon" role="img" title="Close">
					<use xlink:href="#close" />
				</svg>
			</a>
                </div>
            </div>

            <div class="o-search-bar " data-search>
                <div class="o-search-bar__wrapper">
                    <div class="grid-wrapper">
                        <div class="grid-container">
                            <div class="row">
                                <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                                    <form action="#" class="o-search-bar__form">
                                        <p class="o-search-bar__form-label">Rechercher sur L’illustré</p>
                                        <div class="o-search-bar__input-wrapper">
                                            <input class="o-search-bar__input" id="input--search" type="text" required>
                                            <label for="input--search" class="o-search-bar__input-label">Entrer un mot clé ou un auteur</label>
                                            <label for="input--search" class="o-search-bar__input-label o-search-bar__input-label--mobile">Entrer un mot clé</label>
                                            <svg class="a-icon a-icon--primary" role="img" title="search">
									<use xlink:href="#search" />
								</svg>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="o-search-bar__backdrop"></div>
            </div>

        </header>

        <article class="o-banner o-banner--media" data-banner>
            <a href="" class="o-banner__link"></a>
            <img src="../../img/banner3.png" class="o-banner__image">
            <div class="o-banner__content">

                <div class="o-banner__photo-credit">© Mark Wallberg</div>

                <div class="o-banner__wrapper">
                    <div class="o-banner__container">
                        <div class="o-banner__title-row">
                            <div class="o-banner__title-wrap">
                                <h1 class="u-t-title-page">La Suisse comme vous ne l’avez encore jamais vue</h1>
                            </div>
                        </div>
                        <div class="row o-banner__meta">
                            <div class="col-xs-8">
                                <a href="#" class="o-banner__category">photos</a>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <a href="#" class="o-banner__cta">

                <div class="o-banner__cta-icon">
                    <svg class="a-icon a-icon--negative" role="img" title="">
				<use xlink:href="#gallery" />
			</svg>
                </div>
            </a>

        </article>

        <section class="o-article-list o-article-list--red-title">
            <h2 class="o-article-list__title">Dernières photos</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/article-1.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-icon a-icon--negative" role="img" title="Lorem ipsum dolor sit ame dominoti sit amet">
														<use xlink:href="#video" />
													</svg>
                                    </div>

                                    <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">15</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">Lorem ipsum dolor sit ame dominoti sit amet</h1>
                                        <p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l&#x27;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&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin">
														<use xlink:href="#video" />
													</svg>
                                    </div>

                                    <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">11</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&#x27;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&#x27;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-highlight-article" data-highlight-article>
                            <div class="m-highlight-article__inner">
                                <a href="#" class="m-highlight-article__link"></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">21</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 meilleurs restaurants 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&#x27;honneur du peintre, mort il y a cent ans. A Pully, à Genève, à Berne, des expositions sont organisées en l&#x27;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-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-3.jpg" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-icon a-icon--negative" role="img" title="L&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin">
														<use xlink:href="#video" />
													</svg>
                                    </div>

                                    <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">L&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
                                        <p class="m-preview-article__excerpt"></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/preview-article1.png" class="m-preview-article__image">

                                    <div class="m-preview-article__media-cta">
                                        <svg class="a-icon a-icon--negative" role="img" title="L&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin">
														<use xlink:href="#video" />
													</svg>
                                    </div>

                                    <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">3</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&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin</h1>
                                        <p class="m-preview-article__excerpt"></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>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <section class="o-article-list o-article-list--red-title-underline o-article-list--background">
        <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/article-1.jpg" class="m-preview-article__image">

                                <div class="m-preview-article__media-cta">
                                    <svg class="a-icon a-icon--negative" role="img" title="Lorem Ipsum dolor sit ame dominoti sit amet">
													<use xlink:href="#video" />
												</svg>
                                </div>

                                <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">17</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">Lorem Ipsum dolor sit ame dominoti sit amet</h1>
                                    <p class="m-preview-article__excerpt">A Pully, à Genève, à Berne, des expositions sont organisées en l&#x27;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&#x27;interview exclusif du nouveau lauréat 2018 du guide Michelin">
													<use xlink:href="#video" />
												</svg>
                                </div>

                                <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">97</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&#x27;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&#x27;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>
                </div>
            </div>
        </div>
    </section>
    <section class="o-newsletter o-newsletter--negative">
        <h2 class="o-newsletter__title">
            <span class="o-newsletter__title--short">Newsletter L&#x27;Illustré</span>
            <span class="o-newsletter__title--full">Recevoir la newsletter L&#x27;Illustré</span>
        </h2>
        <div class="o-newsletter__form-wrap">
            <form action="#" class="o-newsletter__form">
                <div class="o-newsletter__form-inner">
                    <div class="o-newsletter__input-wrap">
                        <div class="o-newsletter__input">
                            <svg class="a-icon" role="img" title="e-mail">
							<use xlink:href="#email" />
						</svg>
                            <input class="o-newsletter__input-field" id="newsletter_input_email" name="newsletter-email" type="text" required>
                            <label for="newsletter_input_email" class="o-newsletter__input-label">Votre e-mail</label>
                        </div>
                    </div>
                    <div class="o-newsletter__btn">
                        <button type="submit" class="a-button ">
						<span>S&#x27;inscrire</span>
					</button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <footer class="o-footer">
        <div class="o-footer__top">
            <div class="o-footer__wrapper">
                <div class="o-footer__container">
                    <div class="o-footer__top_wrap">
                        <img src="../../img/logo.svg" alt="L'illustré logo" class="o-footer__logo">
                        <nav class="o-footer__menu">
                            <a href="#" class="o-footer__menu_item"><span>Abonnements</span></a>
                            <a href="#" class="o-footer__menu_item"><span>Publicité</span></a>
                            <a href="#" class="o-footer__menu_item"><span>Services</span></a>
                            <a href="#" class="o-footer__menu_item"><span>À propos</span></a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="o-footer__bottom">
            <div class="o-footer__wrapper">
                <div class="o-footer__container">
                    <div class="o-footer__bottom_wrap">
                        <nav class="o-footer__social">
                            <div class="o-footer__social_wrap">
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="Facebook">
											<use xlink:href="#facebook" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="Twitter">
											<use xlink:href="#twitter" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="instagram">
											<use xlink:href="#instagram" />
										</svg>
									</a>
                                <a href="#" class="o-footer__social_item">
										<svg class="a-icon" role="img" title="YouTube">
											<use xlink:href="#youtube" />
										</svg>
									</a>
                            </div>
                        </nav>
                        <nav class="o-footer__legal">
                            <a href="#" class="o-footer__legal_item">Mentions légales</a>
                            <a href="#" class="o-footer__legal_item">Impressum</a>
                        </nav>
                        <div class="o-footer__copyright">© 2018 Ringier Axel Springer Suisse SA</div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</div>
 
<div class="page page--listing">
	<div class="page__content">
		{{ render '@o-header' header }}
		{{ render '@o-banner' banner }}
		{{> '@o-article-list' latests }}
	</div>

	{{> '@o-article-list' serie }}
	{{ render '@o-newsletter--light-background' }}
	{{ render '@o-footer' }}
</div>
  • Content: 
    .page--listing {
	@extend %page-wrapping-vertical;
	background-color: $color-secondary;

	.o-header,
	.page__content {
		@extend %page-wrapping;
	}

	.o-footer {
		// @extend %page-wrapping; // NOTE copied instead of extend because the background-color could not be overrided

		padding-left: 8px;
		padding-right: 8px;
		background-color: $color-secondary;

		@include media($sm-breakpoint) {
			padding-left: 16px;
			padding-right: 16px;

			margin-bottom: 0;
		}
	}

	.page__content {

		.o-article-list {
			@include fluid-props(padding-top, $fluid-min, $fluid-max, 10px, 50px);
			@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 50px, 100px);
		}
	}
}
  • URL: /components/raw/listing/_listing.scss
  • Filesystem Path: src/components/templates/listing/_listing.scss
  • Size: 671 Bytes 
{
  "header": {
    "search": true,
    "nav": {
      "links": [
        {
          "name": "Accueil",
          "url": "/",
          "icon": {
            "name": "home",
            "title": "Accueil"
          }
        },
        {
          "name": "Reportages",
          "url": "#",
          "icon": {
            "name": "article",
            "title": "Reportages"
          }
        },
        {
          "name": "Portraits",
          "url": "#",
          "icon": {
            "name": "portrait",
            "title": "Portraits"
          }
        },
        {
          "name": "Vidéos",
          "url": "#",
          "icon": {
            "name": "video",
            "title": "Vidéos"
          }
        },
        {
          "name": "Photos",
          "current": true,
          "url": "#",
          "icon": {
            "name": "photo",
            "title": "Photos"
          }
        }
      ]
    }
  },
  "banner": {
    "image": "/img/banner3.png",
    "title": "La Suisse comme vous ne l’avez encore jamais vue",
    "category": "photos",
    "photocredit": "Mark Wallberg",
    "photocount": 15,
    "cta": {
      "icon": "gallery"
    },
    "modifiers": [
      "media"
    ]
  },
  "latests": {
    "title": "Dernières photos",
    "modifiers": [
      "red-title"
    ],
    "articles": [
      {
        "columns": 6,
        "data": {
          "image": "/img/article-1.jpg",
          "title": "Lorem ipsum dolor sit ame dominoti sit amet",
          "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",
          "gallery": true,
          "numphotos": 15,
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "videolength": "2:05",
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "columns": 6,
        "format": "m-preview-article",
        "data": {
          "image": "/img/article-2.jpg",
          "title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
          "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",
          "gallery": true,
          "numphotos": 11,
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#",
          "videolength": "2:05",
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "highlight": true,
        "data": {
          "image": "/img/article-highlight.jpg",
          "title": "Découvrez les meilleurs restaurants 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",
          "gallery": true,
          "numphotos": 21,
          "buttontext": "Découvrir",
          "video": true,
          "articlelink": "#",
          "categorylink": "#",
          "authorlink": "#"
        }
      },
      {
        "columns": 6,
        "data": {
          "image": "/img/article-3.jpg",
          "title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
          "category": "Photos",
          "author": "Patrick Baumann",
          "gallery": true,
          "numphotos": 33,
          "date": "2 mars 2018",
          "videolength": "2:05",
          "modifiers": [
            "media"
          ]
        }
      },
      {
        "columns": 6,
        "data": {
          "image": "/img/preview-article1.png",
          "title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
          "category": "Photos",
          "author": "Patrick Baumann",
          "gallery": true,
          "numphotos": 3,
          "date": "2 mars 2018",
          "videolength": "2:05",
          "modifiers": [
            "media"
          ]
        }
      }
    ]
  },
  "serie": {
    "title": "Nouvelles séries",
    "modifiers": [
      "red-title-underline",
      "background"
    ],
    "articles": [
      {
        "columns": 6,
        "data": {
          "image": "/img/article-1.jpg",
          "title": "Lorem Ipsum dolor sit ame dominoti sit amet",
          "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",
          "gallery": true,
          "numphotos": 17,
          "category": "Photos",
          "articlelink": "#",
          "authorlink": "#",
          "categorylink": "#",
          "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",
          "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",
          "gallery": true,
          "numphotos": 97,
          "articlelink": "#",
          "authorlink": "#",
          "categorylink": "#",
          "category": "Photos",
          "videolength": "2:05",
          "modifiers": [
            "media"
          ]
        }
      }
    ]
  }
}

There are no notes for this item.