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:
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.
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.<div class="stack">
<div>Example child</div>
<div>Example child</div>
<div>Example child</div>
</div>
Brings elements closer together
<div class="stack stack--scale:-2">
<div>Example child</div>
<div>Example child</div>
<div>Example child</div>
</div>
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.
<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>
Makes the element as wide as the $wider-width
variable. Use as child of a .stack.stack--center
container.
<div class="stack stack--center">
<div class="wider">...</div>
</div>
Makes the element as wide as the $site-width
variable. Use as child of a .stack.stack--center
container.
<div class="stack stack--center">
<div class="widest">...</div>
</div>
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.
<div class="stack stack--center">
<div class="full-width">...</div>
</div>
Centered container using the $content-width
variable.
<div class="center">...</div>
Centered container using the $content-width
variable.
<div class="center center--pull:right">...</div>
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.
<div class="grid">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>
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.
<div class="grid grid--size:s">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>
Stacked containers on a small screen and aligned when all children are at least $grid-item-width
wide.
<div class="switcher">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>
Stacked containers on a small screen and aligned in a 1/2 ratio when both children are at least $grid-item-width
wide.
<div class="switcher switcher--1:2">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>
Stacked containers on a small screen and aligned in a 2/1 ratio when both children are at least $grid-item-width
wide.
<div class="switcher switcher--2:1">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>
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
<div class="flag-object">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body element <br/> Multiline</div>
</div>
Add this modifier to vertically align all children on top instead of middle
<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>
Add this modifier to vertically align all children on bottom instead of middle
<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>
Add this modifier to keep everything aligned instead of stacked even on smaller screens
<div class="flag-object flag-object--nowrap">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body</div>
</div>
Add this modifier to get an inline-flex flag-object
<div class="flag-object flag-object--inline">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body</div>
</div>
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.
<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>
The first heading on a page should always be an
<h1>
with the
class heading:xl
.
Only one <h1>
per page is allowed.
<h2 class="heading:xl">Lorem ipsum dolor sit amet</h2>
@include heading("xl")
heading:xl
<h2 class="heading:xl-alt">Lorem ipsum dolor sit amet</h2>
@include heading("xl", false)
heading:xl-alt
<h2 class="heading:l color:goud">Lorem ipsum dolor sit amet</h2>
@include heading("l")
heading:l
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
@include heading("m")
heading:m
<h2 class="heading:m-alt">Lorem ipsum dolor sit amet</h2>
@include heading("m", false)
heading:m-alt
<h2 class="heading:s">Lorem ipsum dolor sit amet</h2>
@include heading("s")
heading:s
<h2 class="heading:s-alt">Lorem ipsum dolor sit amet</h2>
@include heading("s-alt")
heading:s-alt
<h2 class="heading:m-alt color:dark">Lorem ipsum dolor sit amet</h2>
heading:m-alt color:dark
01 january 2020
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
<p class="sub-heading font-size:xs">01 january 2020</p>
<p class="font-size:l">Lorem ipsum dolor sit amet</p>
font-size:l
<p class="font-size:s">Lorem ipsum dolor sit amet</p>
font-size:s
<p class="font-size:xs">Lorem ipsum dolor sit amet</p>
font-size:xs
<p class="">Lorem ipsum dolor sit amet</p>
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
font-weight:bold
<p class="font-style:italic">Lorem ipsum dolor sit amet</p>
font-style:italic
<p class="color:dark">Lorem ipsum dolor sit amet</p>
color:dark
<p class="background:type-alt">Lorem ipsum dolor sit amet</p>
background:type-alt
<p class="color:rood">Lorem ipsum dolor sit amet</p>
color:rood
<p class="color:rood font-size:l">Lorem ipsum dolor sit amet</p>
color:rood font-size:l
Lorem ipsum dolor sit amet
<p class="font-weight:normal">Lorem ipsum dolor sit amet</p>
font-weight:normal
Lorem ipsum dolor sit amet
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
font-weight:bold
Lorem ipsum dolor sit amet
<p class="font-weight:medium">Lorem ipsum dolor sit amet</p>
font-weight:medium
Lorem ipsum dolor sit amet
<p class="nowrap">Lorem ipsum dolor sit amet</p>
nowrap
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">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>
overflow:ellipsis
Only use the button class for actual <button>
or
<a>
elements.
<?php echo LayoutHelper::render('template.buttons.default', [
'type' => 'a',
'title' => 'Default button',
'titleHidden' => '',
'link' => '#',
'icon' => 'chevron-right',
'icon-position' => 'after',
'modifiers' => '',
]); ?>
<?php echo LayoutHelper::render('template.buttons.default', [
'type' => 'a',
'title' => 'Button with hidden title',
'titleHidden' => '1',
'link' => '#',
'icon' => 'chevron-right',
'icon-position' => 'after',
'modifiers' => '',
]); ?>
<?php echo LayoutHelper::render('template.buttons.default', [
'type' => 'a',
'title' => 'Default button',
'titleHidden' => '',
'link' => '#',
'icon' => 'chevron-left',
'icon-position' => 'before',
'modifiers' => '',
]); ?>
<?php echo LayoutHelper::render('template.buttons.default', [
'type' => 'a',
'title' => 'Button with hidden title',
'titleHidden' => '1',
'link' => '#',
'icon' => 'chevron-left',
'icon-position' => 'before',
'modifiers' => '',
]); ?>
<?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',
]
]); ?>
<?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',
]
]); ?>
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
<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>
<div class="card card--clean">
<div class="card__body">
<div class="card__content">
Clean card
</div>
</div>
</div>
When space is limited the image will stack on top of the rest automatically.
<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>
When space is limited the image will stack on top of the rest automatically.
<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>
When space is limited the image will stack on top of the rest automatically.
<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>
When space is limited the image will stack on top of the rest automatically.
<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>
<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>
<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>
<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>
<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>
card--stack
modifier <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>
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.
<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>
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.
<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>
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.
<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>
<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>
Each list should be an <ul></ul>
or
<ol></ol>
holding
<li></li>
elements.
<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>
<ul class="horizontal-list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<ul class="compact-horizontal-list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Starts as a vertical list but becomes a horizontal list from $content-width
breakpoint
<ul class="switch-list">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<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>
icon-round
Basic form elements to use.
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<?php echo LayoutHelper::render('template.molecules.link', [
'type' => 'a',
'title' => 'title',
'label' => 'label',
]); ?>
Some content
<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>
<?php echo LayoutHelper::render('template.molecules.label', [
'type' => 'span',
'title' => 'Label',
'icon' => '',
]); ?>
<?php echo LayoutHelper::render('template.molecules.label', [
'type' => 'span',
'title' => 'Label',
'icon' => 'arrow',
]); ?>
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
<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>
<figcaption class="credits">Photo credits</figcaption>
Header text
<?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',
]); ?>
<?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',
]); ?>
Description
<?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',
]
]
]); ?>
De keuze voor het ziekenhuis was snel gemaakt.
Ik ben op internet gaan zoeken. Externe link: Met link
<?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',
]
]
]); ?>
<?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',
]
]
]); ?>
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
.
Paginering
<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>
Classes that mostly do just one thing.
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-top:1
margin-top:2
padding
padding:-1
padding:-2
padding-vertical:1
padding-horizontal
padding-top:1
visually:hidden
display: block
overflow:hidden
visually:hidden
overflow:hidden
<div class="ratio:16:9">...</div>
ratio:16:9
<div class="ratio:5:2">...</div>
ratio:5:2
<div class="ratio:4:3">...</div>
ratio:4:3
<div class="radius:small">...</div>
radius:small
<div class="radius:large">...</div>
radius:large
Some examples
Fotograaf: Pim Geerts
<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>
When space is limited the image will stack on top of the rest automatically.
Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.
Minister: Sander van de Gevel
[email protected]
Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.
Minister: Sander van de Gevel
[email protected]
<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>
When space is limited the image will stack on top of the rest automatically.
Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.
Minister: Sander van de Gevel
[email protected]
Hierbij kan men denken aan zaken als huisvesting, statuten en externe contacten.
Minister: Sander van de Gevel
[email protected]
<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>
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.
<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>
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.
<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>
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
<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>
<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>