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
Color
Typography
Buttons
Cards
Lists
Icons
Form
Components
Utilities
Examples

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

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

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

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

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.

...

Stack center > widest

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

...

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.

...

Center

Centered container using the $content-width variable.

...

Center, pull:right

Centered container using the $content-width variable.

...

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

Markup

<div class="grid">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</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

Markup

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

Switcher

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

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

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

Markup

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

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

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

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

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

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

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

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

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

Heading XL - Bold

Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Heading L

Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Heading M

Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Heading M - Regular

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Heading S

Bitter: Italic light 300

Lorem ipsum dolor sit amet

Heading S

Bitter: Italic light 300

Lorem ipsum dolor sit amet

Heading M - Regular - Donker op wit

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

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

Font size S

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Font size XS

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Body text

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Body text - bold

Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Body text - italic

Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Body text - Donker op wit

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Body text - Wit op donker

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Call to action

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Call to action - large

Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Weight

Weight normal

Puts text in normal weight

Lorem ipsum dolor sit amet

Weight bold

Puts text in bold weight

Lorem ipsum dolor sit amet

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

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

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>

Buttons

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

Button (with arrow right)

Default button

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'titleHidden' => '',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => '',
]); ?>

Button with hidden title (with arrow right)

Button with hidden title

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'titleHidden' => '1',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => '',
]); ?>

Button (with arrow left)

Default button

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'titleHidden' => '',
    'link' => '#',
    'icon' => 'chevron-left',
    'icon-position' => 'before',
    'modifiers' => '',
]); ?>

Button with hidden title (with arrow left)

Button with hidden title

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'titleHidden' => '1',
    'link' => '#',
    'icon' => 'chevron-left',
    'icon-position' => 'before',
    'modifiers' => '',
]); ?>

Small Button (with arrow right)

Default button

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Default button',
    'titleHidden' => '',
    'link' => '#',
    'icon' => 'chevron-right',
    'icon-position' => 'after',
    'modifiers' => [
        '0' => 'small-with-text',
    ]
]); ?>

Small Button with hidden title (with arrow right)

Button with hidden title

jLayout

<?php echo LayoutHelper::render('template.buttons.default', [
    'type' => 'a',
    'title' => 'Button with hidden title',
    'titleHidden' => '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

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

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.

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.

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

Twitter

RSS

Media

Cloud Download

Google Podcast

Podcast

Spotify

Misc

Image

Lock

Newspaper

Mobile

Phone

Quote

Quote large

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 0 1 12 0v3h.75A2.25 2.25 0 0 1 21 11.25v10.5A2.25 2.25 0 0 1 18.75 24H5.25A2.25 2.25 0 0 1 3 21.75v-10.5A2.25 2.25 0 0 1 5.25 9H6zm12.75 1.5H5.25a.75.75 0 0 0-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-10.5a.75.75 0 0 0-.75-.75zm-7.5 4.5v3a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-1.5 0zm5.25-6V6a4.5 4.5 0 0 0-9 0v3h9z"/></svg></span>

Form

Basic form elements to use.

Form field

Field label

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

Field label

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

Field label

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

Option 1

Option 2

Option 3

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

Option 1

Option 2

Option 3

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

Label

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

Field label 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

Default link with an optional label if the link is going to an external website.

title label

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 0 0-.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 0 1-.948 1.167 4.455 4.455 0 0 1-1.901.9 6.1 6.1 0 0 1-1.528.125c-.985-.03-1.968-.263-2.811-.764a4.87 4.87 0 0 1-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 0 0-.074 1.79 2.46 2.46 0 0 1 .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 0 1-.948 1.167 4.42 4.42 0 0 1-1.762.868 6.317 6.317 0 0 1-1.782.153c-.829-.038-1.653-.22-2.394-.594a4.952 4.952 0 0 1-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 0 0-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 0 0 1.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 0 0-.82.048 1.799 1.799 0 0 0-.369.117l-.81.339-.027-.885c-.03-1.01.04-1.999.281-2.964a7.18 7.18 0 0 1 1.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 0 0-1.377 2.587 11.4 11.4 0 0 0-.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 0 0 1.859 1.4c.82.33 1.735.427 2.602.36.61-.047 1.224-.196 1.766-.492a3.353 3.353 0 0 0 1.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 0 0-.877-.896c-.414-.25-.904-.36-1.391-.37a3.943 3.943 0 0 0-.82.048l-.066.014a1.886 1.886 0 0 0-.302.103l-.807.337-.031-.881c-.038-1.145.062-2.289.395-3.376a6.943 6.943 0 0 1 1.014-2.065A9.153 9.153 0 0 1 7.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>

<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 0 0-.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 0 1-.948 1.167 4.455 4.455 0 0 1-1.901.9 6.1 6.1 0 0 1-1.528.125c-.985-.03-1.968-.263-2.811-.764a4.87 4.87 0 0 1-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 0 0-.074 1.79 2.46 2.46 0 0 1 .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 0 1-.948 1.167 4.42 4.42 0 0 1-1.762.868 6.317 6.317 0 0 1-1.782.153c-.829-.038-1.653-.22-2.394-.594a4.952 4.952 0 0 1-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 0 0-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 0 0 1.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 0 0-.82.048 1.799 1.799 0 0 0-.369.117l-.81.339-.027-.885c-.03-1.01.04-1.999.281-2.964a7.18 7.18 0 0 1 1.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 0 0-1.377 2.587 11.4 11.4 0 0 0-.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 0 0 1.859 1.4c.82.33 1.735.427 2.602.36.61-.047 1.224-.196 1.766-.492a3.353 3.353 0 0 0 1.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 0 0-.877-.896c-.414-.25-.904-.36-1.391-.37a3.943 3.943 0 0 0-.82.048l-.066.014a1.886 1.886 0 0 0-.302.103l-.807.337-.031-.881c-.038-1.145.062-2.289.395-3.376a6.943 6.943 0 0 1 1.014-2.065A9.153 9.153 0 0 1 7.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

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

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.

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

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

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 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.

Knop

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>

<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

margin-top:2

Sets a larger responsive (scale 2) margin on the top of an element

Padding

padding

Sets a responsive (scale 0) padding on all sides of an element

padding:-1

Sets a responsive (scale -1) padding on all sides of an element

padding:-2

Sets a responsive (scale -2) padding on all sides of an element

padding-vertical:1

Sets a default responsive (scale 1) padding on top/bottom of an element

padding-horizontal

Sets a default responsive (scale 0) padding on right/left of an element

padding-top:1

Sets a default responsive (scale 1) padding on top of an element

Display

wrapper

Making sure you can wrap stuff in a block level element without us ing a class-less div

block-wrapper

All direct children of this element will get display: block

Visibility

visually:hidden

Hides an element visually while keeping it readable for screenreaders and search engines

overflow:hidden

Hides overflowing content

Ratio blocks

Need a steady ratio block for content, images, etc.?

Ratio 16:9

...

Ratio 5:2

...

Ratio 4:3

...

Radius

Radius small

Gives an element a small radius

...

Radius large

Gives an element a large radius

...

Examples

Some examples

Cards

Card with contained image

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
[email protected]
Ministerie van evenementen

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

Minister: Sander van de Gevel
[email protected]

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>

<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:[email protected]">[email protected]</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:[email protected]">[email protected]</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
[email protected]
Ministerie van evenementen

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

Minister: Sander van de Gevel
[email protected]

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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

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

@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

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>