Atoms Molecules Organisms Icons Installatie

Logos

Colors

Corporate

Grijs 1
Grijs 2
Grijs 3
Grijs 4
Zwart
Accent

Theater colors

Theater 1
Theater 2
Theater 3
Gold

Kids colors

Licht groen 1
Licht groen 2
groen
Donker groen 1
Donker groen 2
Licht blauw 1
Licht blauw 2
blauw
Donker blauw 1
Donker blauw 2
Licht roze 1
Licht roze 2
roze
Donker roze 1
Donker roze 2
Licht rood 1
Licht rood 2
rood
Donker rood 1
Donker rood 2
Licht paars 1
Licht paars 2
paars
Donker paars 1
Donker paars 2
Licht aqua 1
Licht aqua 2
aqua
Donker aqua 1
Donker aqua 2
Licht oranje 1
Licht oranje 2
oranje
Donker oranje 1
Donker oranje 2
Licht geel 1
Licht geel 2
geel
Donker geel 1
Donker geel 2

Info

Success

Error

Warning

Fonts

Heading 1 - Jakarta Sans, ExtraBold - 32

Heading 2 - Jakarta Sans, ExtraBold - 26

Heading 3 - Jakarta Sans, ExtraBold - 24

Heading 4 - Jakarta Sans, ExtraBold - 20

Heading 5 - Jakarta Sans, ExtraBold - 18
Heading 6 - Jakarta Sans, ExtraBold - 16

Text 1 - Manrope, all weights - 22

Text 4 - Manrope, 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 list met decoratie

  • 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

Section heading - 32

Ervaar de magie van onze waanzinnige familieshows en theaterproducties! Koop hier je tickets en geniet van betoverende momenten.

Button

Card heading - 26

Ervaar de magie van onze waanzinnige familieshows en theaterproducties! Koop hier je tickets en geniet van betoverende momenten.

Button

Modal heading - 24

Ervaar de magie van onze waanzinnige familieshows en theaterproducties! Koop hier je tickets en geniet van betoverende momenten.

Button

Sections

  Default section spacing
  use class: section
  Small section spacing
  use class: section section--padding-top-sm section--padding-bottom-sm
  Medium section spacing
  use class: section section--padding-top-md section--padding-bottom-md
  Large section spacing
  use class: section section--padding-top-lg section--padding-bottom-lg

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

Floating Buttons

Social Buttons

Poster Buttons

Gert & James Zomerreveu
Gert & James Zomerreveu
Gert & James Zomerreveu

Kleurplaten

Gert & James Zomerreveu
Downloaden

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

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.

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

News & win

Nieuws
14-18

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24
Nieuws
14-18

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24
14-18

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24
K3

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24
K3

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24
14-18

Repetities van nieuwe sprookjesmusical sneeuwwitje in volle gang!

05 jun '24

Segment buttons

Primary

Label Label Label Label
Label Label Label Label

Stepper

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

Tabs

Primary

Tab Tab Tab
Tab Tab Tab

Upload field

Of sleep je bestand in dit kader
Of sleep je bestand in dit kader
Bestand aan het uploaden...
Je bestand Bestandsnaam.pdf is geüpload.
Bestandstype .heic wordt niet ondersteund. Probeer opnieuw

Text fields

Label inside

Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text

Label outside

Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text
Supporting text

Checkboxes

Toggle

Radio buttons

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.

Form example

Stap 1
Overzicht
Stap 2
Gegevens
Stap 3
Betalen

Form titel

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
Of sleep je bestand in dit kader

Dropdown menus

Navigation

Navigatie

Header

NL

Image Buttons

Onze Sterren
Onze Sterren
Onze Shows
Onze Shows
Shop
Shop
Win
Win
Fun
Fun

Top variants

Fun
Top 1
Fun
Top 2
Fun
Top 3
Fun
Top 4

Bottom variants

Fun
Bottom 1
Fun
Bottom 2
Fun
Bottom 3
Fun
Bottom 4

Big news article

Gert en James veroveren alle harten aan zee
10 Om Te Zien
Gert en James veroveren alle harten aan zee
Na de geslaagde première van de Gert & James ZomerRevue op 21 juli, gaat het hard voor beide heren en hun sidekicks Karen Damen, Ruth Beeckmans, Ianthe Tavernier en Michiel De Meyer! Al meer dan 10.000 tickets vlogen de deur uit! Daarom kondigen ze nog 3 extra shows aan op 15,16 en 17 augustus. Deze wervelende glamoureuze show met live muziek, hilarische sketches en een groots ensemble is duidelijk een publiekslieveling.
29 jul ‘24

Top Footer

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.

Heading

Blijf op de hoogte van ons laatste nieuws!

Schrijf je in voor onze wekelijkse nieuwsbrief en blijf op de hoogte van de laatste nieuwtjes, acties en wedstrijden.

Icons

icon-bag
icon-bowl
icon-digital
icon-ferris-wheel
icon-food
icon-help
icon-knife-fork
icon-micro
icon-music
icon-notepad
icon-onesies
icon-orange
icon-rollerskates
icon-socials
icon-star-outlined
icon-switch-button
icon-t-shirt
icon-thumbs-up
icon-tv
icon-website
icon-deezer
icon-youtube-music
icon-marker
icon-external-link
icon-studio100-go
icon-x
icon-apple-music
icon-delete
icon-umbrella
icon-minus
icon-file
icon-circle
icon-clock
icon-right-filled
icon-bottom-filled
icon-left-filled
icon-top-filled
icon-close-circle
icon-mute
icon-pause
icon-play
icon-unmute
icon-eye
icon-menu-vertical
icon-youtube
icon-instagram
icon-mail
icon-messenger
icon-whatsapp
icon-facebook
icon-linkedin
icon-spotify
icon-tiktok
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-briefcase
icon-check-small
icon-check
icon-close-small
icon-close
icon-down
icon-entertainment
icon-filter
icon-headset-one
icon-left
icon-phone-outgoing
icon-plus
icon-right
icon-search
icon-logo
icon-logo-light
icon-star
icon-info-circle
icon-warning-circle
icon-error-circle
icon-success-circle

Installatie

Om de UI-kit te installeren, moet je de bijbehorende CSS- en JavaScript-bestanden in je project laden.