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.

Links

Text Link

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

.text-style--3lines

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