Oeteldonksche Club van 1882 online styleguide

In this styleguide you will find elements that can be used to build pages for the website Oeteldonk.nl and other sites that are using the markup/CSS/JS of Oeteldonk.nl.

The following components are currently available:

Layout

Magenta backgrounds and borders are added to the styleguide only to display the otherwise invisible containers.

In this "layout" section you will find everything you need to structurally layout each page. All these elements are only styled structural so no borders, backgrounds or other properties will be found here.

Stack
Stack

All direct children in this container are stacked with their own top-margin (may be different for different items).

This is the main class to use to space elements from each other.

Example child
Example child
Example child
Markup
<div class="stack">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
</div>
Stack smaller

Brings elements closer together

Example child
Example child
Example child
Markup
<div class="stack stack--scale:-2">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
</div>
Stack center

All direct children in this container are centered using the $content-width variable.

Note: Some elements can't be used as direct children (for example any inline, inline-block or inline-flex element, a .flag-object, a .horizontal-list) because they won't center on larger screens. If you need one of these elements simply wrap it in a div for example.

Example child
Example child
Example child
Note: This element is failing on desktop. Wrap it in a div for example.
Markup
<div class="stack stack--center">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
    <div class="flag-object"><div class="flag-object__body">Note: This element is failing on desktop. Wrap it in a div for example.</div></div>
</div>
Stack center > wider

Makes the element as wide as the $wider-width variable. Use as child of a .stack.stack--center container.

...
Markup
<div class="stack stack--center">
    <div class="wider">...</div>
</div>
Stack center > widest

Makes the element as wide as the $site-width variable. Use as child of a .stack.stack--center container.

...
Markup
<div class="stack stack--center">
    <div class="widest">...</div>
</div>
Stack center > full-width

Makes the element as wide as the parent container. Use as child of a .stack.stack--center container.

Use this element to span the entire site and add background colors to this div to create colored sections.

...
Markup
<div class="stack stack--center">
    <div class="full-width">...</div>
</div>
Center
Center

Centered container using the $content-width variable.

...
Markup
<div class="center">...</div>
Center, pull:right

Centered container using the $content-width variable.

...
Markup
<div class="center center--pull:right">...</div>
Grid
Grid

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid">
    <div class="inner">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
    </div>
</div>
Grid (smaller)

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width--s wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid grid--size:s">
    <div class="inner">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
    </div>
</div>
Switcher
Switcher

Stacked containers on a small screen and aligned when all children are at least $grid-item-width wide.

Switcher item
Switcher item
Switcher item
Markup
<div class="switcher">
    <div class="inner">
        <div>Switcher item</div>
        <div>Switcher item</div>
        <div>Switcher item</div>
    </div>
</div>
Switcher 1:2

Stacked containers on a small screen and aligned in a 1/2 ratio when both children are at least $grid-item-width wide.

Switcher item
Switcher item
Markup
<div class="switcher switcher--1:2">
    <div class="inner">
        <div>Switcher item</div>
        <div>Switcher item</div>
    </div>
</div>
Switcher 2:1

Stacked containers on a small screen and aligned in a 2/1 ratio when both children are at least $grid-item-width wide.

Switcher item
Switcher item
Markup
<div class="switcher switcher--2:1">
<div class="inner">
    <div>Switcher item</div>
    <div>Switcher item</div>
</div>
</div>
Flag object
Flag object

Automaticcaly sizing flag-object. The body is fluid and aside is fixed.

Make sure you define a width for fluid elements (like images) inside an aside to avoid weird growing flag objects

Aside
Body element
Multiline
Markup
<div class="flag-object">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
Top aligned flag object

Add this modifier to vertically align all children on top instead of middle

Aside
Body element
Multiline
Markup
<div class="flag-object flag-object--top">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
Bottom aligned flag object

Add this modifier to vertically align all children on bottom instead of middle

Aside
Body element
Multiline
Markup
<div class="flag-object flag-object--bottom">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
No wrap flag object

Add this modifier to keep everything aligned instead of stacked even on smaller screens

Aside
Body
Markup
<div class="flag-object flag-object--nowrap">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body</div>
</div>
Inline flag object

Add this modifier to get an inline-flex flag-object

Aside
Body
Markup
<div class="flag-object flag-object--inline">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body</div>
</div>
Cluster
Cluster

A cluster of elements evenly spaced both vertical as horizontal.

The cluster doesn't care what you throw at it. Just remember that it is a flexbox so each row is as tall as the tallest child.

Cluster item
Cluster item
Cluster item Cluster item
Markup
<div class="cluster">
    <div>Cluster item</div>
    <div>Cluster item</div>
    <a class="button button--oceaan" href="#">Cluster item</a>
    <a class="label" href="#">Cluster item</a>
</div>
Color
Primary
Goud
hsl(47, 74%, 32%)
Rood
hsl(0, 100%, 39%)
Wit
hsl(0, 0, 100%)
Geel
hsl(43, 90%, 65%)
Support
Goud light
hsl(50, 33%, 86%)
Goud lighter
hsl(50, 33%, 91%)
Goud lightest
hsl(50, 33%, 96%)
Wit
hsl(0, 0, 100%)
Type-alt
hsl(240, 13%, 23%)
Typography

