Cut the
Codebase ©

We use Cut the Base for consistency, efficiency and optimization when building our Webflow websites. Please read this documentation thoroughly to understand how we work and why we work this way.

globals

Colors

Brand colors used for the web

.background--white
.background--black
.background--purple
.background--orange
.background--yellow
.background--green

Opacity

.opacity--10
.opacity--20
.opacity--30
.opacity--40
.opacity--50
.opacity--60
.opacity--70
.opacity--80
.opacity--90
typography

Headings

Default heading 1 to 6

H1--80px

Global heading one

H2--64px

Global heading two

H3--56px

Global heading three

H4--48px

Global heading four

H5--32px
Global heading five
H6--24px
Global heading six

Overridden heading sizes

.heading--huge

Huge

.heading--large

Large

.heading--medium

Medium

.heading--small

Global heading four

Other html tags

Paragraph

In presentations, you often require 'dummy text' to fill out the places where actual text will go once the money men buy it from some other overpriced consultant. Historically, this dummy text is a block of fake latin boilerplate that begins with 'Lorem Ipsum'. It fills up the space with sentences and paragraphs, but it's been used so long by so many that - like banner ads and tv commercials - people just gloss over it without paying any attention to the contents. Herein lies your opportunity to subvert the timeless standard.

Links
Text Link

Text sizes

.text-size--xxlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--large
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--medium)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--small
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xsmall
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text weights

.text-weight--normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight--bold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text styles

.text-style--link
Text Link
.text-style--italic
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--strikethrough
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--allcaps
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-style--subheading
Subheading
.text-style--nowrap
This text doesn't wrap
.text-style--1line

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

.text-style--2lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

.text-style--3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare, est laoreet auctor aliquam, turpis risus gravida est, et tempor nulla sapien pretium neque. Suspendisse ultrices molestie ornare. Duis ipsum est, posuere at quam et, efficitur dignissim turpis. Pellentesque ultrices consequat felis eget pellentesque. Duis tincidunt sapien mi, eget facilisis lacus hendrerit non. Quisque non nulla tellus. Quisque eget sem id felis cursus commodo. Nam dignissim erat a tristique maximus.

Text colors

.text-color--white
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color--custom01
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color--custom02
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color--custom03
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Text alignment

.text-align--left
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align--center
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align--right
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

Rich text styling

These elements are styled separately when nested under the class  .text--rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a link inside of a rich text element

  • List item 1
  • List item 2
  • List item 3
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
This is an image caption
Elements

Buttons

Normal buttons
Dit is een button
Dit is een button
dezetetsdfdsf
Arrow buttons
Dit is een button
Dit is een button
Dit is een button
Ghost buttons
Dit is een button
Dit is een button

Form elements

Bedankt, we hebben je inzending ontvangen!
Er ging iets mis tijdens het verzenden van het formulier. Probeer het opnieuw.

Accordion

Custom code included for auto open & close (in site settings)

Accordion header

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.

Accordion header

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.

spacing

Containers

.container--large | 128rem
.container--medium | 120rem
.container--small | 96rem
.container--xsmall | 72rem

Max widths

.max-width--240
.max-width--320
.max-width--480
.max-width--640
.max-width--720
.max-width--800
.max-width--880
.max-width--960

Margin

.margin--0
.margin--4
.margin--8
.margin--16
.margin--24
.margin--32
.margin--48
.margin--56
.margin--64
.margin--80
.margin--96
.margin--104
.margin--120
.margin--160
.margin--192
.margin--custom01
.margin--custom02
.margin--custom03

Padding

.padding--0
.padding--4
.padding--8
.padding--16
.padding--24
.padding--32
.padding--48
.padding--56
.padding--64
.padding--80
.padding--96
.padding--104
.padding--120
.padding--160
.padding--192
.padding--custom01
.padding--custom02
.padding--custom03

Swiper Slider

Marlin Mastenbroek

Als je kennis hebt van de online wereld, en je op de juiste manier een doelgroep zo weet te bedienen dat je een volledig ‘ mannenplatform’ uit het niets opbouwt, weet je wat je doet.Harde werker, niet te beroerd om zelf de mouwen op te stropen. Ondernemer, slim, capabel. ‘Oud’ genoeg om te weten hoe de wereld van media werkt, hoe hierin te bewegen en overeind te blijven.Jong genoeg om de nieuwe generatie te vinden en vast te houden. Laveren tussen traditionele media en digitale initiatieven en trends is een grote uitdaging tegenwoordig, maar aan Jay Jay Boske heb je wat dat betreft een goede partner.

Leo (Bizzey)

Eerlijk en transparant, what you see is what you get. Jay-Jay is iemand die durft te dromen en begrijpt dat alles binnen handbereik is, met dedication en hard werk. Iemand die kan doorpakken bij verlies en kan groeien bij winst! Jay-Jay Boske de zakelijke topsporter

Marloes Coenen

Jay-Jay belichaamt nog altijd de mentaliteit van een topsporter. Eentje die alles heeft gezien en doordrongen is van waarde van een team. Ik waardeer zijn echtheid, zijn fanatisme en bovenal zijn grote hart. Plus, ik lach mij altijd kapot met hem.

René van der Zel

Ik ken Jay-Jay nu al een aantal jaren, we zijn met elkaar in contact gekomen voor een “Selfmade” aflevering op het DAY1 Youtube kanaal. Vanaf het eerste moment hadden we direct een goede klik. Jay-Jay is ongecompliceerd, super creatief, betrouwbaar en bovenal loyaal. Zo ben ik zelf ook en dat is ook de reden dat we samen zijn gaan ondernemen en XONE, de supplementenlijn voor topsporters zijn begonnen. Samengevat: Ik vind Jay-Jay een fijne en eerlijke vent. Ja is ja en Nee is Nee. Zo simpel is het.

Selwyn Senatori

Man wat werk ik graag samen met deze beuker. Dit komt onder andere door zijn extreme leergierige en onbevangen houding. Als je met Jay-Jay een project start ga je op ontdekkingsreis, die meestal eindigd met een “YOO WTF!“ of een “Lekker man! Hebben we toch geflikt!“. Jay-Jay is snel, en modieus, kaal en gevat en groot in ambitie en sterk als espresso.

Dylan Haegens

Jay-Jay is een enthousiaste creatieveling, die je direct energie geeft. Hij en zijn team zijn zeer professioneel en ook nog eens gezellig! Dat waarderen wij hier in Limburg wel. Mocht je ooit met Jay-Jay samen gaan werken, dan weet je dat je kwaliteit krijgt en wellicht een nieuwe vriendschap.

Frans Duijts

Het is altijd fijn om met Jay-Jay samen te werken. Deze man heeft en geeft zoveel energie! En heeft verstand van zaken. Wat je moet weten als je gaat samenwerken met Jay-Jay is dat hij je in een positieve flow brengt en daar ben je niet zomaar uit!