Styleguide version 1.0.4

Landing: Ads 

<div class="page page--landing">
    <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 is-current">
                        <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">
                        <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 " data-banner>
            <a href="" class="o-banner__link"></a>
            <img src="../../img/banner1.png" class="o-banner__image">
            <div class="o-banner__content">

                <div class="o-banner__photo-credit">© Marc 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">Comment protéger le bonheur des enfants</h1>
                            </div>
                        </div>
                        <div class="row o-banner__meta">
                            <div class="col-xs-8">
                                <a href="#" class="o-banner__category">Reportages</a>

                            </div>

                            <div class="col-xs">
                                <p class="o-banner__author u-t-size--15">Par <a href="" class="o-banner__author-link">Lise Bailat</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </article>

        <div class="page__inner">
            <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&#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="#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&#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 expositions sont organisées en l&#x27;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&#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 class="a-ad-zone a-ad-zone--content o-article-list__item o-article-list__item--ad col-sm-12 col-md-4">
                                <div class="a-ad-zone__inner">
                                    <div class="a-ad-zone__content"></div>
                                    <div class="a-ad-zone__caption">Publicité</div>
                                </div>
                            </div>
                            <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&#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-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&#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-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&#x27;honneur du peintre, mort il y a cent ans expositions sont organisées en l&#x27;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-newsletter ">
                <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>

            <section class="o-discover-section">
                <a href="#" class="o-discover-section__link-wrapper">
		<img class="o-discover-section__background" src="../../img/discover-section-bg.jpg" alt="Background image">
		<div class="o-discover-section__content-wrapper">
			<h2 class="o-discover-section__category">
				<span style="font-size: 1,em">Photos</span>
			</h2>
			<h3 class="o-discover-section__title ">Redécouvrez votre 
 Suisse en images</h3>
			<button type="" class="a-button " >
				<span>Voir Les Galeries</span>
			</button>
		</div>
	</a>
            </section>

        </div>

        <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>
 
<div class="page page--landing">
	<div class="page__content">
		{{> '@o-header' header }}

		{{> '@o-banner' banner }}

		<div class="page__inner">
			{{> '@o-article-list' articlelist }}

			{{ render '@o-newsletter' }}

			{{ render '@o-discover-section' }}
		</div>

		{{ render '@o-footer' }}
	</div>
</div>
  • Content: 
    .page--landing {
	@extend %page-wrapping;
	@extend %page-wrapping-vertical;

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

	.o-article-list {
		padding-bottom: 0;
	}

	.a-ad-zone__inner {
		@include media($sm-breakpoint) {
			margin-right: initial; // align the add on right
		}
	}
}
  • URL: /components/raw/landing/_landing.scss
  • Filesystem Path: src/components/templates/landing/_landing.scss
  • Size: 281 Bytes 
{
  "header": {
    "search": true,
    "nav": {
      "links": [
        {
          "name": "Accueil",
          "current": true,
          "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",
          "url": "#",
          "icon": {
            "name": "photo",
            "title": "Photos"
          }
        }
      ]
    }
  },
  "banner": {
    "image": "/img/banner1.png",
    "title": "Comment protéger le bonheur des enfants",
    "category": "Reportages",
    "author": "Lise Bailat",
    "photocredit": "Marc Wallberg"
  },
  "articlelist": {
    "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,
        "ad": true
      },
      {
        "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": "#"
        }
      }
    ]
  },
  "topad": true
}

In order to display correctly the top ad in the page, it is important to add the ads class to the body of the page. This ensures the correct rendering of the page’s layout with the top ad.