Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Contact options

  1. Contact options with notification bar

Basis

.contactOptions

Overview of some ways a customer can use to contact NS. For the livechat contact option we have a javascript component: 'generic/ui/LiveChat'

Markup

<div class="container container--section">
    <div class="grid" data-controller="generic/ui/ResponsiveGrid">
        <div class="grid__unit s-4-4">
            <div class="contactOptions">
                <div class="grid contactOptions__list">
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption">
                            <span class="icon icon--large contactOption__icon contactOption__icon--x"></span>
                            <h3 class="contactOption__header">X</h3>
                            <p class="contactOption__text">Antwoord binnen 2 uur</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12 livechat" data-config="{
                            &quot;disabledClass&quot; :  &quot;contactOption--disabled&quot;,
                            &quot;chatStatusMessageClass&quot; :  &quot;contactOption__status&quot;,
                            &quot;chatStatusClosed&quot; : &quot;nu gesloten&quot;
                            }" data-controller="generic/ui/LiveChat">
                        <a href="javascript:void(0)" class="contactOption contactOption--disabled">
                            <span class="icon icon--large contactOption__icon contactOption__icon--chat"></span>
                            <h3 class="contactOption__header" data-chat-status-container="">Chat <span class="contactOption__status" data-chat-status="">niet beschikbaar</span></h3>
                            <p class="contactOption__text">Elke dag van 7.00 uur - 23.00 uur</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption">
                            <span class="icon icon--large contactOption__icon contactOption__icon--phone"></span>
                            <h3 class="contactOption__header">Telefoon</h3>
                            <p class="contactOption__text">12 minuten wachttijd</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption">
                            <span class="icon icon--large contactOption__icon contactOption__icon--mail"></span>
                            <h3 class="contactOption__header">E-mail, Post</h3>
                            <p class="contactOption__text">Lorem ipsum</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Examples of usage

Contact options with notification bar

Let op: De klantenservice is op dit momenteel niet bereikbaar.

X

Antwoord binnen 2 uur

Chat niet beschikbaar

Elke dag van 7.00 uur - 23.00 uur

Telefoon

12 minuten wachttijd

E-mail, Post

Lorem ipsum

The contact options component can be combined with a notificationBar whenever a situation arises in any communication channel.

Markup

<div class="container container--section">
    <div class="grid" data-controller="generic/ui/ResponsiveGrid">
        <div class="grid__unit s-4-4">
            <div class="contactOptions">
                <div class="notificationBar notificationBar--alert">
                    <span class="notificationBar__icon icon icon--alert icon--nsWhite"><span class="alt">Let op:</span></span>
                    <span class="notificationBar__text">De klantenservice is op dit momenteel niet bereikbaar.</span>
                </div>
                <div class="grid">
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption">
                            <span class="icon icon--large contactOption__icon contactOption__icon--x"></span>
                            <h3 class="contactOption__header">X</h3>
                            <p class="contactOption__text">Antwoord binnen 2 uur</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12 livechat" data-config="{
                            &quot;disabledClass&quot; :  &quot;contactOption--disabled&quot;,
                            &quot;chatStatusMessageClass&quot; :  &quot;contactOption__status&quot;,
                            &quot;chatStatusClosed&quot; : &quot;nu gesloten&quot;
                            }" data-controller="generic/ui/LiveChat">
                        <a href="javascript:void(0)" class="contactOption contactOption--disabled">
                            <span class="icon icon--large contactOption__icon contactOption__icon--chat"></span>
                            <h3 class="contactOption__header" data-chat-status-container="">Chat <span class="contactOption__status" data-chat-status="">niet beschikbaar</span></h3>
                            <p class="contactOption__text">Elke dag van 7.00 uur - 23.00 uur</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption contactOption--disabled">
                            <span class="icon icon--large contactOption__icon contactOption__icon--phone"></span>
                            <h3 class="contactOption__header">Telefoon</h3>
                            <p class="contactOption__text">12 minuten wachttijd</p>
                        </a>
                    </div>
                    <div class="grid__unit s-4-4 m-6-12 l-3-12">
                        <a href="javascript:void(0)" class="contactOption">
                            <span class="icon icon--large contactOption__icon contactOption__icon--mail"></span>
                            <h3 class="contactOption__header">E-mail, Post</h3>
                            <p class="contactOption__text">Lorem ipsum</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>