h1 tag
belangrijkste title in een pagina. Wordt slechts 1 keer gebruikt op een pagina.

typography

h2 tag
wordt veel gebruikt bij overzichtspagina's
Elke heading vanaf h2 is te gebruiken met de toevoeging class ( subheading )

h3 tag
h3 tags zijn geschikt om te gebruiken als hoogste niveau tussenkopjes in een tekst.

h4 tag

h5 tag

Heading

h6 tag

.excerpt

fotograaf

.lead

Aenean urna est, gravida gravida felis quis, finibus efficitur massa. Pellentesque eros lorem, luctus a eros ut, sollicitudin finibus quam. Nam non libero accumsan, tincidunt leo vel, dapibus lacus. Aenean suscipit tempor eros ut convallis. Vivamus cursus libero non tortor tincidunt, quis commodo ex mollis. Pellentesque in malesuada nunc. Integer pulvinar, mi eu posuere ornare, risus lectus congue massa, non egestas lacus enim vulputate augue. Praesent non vehicula felis, vitae porta tellus. Suspendisse lacinia diam eget sodales rhoncus. Aliquam eget pellentesque justo, et cursus augue. Cras ac finibus urna. Proin sit amet est in sapien euismod feugiat.Integer semper metus sed lacus finibus, porta tincidunt sem feugiat. Nam vitae porttitor velit. Suspendisse lorem augue, accumsan eu lobortis vitae, pretium vitae diam. Morbi quis elementum dolor. Nulla faucibus rhoncus ipsum. Ut eget malesuada erat, nec venenatis tellus. Proin volutpat tempor lacus, vel eleifend lorem consequat ut. Donec interdum vestibulum euismod. Sed consequat quam facilisis faucibus scelerisque. Proin rhoncus rhoncus arcu, non rutrum orci dictum vitae. Vestibulum at nulla a sem viverra dictum ut id orci. Integer facilisis pellentesque nulla in iaculis.

all paragraphs

Aenean urna est, gravida gravida felis quis, finibus efficitur massa. Pellentesque eros lorem, luctus a eros ut, sollicitudin finibus quam. Nam non libero accumsan, tincidunt leo vel, dapibus lacus. Aenean suscipit tempor eros ut convallis. Vivamus cursus libero non tortor tincidunt, quis commodo ex mollis. Pellentesque in malesuada nunc. Integer pulvinar, mi eu posuere ornare, risus lectus congue massa, non egestas lacus enim vulputate augue. Praesent non vehicula felis, vitae porta tellus. Suspendisse lacinia diam eget sodales rhoncus. Aliquam eget pellentesque justo, et cursus augue. Cras ac finibus urna. Proin sit amet est in sapien euismod feugiat.Integer semper metus sed lacus finibus, porta tincidunt sem feugiat. Nam vitae porttitor velit. Suspendisse lorem augue, accumsan eu lobortis vitae, pretium vitae diam. Morbi quis elementum dolor. Nulla faucibus rhoncus ipsum. Ut eget malesuada erat, nec venenatis tellus. Proin volutpat tempor lacus, vel eleifend lorem consequat ut. Donec interdum vestibulum euismod. Sed consequat quam facilisis faucibus scelerisque. Proin rhoncus rhoncus arcu, non rutrum orci dictum vitae. Vestibulum at nulla a sem viverra dictum ut id orci. Integer facilisis pellentesque nulla in iaculis.

all hyper links

Aenean urna est, gravida gravida

all blockquotes

Etiam vel maximus eros. Phasellus laoreet blandit dolor eget aliquam. Aenean feugiat in sem vel condimentum. Donec egestas tortor elit. Nam tincidunt euismod magna

icons
Voor de icons en welke classes je moet gebruiken, zie icon docs
De sizing van icons kan je beinvloeden met de font-size utility classes

.btn .btn-default

.btn .btn-primary

.card
Een card is een wrapper element voor content. Het heeft een bepaalde basis-styling en kan in meerdere variaties worden gebruikt door combo-classes.

.card
Het card element kan goed gebruikt worden voor het opbouwen van een team element.
‍
Voor de icons wordt font-awesome pro gebruikt.

Martijn de Boer

front end wizard

Who on earth can say meaningfull things about this. This is some text inside of a div block.

.media
Een media element is familie van een card maar in een minder uitgelichte variant. Media elementen heeft meerdere opties om met media om te gaan.

Unlike het card element gebruikt het media element css-grid. Hierdoor zijn media__object ( wrapper voor de media ) & media__content evenhoog, ook al staan de elementen onder elkaar. Als de content hoger is dan de hoogte van het media__object, groeit de media__content
‍
‍

Heading

Public support

.media .media--full .media-dark
‍

Bedenken

utilities‍
Als een element een kleine aanpassing nodig heeft in styling kan je hiervoor een globale utility class gebruiken. Dit voorkomt classes die nagenoeg hetzelfde doen en bereikt meer consistentie.

.text--white
.text--larger
.text--large

.form
.form-control
Een formulier heeft een class form. De formulier-velden heten form-control.

.form
.form-control--02
Een formulier heeft een class form. De formulier-velden heten form-control--02