The first heading on a page should always be an <h1> with the class heading:xl.

Only one <h1> per page is allowed.

Headings
Heading XL
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:xl">Lorem ipsum dolor sit amet</h2>
Include
@include heading("xl")
Class
heading:xl 
Heading XL - Bold
Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:xl-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("xl", false)
Class
heading:xl-alt
Heading L
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:l color:goud">Lorem ipsum dolor sit amet</h2>
Include
@include heading("l")
Class
heading:l
Heading M
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
Include
@include heading("m")
Class
heading:m
Heading M - Regular
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("m", false)
Class
heading:m-alt
Heading S
Bitter: Italic light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:s">Lorem ipsum dolor sit amet</h2>
Include
@include heading("s")
Class
heading:s
Heading S
Bitter: Italic light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:s-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("s-alt")
Class
heading:s-alt
Heading M - Regular - Donker op wit
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m-alt color:dark">Lorem ipsum dolor sit amet</h2>
Class
heading:m-alt color:dark
Heading + sub-heading

Lorem ipsum dolor sit amet

01 january 2020

Markup
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
<p class="sub-heading font-size:xs">01 january 2020</p>
Body text
Font size L
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:l">Lorem ipsum dolor sit amet</p>
Class
font-size:l
Font size S
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:s">Lorem ipsum dolor sit amet</p>
Class
font-size:s
Font size XS
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:xs">Lorem ipsum dolor sit amet</p>
Class
font-size:xs
Body text
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="">Lorem ipsum dolor sit amet</p>
Body text - bold
Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
Class
font-weight:bold
Body text - italic
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-style:italic">Lorem ipsum dolor sit amet</p>
Class
font-style:italic
Body text - Donker op wit
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:dark">Lorem ipsum dolor sit amet</p>
Class
color:dark
Body text - Wit op donker
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="background:type-alt">Lorem ipsum dolor sit amet</p>
Class
background:type-alt
Call to action
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:rood">Lorem ipsum dolor sit amet</p>
Class
color:rood
Call to action - large
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:rood font-size:l">Lorem ipsum dolor sit amet</p>
Class
color:rood font-size:l
Weight
Weight normal
Puts text in normal weight

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:normal">Lorem ipsum dolor sit amet</p>
Class
font-weight:normal
Weight bold
Puts text in bold weight

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
Class
font-weight:bold
Weight medium
Puts text in medium weight (Only applicable to fonts that have a medium weight loaded in the site)

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:medium">Lorem ipsum dolor sit amet</p>
Class
font-weight:medium
Wrapping and overflow
No wrap
Makes sure text always stays on one line and never wraps to a second one.

Lorem ipsum dolor sit amet

Markup
<p class="nowrap">Lorem ipsum dolor sit amet</p>
Class
nowrap
Overflow ellipsis
When text is longer than one line it adds three dots to the end.

Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Markup
<p class="overflow:ellipsis">Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
Class
overflow:ellipsis
Buttons

Only use the button class for actual <button> or <a> elements.

Button (with arrow right)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'title-hidden' => '',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => '',
]); ?>
Button with hidden title (with arrow right)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'title-hidden' => '1',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => '',
]); ?>
Button (with arrow left)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'title-hidden' => '',
    'link' => '#',
    'icon' => 'chevron-left',
    'icon-position' => 'before',
    'modifiers' => '',
]); ?>
Button with hidden title (with arrow left)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'title-hidden' => '1',
    'link' => '#',
    'icon' => 'chevron-left',
    'icon-position' => 'before',
    'modifiers' => '',
]); ?>
Small Button (with arrow right)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'title-hidden' => '',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => [
        '0' => 'small-with-text',
    ]
]); ?>
Small Button with hidden title (with arrow right)
jLayout
<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'title-hidden' => '1',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => [
        '0' => 'small',
    ]
]); ?>
Cards

When multiple cards are used in one container. Make sure to make the parent + cards an ul > li. If no other container is available (like a grid or switcher for example) you can use .cards as a class for the parent ul

@TODO: Add more cards, best to load them from jlayouts

Default card
Header
Content
Markup
<div class="card card--shaded">
    <div class="card__body">
        <div class="card__header">Header</div>
        <div class="card__content">Content</div>
        <div class="card__footer">Footer</div>
    </div>
</div>
Clean card
Clean card
Markup
<div class="card card--clean">
    <div class="card__body">
        <div class="card__content">
            Clean card
        </div>
    </div>
</div>
Card with an image

When space is limited the image will stack on top of the rest automatically.

Image card
Markup
<div class="card">
    <figure class="card__image">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__content">
            Image card
        </div>
    </div>
</div>
Card with an image & label

When space is limited the image will stack on top of the rest automatically.

Image card
Markup
<div class="card card--label">
    <figure class="card__image">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
        
    </figure>
    <div class="card__body">
        <div class="card__content">
            Image card
        </div>
    </div>
</div>
Card with an square image & label

When space is limited the image will stack on top of the rest automatically.

