Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Banners

  1. Banner with appstore buttons
  2. Banner, Dark text, with subheading
  3. Banner with SVG, Dark text, with only heading
  4. Banner liggend, Light text, with only heading
  5. Banner liggend with SVG, Dark text, with subheading
  6. Banner liggend Large, Dark text, with subheading
  7. Banner liggend Large with SVG, Dark text, with heading
  8. Banner liggend Large with no background, Dark text, with heading and subheading
  9. Banner liggend with no background, Dark text, with heading and subheading
  10. Banner staand, Light text, with heading
  11. Banner staand with SVG, Dark text, with subheading
  12. Banner staand with SVG, Dark text top, with heading
  1. Banner staand, Light text top, with subheading
  2. Video banner, Dark text, with subheading
  3. Video banner with SVG, Dark text, with only heading
  4. Video banner liggend, Light text, with only heading
  5. Video banner liggend with SVG, Dark text, with subheading
  6. Video banner liggend Large, Dark text, with subheading
  7. Video banner liggend Large with SVG, Dark text, with heading
  8. Video banner staand, Light text, with heading
  9. Video banner staand with SVG, Dark text, with subheading
  10. Video banner staand with SVG, Dark text top, with heading
  11. Video banner staand, Light text top, with subheading

Basis

Header tegel

Lees meer

A transparent tile banner with a text and button. We have added .tile--banner to the tile and .tile--fullyTransparent to show how this would usually be used.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-footer tile--fullyTransparent" data-controller="generic/ui/ClickableTile">
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h3>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>

Examples of usage

Header tegel

Download in de App Store Ontdek het op Google Play

A tile banner with two appstore buttons

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-footer tile--fullyTransparent">
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h3>
                </div>
            </div>
            <div class="tile__footer">
                <div class="buttonGroup">
                    <a href="javascript:void(0)" class="button button--appStore" title="Voorleestitel uit bannerinhoud in het CMS">
                        Download in de App Store
                    </a>
                    <a href="javascript:void(0)" class="button button--playStore" title="Voorleestitel uit bannerinhoud in het CMS">
                        Ontdek het op Google Play
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Banner, Dark text, with subheading

Description of image

Header tegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer

A tile banner with a text, button and image in picture element. We have added .tile--banner to the tile and .tile--whiteText to show how this would usually be used. Normally the button would be the primary button (color: blue), but for the scope of this banner .button--secondary has been added to the button.
The width and height for the following {breakpoints} are:
l: 480px x 480px
m: 480px x 480px
s: 660px x 660px

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h3>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image

Header tegel

Lees meer

A transparent tile banner with a text, button and a SVG in picture element. We have added .tile--banner to the tile and .tile--fullyTransparent to show how this would usually be used.

The xml structure of SVG contains: a width, height and a viewBox attribute in main svg element together with preserveAspectRatio="xMaxYMax slice".
The width and height for the following {breakpoints} are:
l: 480px x 480px
m: 480px x 480px
s: 660px x 660px

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-footer tile--fullyTransparent" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h3>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image

Header tegel met bold teksten voor bijvoorbeeld NS Flex

Lees meer

A tile banner with a text, button and image in picture element. We have added .tile--banner to the tile and .tile--whiteText to show how this would usually be used. Normally the button would be the primary button (color: blue), but for the scope of this banner .button--secondary has been added to the button. We have changed the l-4-12 to l-8-12 to get the effect of double width banner
The width and height for the following {breakpoints} are:
l: 680px x 480px
m: 480px x 480px
s: 660px x 660px

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-8-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--bannerContentLeft tile--has-footer tile--bannerContentLeft" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.large %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h4 class="tile__bannerHeading">Header tegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h4>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button button--secondary" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image

Header tegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer

A tile banner with a text, button and SVG image in picture element. We have added .tile--banner to the tile. This ensures that the default behavior gets triggered when no extra classes are initiated, such as to influence the text color and button color. we have changed the l-4-12 to l-8-12 to get the effect of double width banner
The width and height for the following {breakpoints} are:
l: 680px x 480px
m: 480px x 480px
s: 660px x 660px

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-8-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentLeft tile--has-footer tile--bannerContentLeft" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h4 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h4>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer

Banner liggend Large, Dark text, with subheading

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-12-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentLeft tile--has-footer tile--bannerContentLeft tile--extra-wide" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-1172.jpg" media="(min-width: <%= breakpoints.large %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-860.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h5>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel met bold teksten voor bijvoorbeeld NS Flex
Lees meer

Banner liggend Large with SVG, Dark text, with heading

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-12-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentLeft tile--has-footer tile--bannerContentLeft tile--extra-wide" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading">Header tegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h5>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Header bannertegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer Bekijk meer

Banner liggend Large with no background, Dark text, with heading and subheading. We have added .tile--fullText to the tile. This ensures that the content until the large breakpoint is the full width of the tile, from the large breakpoint and beyond it will be the 'default' width.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-12-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentLeft tile--has-footer tile--fullText" data-controller="generic/ui/ClickableTile">
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading tile__bannerHeading--strong">Header bannertegel</h5>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
                <a href="javascript:void(0)" class="arrowLink tile__link" title="Voorleestitel uit bannerinhoud in het CMS">
                    Bekijk meer
                </a>
            </div>
        </div>
    </div>
</div>
Header bannertegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer Bekijk meer

Banner liggend with no background, Dark text, with heading and subheading. We have added .tile--fullText to the tile. This ensures that the content is the full width of the tile.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-8-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentLeft tile--has-footer tile--fullText" data-controller="generic/ui/ClickableTile">
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading tile__bannerHeading--strong">Header bannertegel</h5>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
                <a href="javascript:void(0)" class="arrowLink tile__link" title="Voorleestitel uit bannerinhoud in het CMS">
                    Bekijk meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel met bold teksten voor bijvoorbeeld NS Flex
