Style helper

Font family

font-pfont-s

Font weight

tx-ltx-rtx-mtx-b

Font size

tx-1tx-2tx-3tx-4tx-5tx-6tx-7tx-8tx-9tx-10tx-11tx-12tx-13tx-14tx-15tx-16tx-17tx-18tx-19tx-20

Text alignment

tx-al-c
tx-al-l
tx-al-r

Text transform

tx-italictx-uppercasetx-lowercasetx-shadow

Buttons

Each type has a different hover effect
btn btn--primary
btn btn--primary-inverted
btn btn--primary-opacity
btn btn--secondary
btn btn--secondary-inverted
btn btn--secondary-opacity
btn btn--cta
btn btn--cta-inverted
btn btn--cta-opacity
btn btn--tertiary
btn btn--tertiary-inverted
btn btn--tertiary-opacity
btn btn--primary-secondary
btn btn--primary-cta
btn btn--primary-tertiary
btn btn--secondary-primary
btn btn--secondary-cta
btn btn--secondary-tertiary
btn btn--cta-primary
btn btn--cta-secondary
btn btn--cta-tertiary
btn btn--tertiary-primary
btn btn--tertiary-secondary
btn btn--tertiary-cta
btn btn--primary-secondary-gradient
btn btn--primary-cta-gradient
btn btn--primary-tertiary-gradient
btn btn--secondary-primary-gradient
btn btn--secondary-cta-gradient
btn btn--secondary-tertiary-gradient
btn btn--cta-primary-gradient
btn btn--cta-secondary-gradient
btn btn--cta-tertiary-gradient
btn btn--tertiary-primary-gradient
btn btn--tertiary-secondary-gradient
btn btn--tertiary-cta-gradient
btn btn--light-opacity
btn btn--dark-opacity

Links

primary-linksecondary-linkcta-linktertiary-link

Colors

white-colorlighter-grey-colorlight-grey-colorgrey-colordark-grey-colordarker-grey-colorblack-colorprimary-colorsecondary-colorcta-colortertiary-color

Backgrounds

light-opacity-backgrounddark-opacity-backgroundprimary-opacity-backgroundsecondary-opacity-backgroundcta-opacity-backgroundtertiary-opacity-backgroundprimary-darker-opacity-backgroundsecondary-darker-opacity-backgroundcta-darker-opacity-backgroundtertiary-darker-opacity-backgroundwhite-backgroundlighter-grey-backgroundlight-grey-backgroundgrey-backgrounddark-grey-backgrounddarker-grey-backgroundblack-backgroundprimary-backgroundsecondary-backgroundcta-backgroundtertiary-background

Grid

There are two types of grids, the grid and the grid-x.

grid combained with other classes determins layout on mobile, ipad and desktop.

grid-x devides the space in 12 columns, each child can get a class to define the space it takes.

with an extra class you can define the gap between cells.

grid

grid.per-row-1

cell

grid.per-row-2

cell
cell

grid.per-row-3

cell
cell
cell

grid.per-row-1-2 (1 mobile 2 desktop)

cell
cell

grid.per-row-1-3 (1 mobile 3 desktop)

cell
cell
cell

grid.per-row-2-4 (2 mobile 4 desktop)

cell
cell
cell
cell

grid.per-row-1-2-2 (1 mobile 2 ipad 2 desktop)

cell
cell

grid.per-row-1-2-3 (1 mobile 2 ipad 3 desktop)

cell
cell
cell

grid.per-row-1-2-4 (1 mobile 2 ipad 4 desktop)

cell
cell
cell
cell

grid.per-row-1-3-3 (1 mobile 3 ipad 3 desktop)

cell
cell
cell

grid.per-row-1-3-6 (1 mobile 3 ipad 6 desktop)

cell
cell
cell
cell
cell
cell

grid-x

From mobile and up

span-1
span-2
span-3
span-4
span-5
span-6
span-7
span-8
span-9
span-10
span-11
span-12

From ipad and up

md-span-1
md-span-2
md-span-3
md-span-4
md-span-5
md-span-6
md-span-7
md-span-8
md-span-9
md-span-10
md-span-11
md-span-12

From desktop and up

lg-span-1
lg-span-2
lg-span-3
lg-span-4
lg-span-5
lg-span-6
lg-span-7
lg-span-8
lg-span-9
lg-span-10
lg-span-11
lg-span-12

gap-0 (no gap)

span-6
span-6

gap-0-5 (0.5rem)

span-6
span-6

gap-1 (1rem)

span-6
span-6

gap-1-5 (1.5rem)

span-6
span-6

gap-2 (2rem)

span-6
span-6

Containers

small-container
medium-container
large-container
xl-container
full-container
Deze website maakt gebruik van cookies
We gebruiken cookies om onze diensten te verlenen en voor analyse en marketing. Raadpleeg ons privacybeleid voor meer informatie over ons gebruik van cookies. Door verder gebruik van onze website te maken, gaat u akkoord met ons gebruik van cookies.