Image card
Markup
<div class="card card--label">
    <figure class="card__image">
        <div class="ratio:1:1">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
        
    </figure>
    <div class="card__body">
        <div class="card__content">
            Image card
        </div>
    </div>
</div>
Card with an 3:4 image & label

When space is limited the image will stack on top of the rest automatically.

Image card
Markup
<div class="card card--label card--text-on-image">
    <div class="card__image">
        <figure>
	        <div class="frame ratio:3:4">
	            <img src="https://placeimg.com/600/600/people" alt="" />
	        </div>
	        
        </figure>
    </div>
    <div class="card__body">
        <div class="card__content">
            Image card
        </div>
    </div>
</div>
Card with a small image
Small image card
Markup
<div class="card">
    <figure class="card__image card__image--size:xs">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__content">
            Small image card
        </div>
    </div>
</div>
Card with a tiny image
Tiny image card
Markup
<div class="card">
    <figure class="card__image card__image--size:xxs">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__content">
            Tiny image card
        </div>
    </div>
</div>
Card with an icon
Icon card
Markup
<div class="card">
    <div class="card__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.75 21.727H2.25A2.25 2.25 0 010 19.477V4.523a2.25 2.25 0 012.25-2.25h16.617a2.252 2.252 0 011.61.678l2.884 2.955c.41.42.639.985.639 1.571v12a2.25 2.25 0 01-2.25 2.25zM18.867 3.773H2.25a.75.75 0 00-.75.75v14.954c0 .414.336.75.75.75h19.5a.75.75 0 00.75-.75v-12a.75.75 0 00-.213-.523l-2.883-2.955a.75.75 0 00-.537-.226zm-6.833 8.74l1.786-2.557a1.594 1.594 0 012.632.028l4.372 6.555a.75.75 0 01-1.248.832l-4.372-6.555a.094.094 0 00-.131-.025.086.086 0 00-.023.023l-2.245 3.215a.75.75 0 01-1.085.156l-1.39-1.117a.093.093 0 00-.13.014l-.001.003-.004.005-2.865 4.3a.75.75 0 01-1.248-.832l2.865-4.3a1.592 1.592 0 012.322-.36l.765.615zm-3-.372l-.005.005.012-.015-.008.01zM7.08 5.875a2.624 2.624 0 100 5.25 2.624 2.624 0 100-5.25zm0 1.5a1.125 1.125 0 110 2.25 1.125 1.125 0 010-2.25z"/></svg>
    </div>
    <div class="card__body">
        <div class="card__content">
            Icon card
        </div>
    </div>
</div>
Card with contained image
The entire image in this card will always be shown
Markup
<div class="card">
    <figure class="card__image card__image--size:xs">
        <img src="https://placeimg.com/600/600/people" alt="" />
    </figure>
    <div class="card__body">
        <div class="card__content">
            The entire image in this card will always be shown
        </div>
    </div>
</div>
Stacked card
Want the image or icon to be always on top of the rest of the card regardless of the card size? Then use this card--stack modifier
A stacked card example
Markup
<div class="card card--stack">
    <figure class="card__image">
        <div class="ratio:5:2">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__content">
            A stacked card example
        </div>
    </div>
</div>
Clickable card

Make sure you link the correct element in the card, most likely the title, and add a data-card-link attribute to it.

Add a data-card attribute to the .card element to make it fully clickable.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Markup
<div class="card" data-card>
    <figure class="card__image">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__header">
            <h2 class="heading:s"><a href="#" data-card-link>Card link inside triggers entire card</a></h2>
        </div>
        <div class="card__content">
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
    </div>
</div>
Clickable Stacked card

Make sure you link the correct element in the card, most likely the title, and add a data-card-link attribute to it.

Add a data-card attribute to the .card element to make it fully clickable.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Markup
<div class="card card--stack" data-card>
    <figure class="card__image">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__header">
            <h2 class="heading:s"><a href="#" data-card-link>Card link inside triggers entire card</a></h2>
        </div>
        <div class="card__content">
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
    </div>
</div>
Card with extra links

When multiple links are present in a card add a data-card-ignore attribute to each link/or element you don't want to trigger the entire card click.

A card__group-list element is available for groups of links that should be added to a single card.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Markup
<div class="card" data-card>
    <figure class="card__image">
        <div class="ratio:16:9">
            <img src="https://placeimg.com/600/600/people" alt="" />
        </div>
    </figure>
    <div class="card__body">
        <div class="card__header">
            <h2 class="heading:s"><a href="#" data-card-link>Card link inside triggers entire card</a></h2>
        </div>
        <div class="card__content">
            <p>Aenean eu leo quam. Pellentesque ornare sem <a href="#" data-card-ignore>lacinia quam venenatis vestibulum</a>. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
    </div>
    <ul class="card__group-list list list--arrow" data-card-ignore>
        <li><a href="#">Link number one</a></li>
        <li><a href="#">Link number two</a></li>
    </ul>
