Heroflow
Basis
NS Extra: check-uit alert service
Beschikbaar met of zonder abonnement
vanaf van 40 voor 35 per maand
.heroflow
New and updated 2018 version of the classic hero. Replaces the old HeroVisual component, nested inside a .hero component.
Markup
<div class="container">
<div class="hero hero--homepage hero--noOverlap">
<div class="heroflow" data-controller="generic/ui/ClickableTile">
<div class="container heroflow__container">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 ml-7-12 l-6-12">
<div class="heroflow__content">
<h3 class="heroflow__heading">
NS Extra: check-uit alert service
</h3>
<p class="heroflow__subheading headingS">
Beschikbaar met of zonder abonnement
</p>
<div class="pricedetails heroflow__pricedetails">
<p>
<span class="pricedetails__before">vanaf</span>
<span class="pricedetails__from"><span class="alt">van </span>40</span>
<span class="pricedetails__price"><span class="alt">voor </span>35</span>
<span class="pricedetails__after">per maand</span>
</p>
</div>
<a href="thema.shtml" class="button button--nsYellow heroflow__button" data-eventdata="{
"data" : {
"link_location" : "body",
"link_type" : "internal",
"link_name" : "NS Flex",
"link_value" : "/klantenservice/ov-chipkaart",
"link_data" : {
"path" : "/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij",
"targetdocumentname" : "index",
"targetdocumentpath" : "/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index"
}
},
"event" : "link_click"}">
Direct bestellen</a>
</div>
</div>
</div>
</div>
<picture class="heroflow__picture">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-1400x480.jpg" media="(min-width: <%= breakpoints.large %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-912x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-640x300.jpg" media="(min-width: <%= breakpoints.small %>px)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
</picture>
<!-- Toggle heroflow__gradient based on light/dark gradient -->
<div class="heroflow__gradient"></div>
<div class="heroflow__overlay heroflow__overlay--solidBlue">
<svg class="heroflow__overlay-svg" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 423">
<defs>
<style>
.cls-1-1 {
fill: none;
}
.cls-1-2 {
clip-path: url(#clip-path-1);
}
.cls-1-3 {
fill: url(#linear-gradient-1);
}
</style>
<clipPath id="clip-path-1" transform="translate(-0.331)">
<path class="cls-1-1" d="M0,423.5H4.523c111.477,0,212.584-43.107,289.315-119.838L477.662,119.838C554.393,43.107,655.954,0,766.977,0H0Z"></path>
</clipPath>
<linearGradient id="linear-gradient-1" y1="211.5" x2="767" y2="211.5" gradientUnits="userSpaceOnUse">
<stop class="heroflow__overlay-start" offset="0" stop-color="currentColor"></stop>
<stop class="heroflow__overlay-stop" offset="1" stop-color="currentColor"></stop>
</linearGradient>
</defs>
<g class="cls-1-2">
<rect class="cls-1-3 heroflow__overlay-gradient" width="767" height="423"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>Examples of usage
White flow + white text + price
NS Extra: check-uit alert service
Beschikbaar met of zonder abonnement
vanaf van 40 voor 35 per maand
Uses white text on a white flow that has a gradient from 60 to 0. Useful for illustration backgrounds.
Markup
<div class="container">
<div class="hero hero--homepage hero--noOverlap">
<div class="heroflow" data-controller="generic/ui/ClickableTile">
<div class="container heroflow__container">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 ml-7-12 l-6-12">
<div class="heroflow__content">
<h3 class="heroflow__heading">
NS Extra: check-uit alert service
</h3>
<p class="heroflow__subheading headingS">
Beschikbaar met of zonder abonnement
</p>
<div class="pricedetails heroflow__pricedetails">
<p>
<span class="pricedetails__before">vanaf</span>
<span class="pricedetails__from"><span class="alt">van </span>40</span>
<span class="pricedetails__price"><span class="alt">voor </span>35</span>
<span class="pricedetails__after">per maand</span>
</p>
</div>
<a href="thema.shtml" class="button button--nsYellow heroflow__button" data-eventdata="{
"data" : {
"link_location" : "body",
"link_type" : "internal",
"link_name" : "NS Flex",
"link_value" : "/klantenservice/ov-chipkaart",
"link_data" : {
"path" : "/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij",
"targetdocumentname" : "index",
"targetdocumentpath" : "/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index"
}
},
"event" : "link_click"}">
Direct bestellen</a>
</div>
</div>
</div>
</div>
<picture class="heroflow__picture">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-extra-1400x480.jpg" media="(min-width: <%= breakpoints.large %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-extra-912x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-extra-640x300.jpg" media="(min-width: <%= breakpoints.small %>px)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
</picture>
<!-- Toggle heroflow__gradient based on light/dark gradient -->
<div class="heroflow__gradient"></div>
<div class="heroflow__overlay heroflow__overlay--white">
<svg class="heroflow__overlay-svg" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 423">
<defs>
<style>
.cls-2-1 {
fill: none;
}
.cls-2-2 {
clip-path: url(#clip-path-2);
}
.cls-2-3 {
fill: url(#linear-gradient-2);
}
</style>
<clipPath id="clip-path-2" transform="translate(-0.331)">
<path class="cls-2-1" d="M0,423.5H4.523c111.477,0,212.584-43.107,289.315-119.838L477.662,119.838C554.393,43.107,655.954,0,766.977,0H0Z"></path>
</clipPath>
<linearGradient id="linear-gradient-2" y1="211.5" x2="767" y2="211.5" gradientUnits="userSpaceOnUse">
<stop class="heroflow__overlay-start" offset="0" stop-color="currentColor"></stop>
<stop class="heroflow__overlay-stop" offset="1" stop-color="currentColor"></stop>
</linearGradient>
</defs>
<g class="cls-2-2">
<rect class="cls-2-3 heroflow__overlay-gradient" width="767" height="423"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>White flow + blue tekst
NS Extra: check-uit alert service
Beschikbaar met of zonder abonnement
vanaf van 40 voor 35 per maand
A solid white flow with a transparency from 100 to 30 with blue text on top of it. Without darkener over the picture.
Markup
<div class="container">
<div class="hero hero--homepage hero--noOverlap">
<div class="heroflow" data-controller="generic/ui/ClickableTile">
<div class="container heroflow__container">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 ml-7-12 l-6-12">
<div class="heroflow__content heroflow__content--blue">
<h3 class="heroflow__heading">
NS Extra: check-uit alert service
</h3>
<p class="heroflow__subheading headingS">
Beschikbaar met of zonder abonnement
</p>
<div class="pricedetails heroflow__pricedetails">
<p>
<span class="pricedetails__before">vanaf</span>
<span class="pricedetails__from"><span class="alt">van </span>40</span>
<span class="pricedetails__price"><span class="alt">voor </span>35</span>
<span class="pricedetails__after">per maand</span>
</p>
</div>
<a href="thema.shtml" class="button button--nsYellow heroflow__button" data-eventdata="{
"data" : {
"link_location" : "body",
"link_type" : "internal",
"link_name" : "NS Flex",
"link_value" : "/klantenservice/ov-chipkaart",
"link_data" : {
"path" : "/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij",
"targetdocumentname" : "index",
"targetdocumentpath" : "/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index"
}
},
"event" : "link_click"}">
Direct bestellen</a>
</div>
</div>
</div>
</div>
<picture class="heroflow__picture">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-hipster-1400x480.jpg" media="(min-width: <%= breakpoints.large %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-hipster-912x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-hipster-640x300.jpg" media="(min-width: <%= breakpoints.small %>px)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
</picture>
<!-- Toggle heroflow__gradient based on light/dark gradient -->
<!-- <div class="heroflow__gradient"></div> -->
<div class="heroflow__overlay heroflow__overlay--solidWhite">
<svg class="heroflow__overlay-svg" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 423">
<defs>
<style>
.cls-3-1 {
fill: none;
}
.cls-3-2 {
clip-path: url(#clip-path-3);
}
.cls-3-3 {
fill: url(#linear-gradient-3);
}
</style>
<clipPath id="clip-path-3" transform="translate(-0.331)">
<path class="cls-3-1" d="M0,423.5H4.523c111.477,0,212.584-43.107,289.315-119.838L477.662,119.838C554.393,43.107,655.954,0,766.977,0H0Z"></path>
</clipPath>
<linearGradient id="linear-gradient-3" y1="211.5" x2="767" y2="211.5" gradientUnits="userSpaceOnUse">
<stop class="heroflow__overlay-start" offset="0" stop-color="currentColor"></stop>
<stop class="heroflow__overlay-stop" offset="1" stop-color="currentColor"></stop>
</linearGradient>
</defs>
<g class="cls-3-2">
<rect class="cls-3-3 heroflow__overlay-gradient" width="767" height="423"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>Heroflow without call to action
NS Extra: check-uit alert service
Beschikbaar met of zonder abonnement
vanaf van 40 voor 35 per maand
The call to action is not always required
Markup
<div class="container">
<div class="hero hero--homepage hero--noOverlap">
<div class="heroflow" data-controller="generic/ui/ClickableTile">
<div class="container heroflow__container">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 ml-7-12 l-6-12">
<div class="heroflow__content">
<h3 class="heroflow__heading">
NS Extra: check-uit alert service
</h3>
<p class="heroflow__subheading headingS">
Beschikbaar met of zonder abonnement
</p>
<div class="pricedetails heroflow__pricedetails">
<p>
<span class="pricedetails__before">vanaf</span>
<span class="pricedetails__from"><span class="alt">van </span>40</span>
<span class="pricedetails__price"><span class="alt">voor </span>35</span>
<span class="pricedetails__after">per maand</span>
</p>
</div>
</div>
</div>
</div>
</div>
<picture class="heroflow__picture">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-1400x480.jpg" media="(min-width: <%= breakpoints.large %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-912x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
<source srcset="<%= path.styleguideStatic %>/images/homepagina/hero-happy-640x300.jpg" media="(min-width: <%= breakpoints.small %>px)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
</picture>
<!-- Toggle heroflow__gradient based on light/dark gradient -->
<div class="heroflow__gradient"></div>
<div class="heroflow__overlay heroflow__overlay--solidBlue">
<svg class="heroflow__overlay-svg" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 423">
<defs>
<style>
.cls-1-1 {
fill: none;
}
.cls-1-2 {
clip-path: url(#clip-path-1);
}
.cls-1-3 {
fill: url(#linear-gradient-1);
}
</style>
<clipPath id="clip-path-1" transform="translate(-0.331)">
<path class="cls-1-1" d="M0,423.5H4.523c111.477,0,212.584-43.107,289.315-119.838L477.662,119.838C554.393,43.107,655.954,0,766.977,0H0Z"></path>
</clipPath>
<linearGradient id="linear-gradient-1" y1="211.5" x2="767" y2="211.5" gradientUnits="userSpaceOnUse">
<stop class="heroflow__overlay-start" offset="0" stop-color="currentColor"></stop>
<stop class="heroflow__overlay-stop" offset="1" stop-color="currentColor"></stop>
</linearGradient>
</defs>
<g class="cls-1-2">
<rect class="cls-1-3 heroflow__overlay-gradient" width="767" height="423"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>Heroflow campagne
Heroflow for campagne pages
Markup
<div class="container container--extended">
<div class="hero hero--major h-mb-0">
<div class="heroflow" data-controller="generic/ui/ClickableTile">
<div class="container container--narrow heroflow__container heroflow__container--center">
<div class="grid">
<div class="grid__unit s-4-4 m-10-12 ml-7-12 l-6-12">
<div class="heroflow__content heroflow__content--bigPadding">
<ul class="breadcrumb breadcrumb--white">
<li class="breadcrumb__item"><a class="breadcrumb__link" href="#">Reisinformatie</a></li>
<li class="breadcrumb__item"><a class="breadcrumb__link" href="#">NS voor onderweg</a></li>
</ul>
<h1 class="heroflow__heading">
Kun jij ook niet wachten?
</h1>
<p class="heroflow__subheading headingS">
Om er weer lekker met de trein op uit te gaan?
</p>
<a href="thema.shtml" class="button button--nsYellow heroflow__button" data-eventdata="{
"data" : {
"link_location" : "body",
"link_type" : "internal",
"link_name" : "NS Flex",
"link_value" : "/klantenservice/ov-chipkaart",
"link_data" : {
"path" : "/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij",
"targetdocumentname" : "index",
"targetdocumentpath" : "/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index"
}
},
"event" : "link_click"}">
Call to action</a>
</div>
</div>
</div>
</div>
<picture class="heroflow__picture">
<!-- <source srcset="<%= path.styleguideStatic %>/images/generiek/hero_perron_mensen_1920x480.jpg" media="(min-width: <%= breakpoints.xxxlarge %>px)"> -->
<source srcset="<%= path.styleguideStatic %>/images/generiek/hero_perron_mensen_1400x480.jpg" media="(min-width: <%= breakpoints.large %>px)">
<source srcset="<%= path.styleguideStatic %>/images/generiek/hero_perron_mensen_912x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
<source srcset="<%= path.styleguideStatic %>/images/generiek/hero_perron_mensen_640x300.jpg" media="(min-width: <%= breakpoints.small %>px)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain" loading="eager"/>
</picture>
<!-- Toggle heroflow__gradient based on light/dark gradient -->
<div class="heroflow__gradient"></div>
<div class="heroflow__overlay heroflow__overlay--white">
<svg class="heroflow__overlay-svg" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 767 423">
<defs>
<style>
.cls-2-1 {
fill: none;
}
.cls-2-2 {
clip-path: url(#clip-path-2);
}
.cls-2-3 {
fill: url(#linear-gradient-2);
}
</style>
<clipPath id="clip-path-2" transform="translate(-0.331)">
<path class="cls-2-1" d="M0,423.5H4.523c111.477,0,212.584-43.107,289.315-119.838L477.662,119.838C554.393,43.107,655.954,0,766.977,0H0Z"></path>
</clipPath>
<linearGradient id="linear-gradient-2" y1="211.5" x2="767" y2="211.5" gradientUnits="userSpaceOnUse">
<stop class="heroflow__overlay-start" offset="0" stop-color="currentColor"></stop>
<stop class="heroflow__overlay-stop" offset="1" stop-color="currentColor"></stop>
</linearGradient>
</defs>
<g class="cls-2-2">
<rect class="cls-2-3 heroflow__overlay-gradient" width="767" height="423"></rect>
</g>
</svg>
</div>
</div>
</div>
</div>