Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Heroflow

Basis

NS Extra: check-uit alert service

Beschikbaar met of zonder abonnement

vanaf van 40 voor 35 per maand

Direct bestellen
Description of image
.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="{
                          &quot;data&quot; : {
                                    &quot;link_location&quot; : &quot;body&quot;,
                                    &quot;link_type&quot; : &quot;internal&quot;,
                                    &quot;link_name&quot; : &quot;NS Flex&quot;,
                                    &quot;link_value&quot; : &quot;/klantenservice/ov-chipkaart&quot;,
                                    &quot;link_data&quot; : {
                                        &quot;path&quot; : &quot;/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij&quot;,
                                        &quot;targetdocumentname&quot; : &quot;index&quot;,
                                        &quot;targetdocumentpath&quot; : &quot;/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index&quot;
                                    }
                                },
                                &quot;event&quot; : &quot;link_click&quot;}">
                            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

Direct bestellen
Description of image

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="{
                          &quot;data&quot; : {
                                    &quot;link_location&quot; : &quot;body&quot;,
                                    &quot;link_type&quot; : &quot;internal&quot;,
                                    &quot;link_name&quot; : &quot;NS Flex&quot;,
                                    &quot;link_value&quot; : &quot;/klantenservice/ov-chipkaart&quot;,
                                    &quot;link_data&quot; : {
                                        &quot;path&quot; : &quot;/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij&quot;,
                                        &quot;targetdocumentname&quot; : &quot;index&quot;,
                                        &quot;targetdocumentpath&quot; : &quot;/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index&quot;
                                    }
                                },
                                &quot;event&quot; : &quot;link_click&quot;}">
                            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

Direct bestellen
Description of image

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="{
                          &quot;data&quot; : {
                                    &quot;link_location&quot; : &quot;body&quot;,
                                    &quot;link_type&quot; : &quot;internal&quot;,
                                    &quot;link_name&quot; : &quot;NS Flex&quot;,
                                    &quot;link_value&quot; : &quot;/klantenservice/ov-chipkaart&quot;,
                                    &quot;link_data&quot; : {
                                        &quot;path&quot; : &quot;/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij&quot;,
                                        &quot;targetdocumentname&quot; : &quot;index&quot;,
                                        &quot;targetdocumentpath&quot; : &quot;/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index&quot;
                                    }
                                },
                                &quot;event&quot; : &quot;link_click&quot;}">
                            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

Description of image

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

Kun jij ook niet wachten?

Om er weer lekker met de trein op uit te gaan?

Call to action
Description of image

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="{
                &quot;data&quot; : {
                        &quot;link_location&quot; : &quot;body&quot;,
                        &quot;link_type&quot; : &quot;internal&quot;,
                        &quot;link_name&quot; : &quot;NS Flex&quot;,
                        &quot;link_value&quot; : &quot;/klantenservice/ov-chipkaart&quot;,
                        &quot;link_data&quot; : {
                            &quot;path&quot; : &quot;/content/documents/ns-nl/componenten/hero-actieblokken/actie-weekend-vrij/actie-weekend-vrij&quot;,
                            &quot;targetdocumentname&quot; : &quot;index&quot;,
                            &quot;targetdocumentpath&quot; : &quot;/content/documents/ns-nl/content/klantenservice/ov-chipkaart/index/index&quot;
                        }
                    },
                    &quot;event&quot; : &quot;link_click&quot;}">
                                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>