</div>
Document card
DOC, 1MB
Document description
Markup
<div class="card" data-card>
    <div class="card__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.975 6.596v14.38a3.014 3.014 0 01-2.999 2.999h-14-.001a3.014 3.014 0 01-3-2.999v-18-.001c0-1.646 1.354-3 3-3h10.379c.596 0 1.17.237 1.591.659l4.371 4.372c.422.421.659.994.659 1.59zm-7.5-5.121h-9.5c-.823 0-1.5.677-1.5 1.5v18.001c0 .822.677 1.499 1.5 1.499h14.001c.822 0 1.499-.677 1.499-1.499V7.475h-3.75a2.26 2.26 0 01-2.25-2.25v-3.75zm5.69 4.5l-4.19-4.19v3.44c0 .411.339.75.75.75h3.44z"/></svg>
        <span class="font-size:xs">DOC, 1MB</span>
    </div>
    <div class="card__body">
        <div class="card__header">
            <h2 class="heading:s">
                <a href="#" data-card-link>Document title</a>
            </h2>
        </div>
        <div class="card__content">
            Document description
        </div>
    </div>
</div>
Lists

Each list should be an <ul></ul> or <ol></ol> holding <li></li> elements.

Vertical list
  • List item
  • List item
    • List item
    • List item
  • List item
Markup
<ul class="list">
    <li>List item</li>
    <li>
        List item
        <ul>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </li>
    <li>List item</li>
</ul>
Horizontal list
  • List item
  • List item
  • List item
Markup
<ul class="horizontal-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
Compact horizontal list
  • List item
  • List item
  • List item
Markup
<ul class="compact-horizontal-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
Switch list

Starts as a vertical list but becomes a horizontal list from $content-width breakpoint

  • List item
  • List item
  • List item
Markup
<ul class="switch-list">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
Arrow list
Markup
<ul class="list list--arrow">
    <li><a href="#">List item</a></li>
    <li>
        <a href="#">List item</a>
        <ul>
            <li><a href="#">List item</a></li>
            <li><a href="#">List item</a></li>
        </ul>
    </li>
    <li><a href="#">List item</a></li>
</ul>
Icons
OC1882 Icons

OC1882-label

OC1882-das

OC1882-maskers

OC1882-muts

OC1882-slinger

OC1882-ster

OC1882-toeter

OC1882-trommel
Arrows

chevron-left

chevron-right
Social

YouTube

Facebook

Instagram

Linkedin

Twitter

RSS
Media

Cloud Download

Google Podcast

Podcast

Spotify
Misc

At

Image

Lock

Newspaper

Mobile

Phone

Quote

Quote large

Search
Documents

document

document PDF

document Spreadsheet

document Image
Icon classes
Icon round
Markup
<span class="icon-round"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9V6a6 6 0 0112 0v3h.75A2.25 2.25 0 0121 11.25v10.5A2.25 2.25 0 0118.75 24H5.25A2.25 2.25 0 013 21.75v-10.5A2.25 2.25 0 015.25 9H6zm12.75 1.5H5.25a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-10.5a.75.75 0 00-.75-.75zm-7.5 4.5v3a.75.75 0 001.5 0v-3a.75.75 0 00-1.5 0zm5.25-6V6a4.5 4.5 0 00-9 0v3h9z"/></svg></span>
Class
icon-round
Form

Basic form elements to use.

Form field
Markup
<div class="form__group">
    <label class="form__label" for="input-text-example">Field label</label>
    <input class="form__input" id="input-text-example" name="input-text-example" type="text" />
</div>
Text area
Explanation for textarea
Markup
<div class="form-group">
    <label class="form__label" for="textarea-example">Field label</label>
    <div class="form__hint" id="textarea-example-hint">Explanation for textarea</div>
    <textarea class="form__input" rows="6" id="textarea-example" name="textarea-example" aria-describedby="textarea-example-hint"></textarea>
</div>
Select
Markup
<div class="form__group">
    <label class="form__label" for="select-example">Field label</label>
    <div class="custom-select">
        <select id="example3" name="select-example">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
            <option value="option4">Option 4</option>
        </select>
    </div>
</div>
Checkboxes
Checkbox options
Explanation for options
Markup
<div class="form__group">
    <fieldset aria-describedby="checkbox-example-hint">
        <legend class="heading:m">Checkbox options</legend>
        <div class="form__hint" id="checkbox-example-hint">Explanation for options</div>
        <div class="multiple-choice">
            <input id="checkbox-example-1" name="checkbox-example" type="checkbox" value="option1">
            <label for="checkbox-example-1">Option 1</label>
        </div>
        <div class="multiple-choice">
            <input id="checkbox-example-2" name="checkbox-example" type="checkbox" value="option2">
            <label for="checkbox-example-2">Option 2</label>
        </div>
        <div class="multiple-choice">
            <input id="checkbox-example-3" name="checkbox-example" type="checkbox" value="option3">
            <label for="checkbox-example-3">Option 3</label>
        </div>
    </fieldset>
