Tabs

Met het tab component kun je tabbladen plaatsen op de pagina. Gebruik dit component alleen voor content die de bezoeker niet hoeft te vergelijken. Anders raakt de bezoeker gefrustreerd als hij telkens de tabs op en neer moet klikken om de content te kunnen vergelijken. 

Hoe gebruik ik een tab?

Do's

  • Gebruik tabbladen om te wisselen tussen weergaven binnen dezelfde context. Bijvoorbeeld drie contactmogelijkheden: telefoon, social, chat.
  • Gebruik maximaal drie tabbladen. Op mobiel passen er niet meer dan drie naast elkaar. 
  • Schrijf korte teksten voor de labels van de tabbladen.
  • Voeg een icoon toe om de betekenis van het tabblad nog duidelijker te maken.
  • In het contentveld van het tabblad kun je ook opsommingen of linkjes opnemen.

Een voorbeeld

Don'ts

  • Gebruik de tabbladen niet om naar verschillende onderdelen te navigeren.
  • Gaat het om content die bezoeker wil vergelijken? Gebruik dan niet het tab component. Gebruik dan een tabel.
  • Gebruik nooit meer dan 3 tabbladen.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet lobortis odio a fringilla.

  • Donec dapibus interdum orci.
  • Nunc vel molestie dolor.
  • Donec imperdiet dui quis eros accumsan suscipit.

Nunc vel molestie dolor. Nullam dapibus, nunc non consequat dapibus, tortor metus rhoncus felis, quis consectetur velit orci sit amet leo.

  • Aenean quis dui feugiat ante posuere consequat non eget odio.
  • Morbi at ullamcorper est.
  • In quis consequat mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquet lobortis odio a fringilla. Donec dapibus interdum orci. Nunc vel molestie dolor.

CMS instellingen

  • Pas de tekst in de niet-geopende tabs aan via 'Edit the related item'. 
  • Een icoon voeg je ook toe via 'Edit the related item'. 
X
Wij gebruiken cookies om uw website-ervaring te verbeteren. Als u op akkoord klikt, dan gebruiken wij cookies voor de werking van de website, statistieken, social media en online marketing.
Weigeren
Akkoord