Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Hero

Description of image

Met de NS kom je verder

< < < PLACEHOLDER VOOR DE REISPLANNER ANGULAR APP > > >
.hero

Huge images on top of pages. .hero--major The default hero as a height of 230px at small and 370px at medium+; its width is 100% of the viewport. Other than that, a Hero has a default negative bottom margin, which makes the following item overlap the Hero.

Markup

<div class="container container--extended">
    <div class="hero hero--major {{modifier_class}}">
        <picture>
            <source srcset="<%= path.styleguideStatic %>/images/klantenservice/hero_1400x370.jpg" media="(min-width: 912px)">
            <source srcset="<%= path.styleguideStatic %>/images/klantenservice/hero_912x370.jpg" media="(min-width: 640px)">
            <source srcset="<%= path.styleguideStatic %>/images/klantenservice/hero_640x230.jpg" media="(min-width: 0px)">
            <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
        </picture>
    </div>
</div>
<div class="container">
    <div class="grid" data-controller="generic/ui/ResponsiveGrid">
        <div class="grid__unit s-4-4">
                <div class="tile tile--nsYellow tile--gradient tile--smallGradient tile--slim tile--noBottom">
                <div class="tile__header">
                    <header class="headingGroup">
                        <h1 class="headingXL tile__header--mobileVisuallyHidden">Met de NS kom je verder</h1>
                    </header>
                </div>
                <div class="tile__content">
                    <div style="border: 1px solid rgba(0,0,0,0.5); height: 40px; line-height: 40px; text-align: center; font-weight: bold;">
                        &lt; &lt; &lt; <span class="m-visible-inline">PLACEHOLDER VOOR DE </span>REISPLANNER <span class="m-visible-inline">ANGULAR </span>APP &gt; &gt; &gt;
                        <br>
                    </div>
                </div>
                <div class="tile__footer">
                    <div class="separator--noTop separator--alphaGray tile__footerContent">
                        <ul class="list list--horizontal list--hasIcon">
                            <li class="list__item">
                                <a class="arrowLink--rightBlue" href="javascript:void(0)">
                                    <span class="icon icon--alert icon--nsRed"></span>
                                    <span class="s-visible--inline-block m-hidden">Verstoringen (4)</span>
                                    <span class="s-hidden m-visible--inline-block">Storingen en werkzaamheden (4)</span>
                                </a>
                            </li>
                            <li class="list__item s-hidden m-visible"><a class="arrowLink--rightBlue" href="javascript:void(0)">Meer reisinformatie</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Modifiers

Description of image

Met de NS kom je verder

< < < PLACEHOLDER VOOR DE REISPLANNER ANGULAR APP > > >

.hero--smallOverlap

A hero banner with a promotion sticker on top of it. The promotion sticker is placed within a grid. If you want to have the lower yellow contentblock a bit over the image