</div>
Radios
Radio options Explanation for options
Markup
<div class="form__group">
    <fieldset aria-describedby="radio-example-hint">
        <legend class="heading:m">Radio options</legend>
        <span class="form__hint" id="radio-example-hint">Explanation for options</span>
        <div class="multiple-choice">
            <input id="radio-example-1" name="radio-example" type="radio" value="option1">
            <label for="radio-example-1">Option 1</label>
        </div>
        <div class="multiple-choice">
            <input id="radio-example-2" name="radio-example" type="radio" value="option2">
            <label for="radio-example-2">Option 2</label>
        </div>
        <div class="multiple-choice">
            <input id="radio-example-3" name="radio-example" type="radio" value="option3">
            <label for="radio-example-3">Option 3</label>
        </div>
    </fieldset>
</div>
Input group
Input group
Explanation for above group
Markup
<div class="form__group">
    <fieldset aria-describedby="group-example-hint">
        <legend class="heading:m">Input group</legend>
        <div class="form__input-group">
            <label class="form__label" for="group-example-input">Label</label>
            <input class="form__input" id="group-example-input" name="group-example-input" type="text" />
            <button class="button" type="button">Button</button>
        </div>
        <div class="form__hint" id="group-example-hint">Explanation for above group</div>
    </fieldset>
</div>
Form field error
Error: Some error message
Markup
<div class="form__group form__group--error">
    <label class="form__label" for="input-error-example">Field label</label>
    <span id="passport-issued-error" class="form__error">
      <span class="visually:hidden">Error:</span> Some error message
    </span>
    <input class="form__input" id="input-error-example" name="input-text-example" type="text" aria-describedby="national-insurance-number-error" />
</div>
Components
Link
Link
Default link with an optional label if the link is going to an external website.
jLayout
<?php echo LayoutHelper::render('template.molecules.link', [
    'type' => 'a',
    'title' => 'title',
    'label' => 'label',
]); ?>
Quotes
Regular blockquote

Some content

Markup
<blockquote>
    <p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.803 5.244c-1.06.615-2.051 1.355-2.836 2.298a6.743 6.743 0 00-.724 1.04c-.566 1.017-.828 2.189-.896 3.362-.022.37-.026.742-.013 1.115.134-.056.271-.106.412-.139.312-.071.637-.079.958-.076.519.003 1.04.098 1.505.322.773.371 1.347 1.09 1.665 1.899.024.061.047.123.068.185.215.629.292 1.297.289 1.957-.003.725-.132 1.458-.461 2.103a3.67 3.67 0 01-.948 1.167 4.455 4.455 0 01-1.901.9 6.1 6.1 0 01-1.528.125c-.985-.03-1.968-.263-2.811-.764a4.87 4.87 0 01-1.685-1.652c-.449-.742-.692-1.604-.806-2.46-.105-.786-.106-1.582-.069-2.374.066-1.411.286-2.822.776-4.147.142-.382.301-.756.471-1.125.453-.983 1.002-1.926 1.679-2.769.778-.969 1.679-1.849 2.707-2.534.672-.447 1.373-.87 2.119-1.177l.008-.003.007-.003 2.014 2.75zm13.769 0c-1.051.61-2.039 1.344-2.826 2.286-.268.32-.513.658-.717 1.021-.468.83-.733 1.766-.852 2.718a11.614 11.614 0 00-.074 1.79 2.46 2.46 0 01.409-.138c.312-.072.634-.08.961-.077.519.003 1.04.098 1.506.322.438.21.816.533 1.113.918.3.39.521.84.664 1.306.18.587.247 1.203.244 1.817-.004.725-.132 1.458-.461 2.103a3.67 3.67 0 01-.948 1.167 4.42 4.42 0 01-1.762.868 6.317 6.317 0 01-1.782.153c-.829-.038-1.653-.22-2.394-.594a4.952 4.952 0 01-1.755-1.47c-.537-.731-.842-1.621-.993-2.508-.149-.88-.156-1.779-.114-2.674.066-1.411.287-2.821.773-4.138.141-.382.301-.756.47-1.126.454-.987 1.006-1.934 1.683-2.777.778-.969 1.679-1.849 2.708-2.534.672-.447 1.372-.87 2.119-1.177l.007-.003.007-.003 2.014 2.75zm-2.216-2.002a13.65 13.65 0 00-1.608.941c-.921.614-1.723 1.39-2.424 2.233-.224.27-.437.551-.635.841-.593.868-1.067 1.815-1.456 2.791-.545 1.366-.785 2.845-.847 4.32-.039.955-.024 1.917.19 2.857.131.575.336 1.134.657 1.637.476.745 1.206 1.324 2.024 1.658.726.296 1.523.404 2.313.384.719-.018 1.444-.163 2.075-.508a3.3 3.3 0 001.303-1.253c.308-.548.434-1.185.45-1.819.021-.796-.085-1.603-.434-2.314-.236-.48-.583-.915-1.044-1.195-.415-.251-.904-.36-1.391-.37a3.939 3.939 0 00-.82.048 1.799 1.799 0 00-.369.117l-.81.339-.027-.885c-.03-1.01.04-1.999.281-2.964a7.18 7.18 0 011.012-2.31c.746-1.098 1.782-2 2.902-2.716l.004-.003-1.341-1.832-.005.003zm-13.769 0c-.557.269-1.083.591-1.599.935-.914.608-1.727 1.389-2.433 2.239-.221.267-.431.543-.627.829a14.158 14.158 0 00-1.377 2.587 11.4 11.4 0 00-.393 1.089c-.407 1.355-.552 2.777-.557 4.196-.003.774.059 1.553.252 2.298.158.609.41 1.204.796 1.713a4.407 4.407 0 001.859 1.4c.82.33 1.735.427 2.602.36.61-.047 1.224-.196 1.766-.492a3.353 3.353 0 001.119-.965c.211-.291.365-.62.467-.968.144-.489.182-1.009.166-1.511-.025-.788-.187-1.581-.6-2.241a2.722 2.722 0 00-.877-.896c-.414-.25-.904-.36-1.391-.37a3.943 3.943 0 00-.82.048l-.066.014a1.886 1.886 0 00-.302.103l-.807.337-.031-.881c-.038-1.145.062-2.289.395-3.376a6.943 6.943 0 011.014-2.065A9.153 9.153 0 017.56 6.086c.427-.369.886-.703 1.36-1.007l.008-.005.005-.003-1.342-1.832-.004.003z"/></svg></p>
    <p>Some content</p>
