<section class="o-article-list o-article-list--red-title">
    <h2 class="o-article-list__title">Nouvelles séries</h2>
    <div class="o-article-list__wrap">
        <div class="o-article-list__cont">
            <div class="o-article-list__inner">

                <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                    <a href="#" class="m-preview-article__link"></a>
                    <div class="m-preview-article__wrapper">
                        <div class="m-preview-article__image-wrapper">
                            <img src="../../img/banner4.png" class="m-preview-article__image">

                            <div class="m-preview-article__media-cta">
                                <svg class="a-icon a-icon--negative" role="img" title="L&#x27;interview exclusif d&#x27;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&#x27;interview exclusif d&#x27;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…</p>
                            </a>
                            <a href="#" class="m-preview-article__category-link">Vidéos</a>
                        </div>
                    </div>

                    <hr class="m-preview-article__meta-divider">
                    <div class="m-preview-article__meta">
                        <p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
                        <a href="#" class="m-preview-article__category-link">Vidéos</a>
                    </div>
                </article>

                <article class="m-preview-article m-preview-article--media o-article-list__item col-md-6" data-preview-article>
                    <a href="#" class="m-preview-article__link"></a>
                    <div class="m-preview-article__wrapper">
                        <div class="m-preview-article__image-wrapper">
                            <img src="../../img/article-2.jpg" class="m-preview-article__image">

                            <div class="m-preview-article__media-cta">
                                <svg class="a-icon a-icon--negative" role="img" title="L&#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…</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/banner4.png",
        "title": "L'interview exclusif d'Adarsh Alem",
        "excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
        "date": "2 mars 2018",
        "author": "Patrick Baumann",
        "articlelink": "#",
        "categorylink": "#",
        "authorlink": "#",
        "category": "Vidéos",
        "videolength": "2:05",
        "modifiers": [
          "media"
        ]
      }
    },
    {
      "columns": 6,
      "data": {
        "image": "/img/article-2.jpg",
        "title": "L'interview exclusif du nouveau lauréat 2018 du guide Michelin",
        "category": "Reportages",
        "tags": [
          "Hebdomadaire"
        ],
        "modifiers": [
          "media"
        ],
        "gallery": true,
        "weekly": true,
        "excerpt": "A Pully, à Genève, à Berne, des expositions sont organisées en l'honneur du peintre, mort il y a cent ans…",
        "date": "2 mars 2018",
        "author": "Patrick Baumann",
        "articlelink": "#",
        "categorylink": "#",
        "authorlink": "#"
      }
    }
  ],
  "title": "Nouvelles séries",
  "modifiers": [
    "red-title"
  ]
}

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