Cut the Base ©

Cut the Base gebruiken wij voor consistentie, efficiëntie en optimalisatie bij het bouwen aan onze Weblow-websites. Lees deze documentatie grondig door om te begrijpen hoe wij werken en waarom op deze manier werken.

globals

Colors

Add description here

.background--white

.background--black

.background--dark-blue

.background--pink

.background--light-grey

.background--light-blue

.background--medium-blue

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

Global heading one

Custom heading one

Global heading two

Custom heading two

Global heading tree

Custom heading tree

Global heading four

Custom heading four

Global heading five

Custom heading five

Global heading six

Custom heading six

Overridden heading sizes

.heading--huge

Heading huge

.heading--large

Heading large

.heading--medium

Heading 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--muted

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

.text-style--3lines

Text colors

.text-color--white

Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

.text-color--pink

Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

.text-color--dark-blue

Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.

.text-color--light-blue

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

Ordered list item 1
Ordered list item 2
Ordered list item 3

This is an image caption

components

Buttons

Normal buttons - new

Normal buttons

Inverted buttons

Form elements

Bedankt, we hebben je inzending ontvangen!

Er ging iets mis tijdens het verzenden van het formulier. Probeer het opnieuw.

spacing

Containers

.container--large | 128rem

.container--medium | 120rem

.container--small | 96rem

.container--xsmall | 72rem

Max widths

.max-width--xxsmall | 24rem

.max-width--xsmall | 32rem

.max-width--small | 48rem

.max-width--medium | 64rem

.max-width--large | 80rem

.max-width--xlarge | 88rem

.max-width--xxlarge | 96rem

Margin

.margin--0

.margin--tiny

0.8rem

.margin--xxsmall

1.6rem

.margin--xsmall

2.4rem

.margin--medium

4rem

.margin--large

4.8rem, 4rem, 4rem, 4rem

.margin--xlarge

5.6rem, 4.8rem, 4rem, 4rem

.margin--xxlarge

6.4rem, 5.6rem, 4.8rem, 4.8rem

.margin--huge

8rem, 6.4rem, 5.6rem, 5.6rem

.margin--xhuge

9.6rem, 7.2rem, 6.4rem, 6.4rem

.margin--xxhuge

10.4rem, 8rem, 7.2rem, 7.2rem

.margin--custom1

12rem, 10.4rem, 8rem, 8rem

.margin--custom2

.margin--custom3

Padding

.padding--0

.padding--tiny

0.8rem

.padding--xxsmall

1.6rem

.padding--xsmall

2.4rem

.padding--small

3.2rem

.padding--medium

4rem

.padding--large

4.8rem, 4rem, 4rem, 4rem

.padding--xlarge

5.6rem, 4.8rem, 4rem, 4rem

.padding--xxlarge

6.4rem, 5.6rem, 4.8rem, 4.8rem

.padding--huge

8rem, 6.4rem, 5.6rem, 5.6rem

.padding--xhuge

9.6rem, 7.2rem, 6.4rem, 6.4rem

.padding--xxhuge

10.4rem, 8rem, 7.2rem, 7.2rem

.padding--custom1

12rem, 10.4rem, 8rem, 8rem

.padding--custom2

.padding--custom3