</blockquote>
Labels
Label
Label
jLayout
<?php echo LayoutHelper::render('template.molecules.label', [
    'type' => 'span',
    'title' => 'Label',
    'icon' => '',
]); ?>
Label with icon
Label
jLayout
<?php echo LayoutHelper::render('template.molecules.label', [
    'type' => 'span',
    'title' => 'Label',
    'icon' => 'arrow',
]); ?>
Dynamic content
Houdini

Hides content when JavaScript is enabled. By default everything is visible. The button hides when the content has been toggled.

Something before the button

Something after the button

Markup
<p>Something before the button</p>
<div data-houdini="showmore" data-houdini-button="Houdini button" id="unique-id">
    <p>Something after the button</p>
</div>
Picture credits
Credits
  • Photo credits
Markup
<figcaption class="credits">Photo credits</figcaption>
Headers
Page header
The actual content in the white area is just the next element in the stack.
jLayout
<?php echo LayoutHelper::render('template.content.block.header', [
    'mode' => 'wide',
    'heading' => 'Header title',
    'text' => 'Header text',
    'image' => 'https://placeimg.com/1000/500/people',
    'imageAlt' => 'Image alt',
    'imageCredits' => 'Optional credits',
]); ?>
Page header
The actual content in the white area is just the next element in the stack.
Image alt
Optional credits
jLayout
<?php echo LayoutHelper::render('template.content.block.header', [
    'mode' => 'default',
    'heading' => 'Header title',
    'text' => 'Header text',
    'image' => 'https://placeimg.com/1000/500/people',
    'imageAlt' => 'Image alt',
    'imageCredits' => 'Optional credits',
]); ?>
Tips
Tips

Header title

Description

  • Tip 1
    Omschrijving van tip 1
  • Tip 2
    Omschrijving van tip 2
jLayout
<?php echo LayoutHelper::render('template.content.block.tips', [
    'title' => 'Header title',
    'text' => '<p>Description</p>',
    'items' => [
                '0' => [
            'title' => 'Tip 1',
            'text' => 'Omschrijving van tip 1',
    ]
                '1' => [
            'title' => 'Tip 2',
            'text' => 'Omschrijving van tip 2',
    ]
    ]
]); ?>
Ervaringen
Ervaringen

Ervaringen

De keuze voor het ziekenhuis was snel gemaakt.

Ik ben op internet gaan zoeken. Externe link: Met link

jLayout
<?php echo LayoutHelper::render('template.content.block.experiences', [
    'title' => 'Ervaringen',
    'items' => [
                '0' => [
            'title' => 'De keuze voor het ziekenhuis was snel gemaakt.',
            'url' => '',
            'videoId' => '02ew3sY-ZAY',
            'label' => '',
    ]
                '1' => [
            'title' => 'Ik ben op internet gaan zoeken.',
            'url' => '#',
            'videoId' => 'vjAkKC_5VVI',
            'label' => 'Met link',
    ]
    ]
]); ?>
Call to Action
Call to Action
Image alt
Henk van Vught

Call to Action title

Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.

jLayout
<?php echo LayoutHelper::render('template.content.block.cta', [
    'color' => 'goud',
    'heading' => 'Call to Action title',
    'text' => 'Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.',
    'image' => 'https://placeimg.com/1000/500/people',
    'imageAlt' => 'Image alt',
    'imageCredits' => 'Henk van Vught',
    'buttons' => [
                '0' => [
            'link' => '#',
            'text' => 'Knop',
    ]
    ]
]); ?>
Pagination
Simplified pagination

When using the Oeteldonk CSS file outside of Joomla; this simplified pagination markup scheme is available.

Use pwt-pagination__active class with a span for the pwt-pagination__element element for the current page.

Use pwt-pagination__offset pwt-pagination__offset--1 classes with an anchor for the pwt-pagination__element element for all clickable pages.

Use anchor elements for the prev and next pages with their respective classes and do not forget to add the rel.

