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

.background--white
.background--dark-sea-green
.background--sea-green
.background--light-sea-green
.background--sky-blue
.background--alice-blue
.background--bright-orange
.background--pale-sun

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--104px

Global heading one

H2--56px

Global heading two

H3--40px

Global heading three

H4--32px

Global heading four

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

Overridden heading sizes

.heading--huge (144px)

Huge

.heading--xlarge (96px)

Heading Xlarge

.heading--large (72px)

Heading Large

.heading--medium (56px)

Heading Medium

.heading--small (28px)

Heading Small

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.

Text sizes

.text-size--xxlarge (40px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xlarge (32px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--large (24px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--medium (20px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--small (16px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xsmall (14px)
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size--xxsmall (12px)
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-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

Form elements

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

Accordion

Swiper Slider

Sol de Ibiza Sol de Ibiza natuurlijke beschermende lippenbalsem SPF15

Zonnenlippenbalm

Sol de Ibiza Sol de Ibiza beschermende en herstellende zonneolie SPF15 - 100ml

Mondspoeling – Kokosnootolie

Deocrème Touch Green – Anti-transpirant

Tandpasta – Kokosnootolie – Spearmint

Shampoo & Conditioner bars – 2 in 1 – Green Touch

Banbu Bestekset

Banbu Shampoobar

Banbu scheerset hout

Banbu Zeephouder

Luchtreiniger - Houtskool

Wasbare reinigingspads

Lunchbox - RVS

Thermosfles - RVS

Sneldrogende handdoek

Scheermes - RVS

Wasbare babydoekjes

Haarborstel

Bijenwas foodwraps

Merula One Size - Fox

Merula Eco Cup - Strawberry

Merula One Size - Galaxy

Merula Eco cup - Ice

Reinigingsdoekjes voor menstruatiecups

Merula douche

Merulacup XL - Midnight

Magnetron Reiniger voor Menstruatiecup

Hand, body & soapbar - Purity - Houtskool

Shampoo bar - Pink -Pioenroosgeur

Conditioner - No knots

Zeephouder - Loofah

Conditioner – Hair candy

Shampoo bar - Grandma Said - Brandnetel

Shampoo bar - Exotic - Eucalyptus & vanille

Shampoo bar - Balance - Munt

Hand, body & soapbar - 20 Seconds - Citrus

Gecomprimeerde doekjes - 150 stuks

Gecomprimeerde babydoekjes - 100 stuks

Duurzaam & Compact

Gecomprimeerde doekjes - 250

Gecomprimeerde babydoekjes - 50 stuks

Gecomprimeerde doekjes - Aluminium buis

Gecomprimeerde babydoekjes – 12 tabletten

Tandenborstel - Houtskool

Tandenborstel - Grijs

Tandenborstel - Groen

Tandenborstel - Oranje

Tandenborstel - Blauw

Tandenborstel - Rood

Kindertandenborstel - Verschillende kleuren

Flosdraad - Vegan

Tandenborstel - Wit

Bio - Nachtverband met vleugels

Cotton - Nachtverband

Tampons - mini

Bio - Maandverband met vleugels

Cotton - Maandverband

Tampons - Normaal

Bio - Maandverband lange vleugels

Cotton - Maandverband met vleugels

Tampons - Super

Bio - Inlegkruisjes

Tampons - mini met applicator

Maandverband nacht - Met vleugels

Tampons - mini

Maandverband - Met vleugels

Tampons - Normaal met applicator

Kraamverband

Tampons - Normaal

Inlegkruisjes

Zonder parfum & pesticiden

Tampons - Super met applicator

Zonder parfum & pesticiden

Inlegkruisjes - Individueel verpakt

Doddlebags - Webbox

DoddleBags 200 ml & lepels

DoddleBags 200 ml + stickers

DoddleBags - 100 ml

Doddlebrush

Inlegkruisjes met klittenband

Satijnen inlegkruisjes

Herbruikbare reinigingspads

Satijnen maandverband

Maandverband met drukknopjes

Herbruikbaar kraamverband

Hechtingsdeken

Ecologische luierbroekjes - Maat 7

Ecologische luierbroekjes - Maat 6

Ecologische luierbroekjes - Maat 5

Ecologische luierbroekjes - maat 4

Ecologische luier - Maat 6

Ecologische luier - Maat 5

Ecologische luier - Maat 4

Ecologische luier - Maat 3

Ecologische luier - Maat 2

Ecologische luier - Maat 1

Wegwerp billendoekjes

Menstruatiecup - Spring Symphony

Menstruatiecup - Sailor Blue

Menstruatiecup - Royal Purple

Menstruatiecup hard - Pretty in Pink

Menstruatiecup zacht - Pretty in Pink

Menstruatiecup - Nugget gold

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--8
.margin--16
.margin--24
.margin--32
.margin--40
.margin--48
.margin--56
.margin--64
.margin--80
.margin--96
.margin--104
.margin--120
.margin--160
.margin--200

Padding

.padding--0
.padding--8
.padding--16
.padding--24
.padding--32
.padding--40
.padding--48
.padding--56
.padding--64
.padding--80
.padding--96
.padding--104
.padding--120
.padding--160
.padding--200