<article class="o-banner o-banner--media" data-banner>
<a href="#" class="o-banner__link"></a>
<img src="../../img/banner4.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">L’interview exclusif d’Adarsh Alem</h1>
</div>
</div>
<div class="row o-banner__meta">
<div class="col-xs-8">
<a href="#" class="o-banner__category">Reportages</a>
<span class="o-banner__video-length u-t-size--15">
<svg class="a-icon a-icon--primary" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#video" />
</svg>
Vidéo 3:25
</span>
</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>
<a href="#" class="o-banner__cta">
<div class="o-banner__cta-label"><span>Regarder la vidéo</span></div>
<div class="o-banner__cta-icon">
<svg class="a-icon a-icon--negative" role="img" title="Regarder la vidéo">
<use xlink:href="#photo" />
</svg>
</div>
</a>
</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>
.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;
}
}
}
}
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 );
}
}
{
"image": "/img/banner4.png",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"author": "Lise Bailat",
"photocredit": "Marc Wallberg",
"articlelink": "#",
"cta": {
"label": "Regarder la vidéo",
"icon": "photo"
},
"videolength": "3:25",
"modifiers": [
"media"
]
}