Colors
primary
Secondary
Grayscale
Breakpoints
| Breakpoint | Resolutie | Actief | Grid | Gutter |
|---|---|---|---|---|
| FHD (desktop large) | 1920x1080px | 1920px - ∞ | 1200px | 20px |
| XXL (desktop regular) | 1440x900px | 1440px - 1919px | 1200px | 20px |
| XL (desktop small) | 1280x800px | 1280px - 1439px | 900px | 15px |
| LG (tablet landscape) | 1024x768px | 1024px - 1279px | 900px | 15px |
| MD (tablet portrait) | 768x1024px | 768px - 1023px | -30px (links/rechts) | 15px |
| SM (mobile landscape) | 568x375px | 568px - 767px | -20px (links/rechts) | 10px |
| XS (mobile portrait) | 375x568px | 0px - 567px | -20px (links/rechts) | 10px |
Typography
Font family
Aa
Aa
Aa
Aa
Heading 1
The quick brown fox jumps over the lazy dog
Heading 2
The quick brown fox jumps over the lazy dog
Heading 3
The quick brown fox jumps over the lazy dog
Heading 4
The quick brown fox jumps over the lazy dog
Heading 1 - line
The quick brown fox jumps over the lazy dog
Paragraph
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
Paragraph links
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
Notice
Let op!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorem que laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Alert success
Alert warning
Unordered list
- List item
- List item
- List item
- List item
Ordered list
- List item
- List item
- List item
- List item
Ordered list - big
Number 1
Number 2
Number 3
Number 4
Inputs
Dropdown
Dropdown
Checkboxes
Active
Unactive
Disabled
Active
Unactive
Radio buttons
Active
Unactive
Disabled
Overig
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