Lees meer

Banner staand, Light text, with heading at bottom

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--bannerContentBottom tile--has-footer tile--bannerContentBottom" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_480x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_660x660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading">Header tegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h6>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer

Banner staand with SVG, Dark text, with subheading at bottom

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--bannerContentBottom tile--has-footer tile--bannerContentBottom" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h6>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel met bold teksten voor bijvoorbeeld NS Flex
Lees meer

Banner staand with SVG, Dark text top, with heading

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading">Header tegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h6>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>
Description of image
Header tegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Lees meer

Banner staand, Light text top, with subheading

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_480x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_660x660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading tile__bannerHeading--strong">Header tegel</h6>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <a href="javascript:void(0)" class="button" title="Voorleestitel uit bannerinhoud in het CMS">
                    Lees meer
                </a>
            </div>
        </div>
    </div>
</div>

Video banner, Dark text, with subheading

Description of image

Header videotegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Video banner, Dark text, with subheading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h3>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner with SVG, Dark text, with only heading

Description of image

Header videotegel

Video banner with SVG, Dark text, with only heading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h3 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h3>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner liggend, Light text, with only heading

Description of image

Header videotegel met bold teksten voor bijvoorbeeld NS Flex

Video banner liggend, Light text, with only heading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-8-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--has-bottom-controls tile--has-footer tile--bannerContentLeft" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.large %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/banner_horizontaal_landing_790x563.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h4 class="tile__bannerHeading">Header videotegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h4>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner liggend with SVG, Dark text, with subheading

Description of image

Header videotegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Video banner liggend with SVG, Dark text, with subheading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-8-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer tile--bannerContentLeft" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h4 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h4>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner liggend Large, Dark text, with subheading

Description of image
Header videotegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Video banner liggend Large, Dark text, with subheading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-12-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer tile--bannerContentLeft tile--extra-wide" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-1172.jpg" media="(min-width: <%= breakpoints.large %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-860.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/videobanner/oostvaardersplassenmistslt-660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h5>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner liggend Large with SVG, Dark text, with heading

Description of image
Header videotegel met bold teksten voor bijvoorbeeld NS Flex

Video banner liggend Large with SVG, Dark text, with heading

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-12-12" data-responsivegrid-height-l="1.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer tile--bannerContentLeft tile--extra-wide" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h5 class="tile__bannerHeading">Header videotegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h5>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner staand, Light text, with heading

Description of image
Header videotegel met bold teksten voor bijvoorbeeld NS Flex

Video banner staand, Light text, with heading at bottom

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--has-bottom-controls tile--has-footer tile--bannerContentBottom" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_480x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_660x660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading">Header videotegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h6>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner staand with SVG, Dark text, with subheading

Description of image
Header videotegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Video banner staand with SVG, Dark text, with subheading at bottom

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer tile--bannerContentBottom" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h6>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner staand with SVG, Dark text top, with heading

Description of image
Header videotegel met bold teksten voor bijvoorbeeld NS Flex

Video banner staand with SVG, Dark text top, with heading

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--has-bottom-controls tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-liggend.svg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/banner/banner_fiets-enkel.svg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading">Header videotegel met <strong>bold</strong> teksten voor bijvoorbeeld <strong>NS Flex</strong></h6>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>

Video banner staand, Light text top, with subheading

Description of image
Header videotegel

en sub maximaal 90 karakters inclusief spaties voor het beste resultaat

Video banner staand, Light text top, with subheading

Note:
If you want the text in the banner to vertically align with its neighbour(s) add data-responsivegrid-height-add-to-next-row="true" to the banner's .grid__unit element.
As a result all .grid__unit elements in the same grid rows as the banner will have the same height.

Markup

<!-- Don't copy the script element -->
<script src="//players.brightcove.net/3910869727001/r1grbpyUjf_default/index.min.js"></script>
<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-6-12 l-4-12" data-responsivegrid-height-l="2.0" data-responsivegrid-height-m="1.0">
        <div class="tile tile--banner tile--whiteText tile--has-bottom-controls tile--has-footer" data-controller="generic/ui/ClickableTile">
            <div class="tile__backgroundImage">
                <picture>
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_480x480.jpg" media="(min-width: <%= breakpoints.medium %>px)">
                    <source srcset="<%= path.styleguideStatic %>/images/uitgelicht/uitgelicht_landing_ov-chipkaart_660x660.jpg" media="(min-width: <%= breakpoints.small %>px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Description of image" class="img--contain">
                </picture>
            </div>
            <div class="tile__content">
                <div class="tile__bannerContent">
                    <h6 class="tile__bannerHeading tile__bannerHeading--strong">Header videotegel</h6>
                    <p class="tile__bannerSubheading">en sub maximaal 90 karakters inclusief spaties voor het beste resultaat</p>
                </div>
            </div>
            <div class="tile__footer">
                <button class="playButton tile__playButton"  title="Bijschrift bij de Video die hier staat" data-controller="generic/ui/video/VideoButton" data-config="{&quot;videoId&quot;: &quot;5477459690001&quot;,&quot;account&quot;: &quot;3910869727001&quot;,&quot;player&quot;: &quot;r1grbpyUjf&quot;}">
                    <span class="alt">Speel Video af</span>
                    <span class="icon icon--play-solid icon--nsWhite"></span>
                </button>
                <time aria-label="tijdsduur: 1 minuut 3 seconden" datetime="PT1M3S" class="tile__videoDuration">
                    1:03
                </time>
            </div>
        </div>
    </div>
</div>