Markup
<div class="pagination pagination--wrap">
    <p id="pwt-pagination-label" class="pwt-visually-hidden">Paginering</p>
    <ul class="pwt-pagination-list" aria-labelledby="pwt-pagination-label">
        <li class="pwt-pagination__previous">
            <a class="pwt-pagination__element" href="#" rel="prev">
                <span class="pwt-visually-hidden">Vorige pagina</span>
            </a>
        </li>
        <li class="pwt-pagination__active">
            <span class="pwt-pagination__element">
                <span class="pwt-visually-hidden">Pagina </span>1
            </span>
        </li>
        <li class="pwt-pagination__offset pwt-pagination__offset--1">
            <a class="pwt-pagination__element" href="#">
                <span class="pwt-visually-hidden">Pagina </span>2
            </a>
        </li>
        <li class="pwt-pagination__offset pwt-pagination__offset--1">
            <a class="pwt-pagination__element" href="#">
                <span class="pwt-visually-hidden">Pagina </span>3
            </a>
        </li>
        <li class="pwt-pagination__offset pwt-pagination__offset--1">
            <a class="pwt-pagination__element" href="#">
                <span class="pwt-visually-hidden">Pagina </span>4
            </a>
        </li>
        <li class="pwt-pagination__offset pwt-pagination__offset--1">
            <a class="pwt-pagination__element" href="#">
                <span class="pwt-visually-hidden">Pagina </span>5
            </a>
        </li>
        <li class="pwt-pagination__next">
            <a class="pwt-pagination__element" href="#" rel="next">
                <span class="pwt-visually-hidden">Volgende pagina</span>
            </a>
        </li>
    </ul>
 </div>
Utilities

Classes that mostly do just one thing.

Modular scale

Cheatsheet on how the modular scale works. All units are calculated from a 0 width viewport. Units will be bigger on larger viewports.

Note: all units are eventually relative to the viewport width, current font-size and other fluid aspects. Below serves as a basic overview.

$ms-4 0.1975em ± 3px
$ms-3 0.2963em ± 5px
$ms-2 0.4444em ± 7px
$ms-1 0.6666em ± 11px
$ms0 1em ± 16px
$ms1 1.5em ± 24px
$ms2 2.25em ± 36px
$ms3 3.375em ± 54px
$ms4 5.0625em ± 81px
Margin
margin-top:1
Sets a default responsive (scale 1) margin on the top of an element
Class
margin-top:1
margin-top:2
Sets a larger responsive (scale 2) margin on the top of an element
Class
margin-top:2
Padding
padding
Sets a responsive (scale 0) padding on all sides of an element
Class
padding
padding:-1
Sets a responsive (scale -1) padding on all sides of an element
Class
padding:-1
padding:-2
Sets a responsive (scale -2) padding on all sides of an element
Class
padding:-2
padding-vertical:1
Sets a default responsive (scale 1) padding on top/bottom of an element
Class
padding-vertical:1
padding-horizontal
Sets a default responsive (scale 0) padding on right/left of an element
Class
padding-horizontal
padding-top:1
Sets a default responsive (scale 1) padding on top of an element
Class
padding-top:1
Display
wrapper
Making sure you can wrap stuff in a block level element without us ing a class-less div
Class
visually:hidden
block-wrapper
All direct children of this element will get display: block
Class
overflow:hidden
Visibility
visually:hidden
Hides an element visually while keeping it readable for screenreaders and search engines
Class
visually:hidden
overflow:hidden
Hides overflowing content
Class
overflow:hidden
Ratio blocks
Need a steady ratio block for content, images, etc.?
Ratio 16:9
...
Markup
<div class="ratio:16:9">...</div>
Class
ratio:16:9
Ratio 5:2
...
Markup
<div class="ratio:5:2">...</div>
Class
ratio:5:2
Ratio 4:3
...
Markup
<div class="ratio:4:3">...</div>
Class
ratio:4:3
Radius
Radius small
Gives an element a small radius
...
Markup
<div class="radius:small">...</div>
Class
radius:small
Radius large
Gives an element a large radius
...
Markup
<div class="radius:large">...</div>
Class
radius:large
Examples

Some examples

Cards
Card with contained image

Card title

Lage resolutie
Hoge resolutie

Fotograaf: Pim Geerts

Markup
<div class="card">
    <div class="card__image card__image--size:xs">
        <img src="https://placeimg.com/400/600/people" alt="" />
    </div>
    <div class="card__body">
        <div class="card__header">
            <h2 class="heading:s">Card title</h2>
        </div>
        <div class="card__content">
        <p>
            <a href="#">Lage resolutie</a><br/>
            <a href="#">Hoge resolutie</a>
        </p>
        <p>Fotograaf: Pim Geerts</p>
        </div>
    </div>
</div>
Ministerie lijst => Card with an square image & label

When space is limited the image will stack on top of the rest automatically.

  • Ministerie van evenementen

    Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.

    Minister: Sander van de Gevel
    ministerpresident@oeteldonk.org

  • Ministerie van evenementen

    Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.

    Minister: Sander van de Gevel
    ministerpresident@oeteldonk.org

