Colors

Background colors

base

bg-lighter

bg-light

bg-base

bg-dark

bg-darker

primary

BGP-Lighter

bgp-light

bgp-base

bgp-dark

bgp-darker

Secondary

BGs-Lighter

bgs-light

bgs-base

bgs-dark

bgs-darker

tertiary

Bgt-Lighter

bgt-light

bgt-base

bgt-dark

bgt-darker

extra

Bg-white

bg-black

system

bg-succes

bg-warning

bg-error

bg-neutral

Gradients

Black

bg-grad

bg-grad-dark

bg-grad-darker

bg-grad-misc

Filters

invert

invert

Backdrop filters

Blur

backdrop-blur-sm

backdrop-blur

backdrop-md

backdrop-lg

Drop shadow

Blur

drop-shadow-sm

drop-shadow

drop-shadow-md

drop-shadow-lg

drop-shadow-xl

drop-shadow-2xl

Typography

Colors

Base

Aa

#000000
text-lighter

Aa

#e5e7eb
text-light

Aa

Open Sans
text-base

Aa

Open Sans
text-dark

Aa

Open Sans
text-darker
colored

Aa

text-primary

Aa

text-secondary

Aa

text-error

Aa

text-warning

Aa

text-succes

Headings

The quick brown fox jumps over the lazy dog

H1 - 36PX / 5REM - sfizia

The quick brown fox jumps over the lazy dog

H2 - 28PX / 1.3EM - sfizia

The quick brown fox jumps over the lazy dog

H3 - 24PX / 1.3EM - sfizia

The quick brown fox jumps over the lazy dog

H4 - 20PX / 1.3EM - sfizia
The quick brown fox jumps over the lazy dog
H5 - 24PX / 1.3EM - sfizia

Text size

12 px /0,75r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-xxs
14p / 1,12r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

font-xs
16px / 1r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-s
18p / 1,12r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

font-m
20p / 1,25r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

font-l
24p / 1,5r

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

font-xl
32p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum.

font-2xl
40p

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

font-3xl
56p

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

font-4xl
72p

Lorem ipsum dolor sit amet, consectetur.

font-5xl
90p

Lorem ipsum dolor sit amet.

font-6xl

Styles

Tagline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

text-tagline
Marked text
pill
font-marked
pill + icon
pilltarget icon
label
link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

text-link
no wrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros gg

text-no-wrap

Size

ch max 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-ch-max10
ch max 25

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-ch-max25
ch max50

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

text-ch-max50

Align

left

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-left
Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-center
Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-right

Text shadow

Light (25)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-light
base (50)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow
Dark (75)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-dark
Darker (100)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-shadow-darker

Icons

Sizes
icon-xs
icon-s
Icon-m
icon-l
icon-xl

UI

Social

Buttons

Base
btn
btn, -outline
btn, -txt
Primary
btn, sec
btn, -outline
btn, -txt
black
btn, -black
btn, -black, -outline
btn, -black, -text
white
btn, -white
btn, -white, -outline
btn, -white, -text
Link block
btn-menu
socials
socials

Elements

Card
Card -white
Card
Card
Card
Divider
divider
light divider
divider -light

form

Page wrapper
form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sizing

width x height, px

10x10
wh-10
15x15
wh-20
50x50
wh-50
100x100
wh-100

width x height, %

100%x1oo%
wh-100pct
100%x100%
wh-100-cover

width, px

10
w-10
20
w-20
40
w-40
50
w-50
100
w-100

width, vw

5
w-5vw
10
w-10vw
20
w-20vw
25
w-20vw
40
w-40vw
50
w-50vw
60
w-60vw
75
w-75vw
80
w-80vw
100
w-100vw

Height

10
h-10
20
h-20
40
h-40
50
h-50
100
h-100

height, vh

5
h-5vh
10
h-10vh
20
h-20vh
25
h-25vh
40
h-40vh
50
h-50vh
60
h-60vh
75
h-75vh
80
h-80vh
100
h-100vh

Spacing

Padding

0,625REM
10 px
p-2.5
px-2.5
py-2.5
pt-2.5
pr-2.5
pb-2.5
pl-2.5
1.5REM
20 px
p-5
px-5
py-5
pt-5
pr-5
pb-5
pl-5
2.5REM
40 px
p-10
px-10
py-10
pt-10
pr-10
pb-10
pl-10
2.5REM
40 px
p-10vh
px-10vh
py-10vh
pt-10vh
pr-10vh
pb-10vh
pl-10

Margin

0,625REM
10 px
m-2.5
mx-2.5
my-2.5
mt-2.5
mr-2.5
mb-2.5
ml-2.5
1.5REM
20 px
m-5
mx-5
my-5
mt-5
mr-5
mb-5
ml-5
2.5REM
40 px
m-10
mx-10
my-10
mt-10
mr-10
mb-10
ml-10

Flexbox

Vertical

First, name the direction. (top, mid or bot (bottom)
Then, name if it is left, c (centered) or right.
flex-verti_top_left
verti_top_c
flex-verti_top_right
flex-verti_c_left
flex-verti_cc
verti-c-right
flex-verti-bot-left
flex-verti_bot_c
flex-verti-bot-right

Horizontal

First, name the direction. (top, mid or bot (bottom)
Then, name if it is left, c (centered) or right.
flex-horiz_c_left
flex-horiz_cc
flex-horiz_c_right
flex-horiz-dist-full
flex-horiz-dist

position

z index

Absolute layers

opacity

20
20
40
50
80
100

Structure

Blocks

section
container
section

Grid

Container-grid
content-grid
Section-grid

FB + Col

columns

Columns-1
Columns-2
Columns-2
Columns-3
Columns-3
Columns-3
Columns-4
Columns-4
Columns-4
Columns-4
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5
Columns-5

Responsiveness

hide-ipad-down
hide-ls-down
hide-ipad-down

prefab

Waar wacht je op?

Begin aan een reis van
digitale groei.

Partners

,Vertrouwd. door onze partners...

Diensten

Dit is hoe we impact, maken voor jou.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo

Onze resultaten, in nummers

target icon

+ 23%

Kwalitatieve leads

groei

+ 275%

analysis

+92

Verkoop per dag

Data-flow

+19

Verbindingen

Fluent data illustration with 3 nodes

+ 542

results

Aanpakken!

Waar wacht je nog op? Begin nu je bedrijf te verbeteren.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

Diensten

Dit is hoe we impact, maken voor jou.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Blog

Recente updates.

No items found.
Blog artikel

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Service in deze blog:

Button Text
Blog

Recente updates.

No items found.