Ui kit

Settings

Here you can configure some base options to see how your UI kit will look with these values changed. 
v{ computedCss }
You will need to change these values in the variables.scss file.
Atoms Molecules Organisms

Colors

Corporate

Grijs 1
Grijs 2
Grijs 3
Grijs 4
Zwart
Accent

Info

Success

Error

Warning

Fonts

Heading 1 - 26

Heading 2 - 24

Heading 3 - 22

Heading 4 - 20

Heading 5 - 18
Heading 6 - 16

Text 1, all weights - 16

Text 4, all weights - 16

Typography

Dit is een voorbeeld van een list

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Dit is een voorbeeld van een toggle switch

Dit is een voorbeeld van een radio button

Buttons

Primary

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Secondary

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Ghost

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Primary

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Secondary

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Ghost

Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small
Button default Button medium Button small

Icon Buttons

Primary

Secondary

Ghost

Primary

Secondary

Ghost

Alerts

Info
Success
Error
Warning

Accordion

Heading van accordeon

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Badges

Badge Badge
K3 Maya de bij Nachtwacht Red Star Line Sneeuwwitje Bumba Kabouter Plop Samson & Marie Andere

Breadcrumbs

Menus

Modals

Open basic modal Open modal width icon Open modal width image Open modal width image horizontal

Modal heading

Augue et accumsan at commodo nulla nulla augue cras ante. Nulla elit lectus tincidunt malesuada tellus. Aliquet vel condimentum rhoncus pharetra vulputate.

Annuleren Bevestigen

Modal heading

Augue et accumsan at commodo nulla nulla augue cras ante. Nulla elit lectus tincidunt malesuada tellus. Aliquet vel condimentum rhoncus pharetra vulputate.

Annuleren Bevestigen

Modal heading

Annuleren Bevestigen

Modal heading

Augue et accumsan at commodo nulla nulla augue cras ante. Nulla elit lectus tincidunt malesuada tellus. Aliquet vel condimentum rhoncus pharetra vulputate.

Annuleren Bevestigen

Stepper

Stap 1
Heading
Stap 2
Heading
Stap 3
Heading
Stap 4
Heading
Stap 5
Heading

Tabs

Primary

Tab Tab Tab
Gebruikers Instellingen Lijst

Segment buttons

Primary

Label Label Label Label
Label Label Label Label

Upload field

Sleep je bestand naar hier of
klik om een bestand te kiezen

Text fields

Label inside

Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text
Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text
Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text

Label outside

Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text
Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text
Supporting text
Gelieve dit veld niet leeg te laten
Supporting text
Supporting text

Checkboxes

Toggle

Radio buttons

Video Responsive embed

Page jumper

1 2 3 4 5 ... 88

Form example

Form titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Maecenas sed diam eget risus varius blandit sit amet non magna.

Stap 1
Overzicht
Stap 2
Gegevens
Stap 3
Betalen
Persoonlijke gegevens
Let op: Veranderen van land kan de prijs en duur van de levering aanpassen.
Gelieve een geldig e-mailadres in te geven.
Niet beschikbaar
Factuuradres
Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Sleep je bestand naar hier of
klik om een bestand te kiezen

Dropdown menus

Cards

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Label
Heading

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Heading

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Heading

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Label
Heading

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Heading

Heading

Vel mattis ornare vestibulum ipsum tempus morbi. Tellus nisi aliquet mauris eget egestas sit quis ac elit.

Vestibulum tortor quam tortor.

Loaders

Default

Small

Overlay

Klantendienst

Hulp nodig?

Onze klantendienst staat van maandag-vrijdag voor je klaar tussen 10u-16u. Contacteer ons gerust.

Artiesten boeken

Boek jouw favoriete Studio 100 helden voor jouw evenement! Klik hier om naar het artiestenbureau te gaan en maak jouw feest onvergetelijk.

Skeleton loaders
















Column 1 Column 2 Column 3 Column 4