Markup
<div class="switcher">
	<ul class="inner">
		<li class="card card--label">
		    <figure class="card__image">
		        <div class="ratio:1:1">
		            <img src="https://placeimg.com/600/600/people" alt="" />
		        </div>
		        		    </figure>
		    <div class="card__body">
		        <div class="card__header">
		            <h2 class="heading:m">Ministerie van evenementen</h2>
		        </div>
		        <div class="card__content color:dark">
		            <p>Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. </p>
		        </div>
		        <div class="card__content">
		            <p>Minister: Sander van de Gevel<br><a href="mailto:ministerpresident@oeteldonk.org">ministerpresident@oeteldonk.org</a></p>
		        </div>
		    </div>
		</li>
		<li class="card card--label">
		    <figure class="card__image">
		        <div class="ratio:1:1">
		            <img src="https://placeimg.com/600/600/people" alt="" />
		        </div>
		        		    </figure>
		    <div class="card__body">
		        <div class="card__header">
		            <h2 class="heading:m">Ministerie van evenementen</h2>
		        </div>
		        <div class="card__content color:dark">
		            <p>Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. </p>
		        </div>
		        <div class="card__content">
		            <p>Minister: Sander van de Gevel<br><a href="mailto:ministerpresident@oeteldonk.org">ministerpresident@oeteldonk.org</a></p>
		        </div>
		    </div>
		</li>
	</ul>
</div>
Nieuws lijst => Card with an square image & label

When space is limited the image will stack on top of the rest automatically.

  • Ministerie van evenementen

    Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.

    Minister: Sander van de Gevel
    ministerpresident@oeteldonk.org

  • Ministerie van evenementen

    Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.

    Minister: Sander van de Gevel
    ministerpresident@oeteldonk.org

Markup
<div class="switcher">
	<ul class="inner">
		<li class="card card--label">
		    <figure class="card__image">
		        <div class="ratio:1:1">
		            <img src="https://placeimg.com/600/600/people" alt="" />
		        </div>
		        		    </figure>
		    <div class="card__body">
		        <div class="card__header">
		            <h2 class="heading:m">Ministerie van evenementen</h2>
		        </div>
		        <div class="card__content color:dark">
		            <p>Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. </p>
		        </div>
		        <div class="card__content">
		            <p>Minister: Sander van de Gevel<br><a href="mailto:ministerpresident@oeteldonk.org">ministerpresident@oeteldonk.org</a></p>
		        </div>
		    </div>
		</li>
		<li class="card card--label">
		    <figure class="card__image">
		        <div class="ratio:1:1">
		            <img src="https://placeimg.com/600/600/people" alt="" />
		        </div>
		        		    </figure>
		    <div class="card__body">
		        <div class="card__header">
		            <h2 class="heading:m">Ministerie van evenementen</h2>
		        </div>
		        <div class="card__content color:dark">
		            <p>Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten. </p>
		        </div>
		        <div class="card__content">
		            <p>Minister: Sander van de Gevel<br><a href="mailto:ministerpresident@oeteldonk.org">ministerpresident@oeteldonk.org</a></p>
		        </div>
		    </div>
		</li>
	</ul>
</div>
Pages
Default page

Title

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.

Markup
<h1 class="heading:xl color:goud text-align:center">Title</h1>
    <div class="font-size:l">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.</p>
Section page

Title

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.

Markup
<h1 class="heading:xl color:goud text-align:center">Title</h1>
    <div class="font-size:l">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
    <div class="full-width padding background:steen-lightest margin-top:1">
        <div class="stack stack--center">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor.</p>
        </div>
    </div>
Header page

Titel van het item met lange regel

subtitel

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

@TODO: Add a section header here

Markup
<h1 class="heading:xl color:goud text-align:center">Titel van het item met lange regel</h1>
	<h2 class="sub-heading heading:l  color:goud text-align:center">subtitel</h2>
    <div class="font-size:l stack text-align:center">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
    <div class="full-width padding background:steen-lightest margin-top:1">
        <div class="stack stack--center">
            <p>@TODO: Add a section header here</p>
        </div>
    </div>
Breadcrumbs
Breadcrumbs
Markup

	<nav class="breadcrumb-container" role="navigation" aria-label="Kruimelpad">
		<div class="stack stack--center padding-top:-1">
			<div class="wider">
				<ol class="mod-breadcrumbs breadcrumb">
					<li class="mod-breadcrumbs__divider float-left">
						<span class="divider fas fa-location" aria-hidden="true"></span>
					</li>
					<li class="mod-breadcrumbs__item breadcrumb-item">
						<a href="/" class="pathway"><span>Home</span></a>
					</li>
					<li class="mod-breadcrumbs__item breadcrumb-item">
						<a href="/lid-worden" class="pathway">
							<span>Lid worden</span>
						</a>
					</li>
					<li class="mod-breadcrumbs__item breadcrumb-item">
						<a href="/lid-worden/soorten-lidmaatschap" class="pathway">
							<span>Soorten lidmaatschap</span>
						</a>
					</li>
					<li class="mod-breadcrumbs__item breadcrumb-item active">
						<span>Moeraspachter</span>
					</li>
				</ol>
			</div>
		</div>
	</nav>