Style Guide

Components Library

Components are simple groups of elements (atoms) and form all variants of UI component partials, a.k.a. molecules within the Atomic Design methodology.

Address component

Street address and number Postal Code LOCALITY

Button component

Normal buttons

Icon only buttons

Code Box component

var strMessage = 'Hello World!';

Code Snippet component

Press Ctrl + ` for a grid preview

Color Swatch component

gray #ccc

Error Notification component

An error has occured!

Heading Group component

Intro heading

Main heading

Sub heading

Heading with Break component

Octavia
Combi

Image component

Golf GTI

Icon List component

  • Icon List Item
  • Icon List Item
  • Icon List Item

Intro component

Introduction text.

Normal paragraph.

Label component

Label

License Plate component

Loader component

Overlay component

Overlay

Panel component

Nu open tot 17:30

Price component

Vanaf 18.750

Responsive Table component

Motor Bijtelling* CO² uitstoot Uitvoering Prijs**
2.0 TSI 132kW/180pk 7 versn. DSG 4x4 22% 170 g/km Style 43,69
2.0 TSI 132kW/180pk 7 versn. DSG 4x4 22% 170 g/km Style € 43,69
2.0 TSI 132kW/180pk 7 versn. DSG 4x4 22% 170 g/km Style € 43,69

RTE component

Classic bullet list

  • list item
  • list item
  • list item
  • list item
  • list item

Classic ordered list

  1. list item
  2. list item
  3. list item
  4. list item
  5. list item

Select Box component

Slider Dots component

Used to style the dots navigation of Slick slider.

Stacked Table component

table head 1 table cell table cell table cell table cell
table head 2 table cell table cell table cell table cell
table head 3 table cell table cell table cell table cell

USP List component

  • Example USP List item
  • Example USP List item
  • Example USP List item