<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>
<article class="o-banner {{modifiers_classes}}" data-banner>
	<a href="{{articlelink}}" class="o-banner__link"></a>
	<img src="{{path image}}" class="o-banner__image">
	<div class="o-banner__content">

		{{!-- START PHOTOCREDIT: add only if photo credit is defined --}} {{#if photocredit}}
		<div class="o-banner__photo-credit">© {{photocredit}}</div>
		{{!-- END PHOTOCREDIT --}} {{/if}}

		<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">{{title}}</h1>
					</div>
				</div>
				<div class="row o-banner__meta">
					<div class="col-xs-8">
						<a href="#" class="o-banner__category">{{category}}</a>

						{{!-- START VIDEO: add only if it's a video header --}} {{#if videolength}}
						<span class="o-banner__video-length u-t-size--15">
							{{> @a-icon name="video" title=title modifier="primary" }}Vidéo {{videolength}}
						</span>
						{{!-- END VIDEO --}} {{/if}}

						{{!-- START GALLERY: add only if it's a gallery header --}} {{#if numphotos}}
						<span class="u-t-size--15 o-banner__photos">
							{{> @a-icon name="photo" title=title modifier="primary" }}{{numphotos}} Photos
						</span>
						{{!-- END GALLERY --}} {{/if}}

					</div>

					{{#if author}}
					<div class="col-xs">
						<p class="o-banner__author u-t-size--15">Par <a href="{{ authorlink }}" class="o-banner__author-link">{{author}}</a></p>
					</div>
					{{/if}}
				</div>
			</div>
		</div>
	</div>

	{{!-- START CTA: add only if it's a video header --}} {{#if cta}}
	<a href="#" class="o-banner__cta">
		{{#if cta.label}}<div class="o-banner__cta-label"><span>{{ cta.label }}</span></div>{{/if}}
		<div class="o-banner__cta-icon">
			{{> @a-icon name=cta.icon title=cta.label modifier="negative" }}
		</div>
	</a>
	{{!-- START CTA --}} {{/if}}

</article>
  • Content:
    .o-banner {
    	$self: &;
    	max-width: 100%;
    	position: relative;
    	color: $color-text-negative;
    	overflow: hidden;
    	z-index: 0;
    
    	a {
    		color: $color-text-negative;
    
    		&:not(.u-t-category-link) {
    			font-weight: $font-weight-normal;
    		}
    	}
    
    	&__link {
    		position: absolute;
    		top: 0;
    		left: 0;
    		display: block;
    		width: 100%;
    		height: 100%;
    		z-index: 1;
    	}
    
    	&__wrapper {
    		@extend .grid-wrapper;
    	}
    
    	&__container {
    		@extend .grid-container;
    
    		@include media($sm-breakpoint) {
    			padding-left: 16px;
    			padding-right: 16px;
    		}
    
    		@include media($md-breakpoint) {
    			padding-left: 0;
    			padding-right: 0;
    		}
    	}
    
    	&__title-row {
    		@extend .row;
    	}
    
    	&__photo-credit {
    		@include fluid-props(font-size, $fluid-min, $fluid-max, 6px, 13px);
    		@include fluid-props(bottom, $fluid-min, $fluid-max, 8px, 34px);
    		@include fluid-props(right, $fluid-min, $fluid-max, 12px, 40px);
    
    		position: absolute;
    		transform: rotate(90deg);
    		transform-origin: right;
    
    		font-family: $font-highlight;
    		text-transform: uppercase;
    		letter-spacing: 1px;
    	}
    
    	&__image {
    		position: absolute;
    		top: 0;
    		left: 0;
    		display: block;
    		z-index: -2;
    		@include object-fit(cover, center);
    		@include size(100%, 100%);
    		transform: scale(1);
    		transition: transform $transition-slow ease;
    	}
    
    	&__content {
    		@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 10px, 40px);
    		@include fluid-props(padding-top, $fluid-min, $fluid-max, 200px, 550px);
    		position: relative;
    
    		&::after {
    			content: "";
    			position: absolute;
    			bottom: 0;
    			left: 0;
    			opacity: .5;
    			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    			z-index: -2;
    			@include size(100%, 50%);
    			transition: opacity $transition-slow ease;
    		}
    
    		@include media($sm-breakpoint) {
    			padding-top: 0;
    		}
    	}
    
    	&__title-wrap {
    		@extend .col-xs-11;
    		@extend .col-sm-8;
    
    		@include media($sm-breakpoint) {
    			height: 41.5vw;
    			max-height: 90vh;
    			display: flex;
    			align-items: flex-end;
    		}
    	}
    
    	&__meta {
    		padding-top: 25px;
    		font-family: $font-highlight;
    	}
    
    	&__category {
    		@extend .u-t-category-link;
    		z-index: 5;
    	}
    
    	&__author {
    		text-align: right;
    		font-weight: $font-weight-bold;
    		display: inline-block;
    		width: 100%;
    		padding-right: 1.5em;
    
    		@include media(900px) {
    			padding-right: 0;
    		}
    	}
    
    	&__author-link {
    		@extend .u-t-author-link;
    		z-index: 5;
    	}
    
    	&__photos,
    	&__video-length {
    		@include fluid-props(padding-left, $fluid-min, $fluid-max, 20px, 30px);
    		text-decoration: none;
    		font-weight: $font-weight-bold;
    
    		svg {
    			vertical-align: bottom;
    			@include fluid-props(width, $fluid-min, $fluid-max, 13px, 20px);
    			@include fluid-props(height, $fluid-min, $fluid-max, 13px, 20px);
    			@include fluid-props(margin-right, $fluid-min, $fluid-max, 9px, 14px);
    		}
    	}
    
    	&--light {
    		color: $color-text-dark;
    
    		a {
    			color: $color-text-dark;
    		}
    
    		.o-banner__content::after {
    			background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    		}
    
    		.u-t-title-page {
    			color: $color-text;
    		}
    	}
    
    	&--media {
    
    		#{ $self }__content {
    			@include fluid-props(padding-right, $fluid-min, $fluid-max, 4px, 12px);
    
    			&::before {
    				content: "";
    				position: absolute;
    				bottom: 0;
    				right: 0;
    				background: $color-primary;
    				height: 85%;
    				@include fluid-props(width, $fluid-min, $fluid-max, 4px, 12px);
    
    				@include media($md-breakpoint) {
    					height: 70%;
    				}
    			}
    		}
    
    		#{ $self }__cta {
    			position: absolute;
    			background: $color-primary;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			top: 15%;
    			right: 0;
    			text-decoration: none;
    			text-align: center;
    			font-family: $font-highlight;
    			z-index: 2;
    			// @include fluid-props(width, $fluid-min, $fluid-max, 170px, 400px);
    			@include fluid-props(height, $fluid-min, $fluid-max, 33px, 90px);
    			transition: background-color $transition-fast ease-out;
    
    			@include media($md-breakpoint) {
    				top: 30%;
    			}
    		}
    
    		#{ $self }__cta-label {
    			@include fluid-props(font-size, $fluid-min, $fluid-max, 12px, 24px);
    			padding-left: 1.2em;
    			padding-right: 1.2em;
    
    			font-weight: $font-weight-semi;
    			vertical-align: middle;
    			flex-grow: 1;
    
    			span {
    				position: relative;
    
    				&::after {
    					content: ' ';
    					position: absolute;
    					bottom: -.2em;
    					left: 0;
    					width: 100%;
    					height: 2px;
    					transform: scaleX(0);
    					transform-origin: left center;
    					background-color: currentColor;
    					transition: transform .15s ease-out;
    				}
    			}
    
    			+ #{ $self }__cta-icon {
    				background-color: $color-primary-dark;
    			}
    		}
    
    		#{ $self }__cta-icon {
    			position: relative;
    			background-color: $color-primary;
    			transition: background-color $transition-fast ease-out;
    			@include fluid-props(width height, $fluid-min, $fluid-max, 33px, 90px);
    
    			svg {
    				@include fluid-props(width height, $fluid-min, $fluid-max, 25px, 55px);
    				@include centerer(true, true);
    			}
    		}
    	}
    }
    
    /**
     * Hover effect
     */
    .o-banner {
    	&.is-hover {
    		.o-banner__content::after {
     			opacity: .9;
    		}
    	}
    
    	&__cta {
    		@include hover-behaviour {
    			background-color: $color-primary-dark;
    
    			.o-banner__cta-label {
    				span::after {
    					transform: scaleX(1);
    				}
    
    				+ .o-banner__cta-icon {
    					background-color: $color-primary;
    				}
    			}
    
    			.o-banner__cta-icon {
    				background-color: $color-primary-dark;
    			}
    		}
    	}
    }
    
  • URL: /components/raw/o-banner/_o-banner.scss
  • Filesystem Path: src/components/organisms/o-banner/_o-banner.scss
  • Size: 5.4 KB
  • Content:
    import BaseView from 'base-view';
    
    const HOVER_STATE = 'is-hover';
    
    export default class Banner extends BaseView {
    
    	bind() {
    		this.on( 'mouseenter', this.onMouseEnter.bind(this) );
    		this.on( 'mouseleave', this.onMouseLeave.bind(this) );
    	}
    
    	onMouseEnter() {
    		this.addClass( HOVER_STATE );
    	}
    
    	onMouseLeave() {
    		this.removeClass( HOVER_STATE );
    	}
    }
    
  • URL: /components/raw/o-banner/o-banner.js
  • Filesystem Path: src/components/organisms/o-banner/o-banner.js
  • Size: 356 Bytes
{
  "image": "/img/banner1.png",
  "title": "Comment protéger le bonheur des enfants",
  "category": "Reportages",
  "author": "Lise Bailat",
  "photocredit": "Marc Wallberg",
  "articlelink": "#"
}

CHANGELOG


v0.8.0 - 01/05/2018

  • Set banner author & cta optional with more parameters #a70559b5
  • Refactor CTA to keep it DRY #26bd2b72

v0.7.0 - 27/04/2018

  • Add wrapper element to CTA text #bca55536
  • Remove not DRY image crredit & rename classname #f9fb8b15

v0.6.1 - 24/04/2018

  • Add data attribute for JS selector #96d57081
  • Fix styles