Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Body Item

Winteractie: eenmalig € 5 korting op uw ritprijs

Deze winter liever niet op de fiets door de kou en regen? NS Zonetaxi brengt u comfortabel en warm van én naar meer dan 130 stations.

iPhone met NS notificaties
.bodyItem

Body item blocks are components that can contain text (e.g. headings and paragraphs) and media (e.g. pictures and videos). This example contains text with a left/right aligned image.

  • For a right image: use bodyItem__text--left and bodyItem__image--right
  • For a left image: use bodyItem__text--right and bodyItem__image--left
  • To center the text (use only without images): use bodyItem__text--centered

Markup

<section class="bodyItem bodyItem--textAndMedia">
    <div class="bodyItem__text bodyItem__text--right">
        <div class="richText" data-controller="generic/ui/RichText" data-type="cms-Tekst">
            <h2>Winteractie: eenmalig € 5 korting op uw ritprijs</h2>
            <p>Deze winter liever niet op de fiets door de kou en regen? NS Zonetaxi brengt u comfortabel en warm van én naar meer dan 130 stations.</p>
        </div>
    </div>
    <div class="bodyItem__image bodyItem__image--left">
        <div class="bodyItemImage {{modifier_class}}">
            <picture class="bodyItemImage__holder">
                <source srcset="<%= path.styleguideStatic %>/images/reisinfo/reisinformatie_detail_iphone_notificaties_372x360.png" media="(min-width: <%= breakpoints.large %>px)">
                <source srcset="<%= path.styleguideStatic %>/images/reisinfo/reisinformatie_detail_iphone_notificaties_250x242.png" media="(min-width: <%= breakpoints.medium %>px)">
                <source srcset="<%= path.styleguideStatic %>/images/reisinfo/reisinformatie_detail_iphone_notificaties_388x376.png" media="(min-width: <%= breakpoints.small %>px)">
                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="bodyItemImage__img" alt="iPhone met NS notificaties">
            </picture>
        </div>
    </div>
</section>

Modifiers

Winteractie: eenmalig € 5 korting op uw ritprijs

Deze winter liever niet op de fiets door de kou en regen? NS Zonetaxi brengt u comfortabel en warm van én naar meer dan 130 stations.

iPhone met NS notificaties

.bodyItem__image--useBorder

Variant that makes the image overlap the container border. Also use the appropiate classes on bodyItemImage (bodyItemImage--right or bodyItemImage--useBorder)