Styleguide version 1.0.4

Article list: Default 

<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>

                <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&#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-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-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>
  • Content: 
    .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;
		}
	}
}
  • URL: /components/raw/o-article-list/_o-article-list.scss
  • Filesystem Path: src/components/organisms/o-article-list/_o-article-list.scss
  • Size: 2.3 KB 
{
  "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": "#"
      }
    }
  ]
}

CHANGELOG

v1.0.0 - 12/06/2018

  • Allow allow ad zone to have full with on tablet #242b312a

v0.7.0 - 27/04/2018

  • Adapt article-list to accept an Ad zone #7e7d8c0f