Cut the
Codebase ©

We use Cut the Base for consistency, efficiency and optimization when building our Weblow 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

.bg--white
.bg--black
.bg--pink
.bg--orange
.bg--yellow
.bg--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

Global heading one

H2

Global heading two

H3

Global heading three

H4

Global heading four

H5
Global heading five
H6
Global heading six

Overridden heading sizes

*Use maximum 6 overhidden heading sizes for each project for consistency

.heading--270

Heading 270

.heading--144

Heading 144

.heading--120

Heading 120

.heading--104

Heading 104

.heading--96

Heading 96

.heading--88

Heading 88

.heading--80

Heading 80

.heading--72

Heading 72

.heading--64

Heading 64

.heading--56

Heading 56

.heading--48

Heading 48

.heading--40

Heading 40

.heading--32

Heading 32

.heading--24
Heading 24
.heading--20
Heading 20
.heading--18
Heading 18
.heading--16
Heading 16

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
Ghost buttons
Dit is een button
Triangle buttons
arrow right

ontdek
deze vegstar

arrow right

ontdek
deze vegstar

arrow right

ontdek
deze vegstar

arrow right

ontdek
deze vegstar

Play button

video
afspelen

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.

Classes

Custom classes

Class

What it does

.hide
Hide an element
.is--d-visible
Is displayed on desktop
.is--d-hidden
Is displayed from tablet and down
.is--t-visible
Is hidden from tablet and down
.is--t-hidden
Is hidden from tablet and down
.is--l-visible
Is displayed from landscape mobile and down
.is--l-hidden
Is hidden from landscape mobile and down
.is--p-visible
Is displayed from portrait mobile and down
.is--p-hidden
Is hidden from portrait mobile and down
.overflow--auto
Only displays a scrollbar when content overflows
.overflow--hidden
Hides overflowing content without adding a spacebar
.overflow--scroll
Always displays a scrollbar for overflowing content
.position--relative
Set element position to relative
.position--absolute
Set element position to absolute
.z-index--1
Position element in front of other elements with z-index 1
.z-index--2
Position element in front of other elements with z-index 2
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