Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Body Regular
Body small

This is a paragraph. It has a max-width to make sure the lines of text don't become too long.

And a min-height to make sure editors can still select it even if they delete the content.

Here is some Lorem Ipsum:

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.

h1 Rich text box is set to max w of 640px

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

caption thi

h2 this is h2 text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

H3 Static and dynamic content editing

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!

h4 How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Rich text box is set to max w of 640px

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

this is h2 text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
"Style the pink 'all block quotes' tag to change the default styling of block quotes."

Buttons

Text Link
This is some text inside of a div block.
This is some text inside of a div block.

Buttons

Text Link
This is some text inside of a div block.
This is some text inside of a div block.

Margins

10-r-margin
10-r-margin

Colours

To keep the colours flexible and helpful for different projects, only a few UI colours have been pre-defined.

Redefine these colours in the color picker to apply the changes across the whole site (primarily buttons and text).

Then add colours as needed.

Box
CTA Colour Hover
Body
Error
Background-1
Background-2
Stroke

Components and interactions

Modal / Pop-up

The button below opens a full-screen modal. It affects siblings with the class 'modal-wrapper'.

To edit the contents of the modal remove the combo class '.hide' from the modal-wrapper. Reapply again to hide it.

The trigger button and modal-wrapper can also be copy-pasted into other projects, but the classes may need to be reapplied in the interaction to function properly.

Make sure to wrap the trigger button and modal-wrapper so that there's only one modal-wrapper in the same div (only one sibling).

Content inside a modal cannot easily be edited from the Webflow editor, since it is hidden. If the editors need to be able to edit the content inside a modal, the content should either be CMS driven (so they can edit it from the collections) or made into symbols which can be edited on another page (e.g. a 'pop-ups' page which visitors won't see)

Either use the button class 'button-modal' for the trigger button or apply the 'open-modal' to any other element.

Modal with fixed header and footer CTA
Long text + scroll overlay
Modal with fixed header

SoMe share buttons

The following buttons are used to share the current page on social media or in an e-mail.

They require the custom code which can be found in the before </body> on this page, and the correct element ID's on the respective 'some-button'.

The custom code has to copy-pasted to each page where the SoMe share buttons are used.

The 'mailto-button' used the page title as the e-mail subject and adds the link in the content of the e-mail.

Not to be confused with regular links social media.

Share this page

Accordions

Frequently used for FAQs or other 'read more' content.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Sections and containers

Intro
To ensure that most* content follows the same width and rules, a few general classes have been defined for sections and containers which most* content should be wrapped inside of.

So the default is: A section with the 'section' class, and inside of that a container with the 'container' class, and inside of that, any content you can imagine.

The section makes sure content doesn't stretch to the edge of the screen or section with padding on all sides.
The container limits the content to a set max-width (here 1280px).

Below are some examples. Add more combo classes as needed.

*'most' because there will always be sections which need a different layout.

(Regular) 'section'

The 'section' class has 5vw padding on the sides and 80px padding top and bottom.

This translates well down to smaller screens and devices, and is recommended as a default.

If a page calls for a generally more spacious or compact design the top+bottom padding can be adjusted accordingly.

Some sections may work better with different top and bottom padding, and for that we'll add combo classes. Same goes for different background colours in sections.

Section bg-1

The 'bg-1' combo class for sections change the background colour of the section to the color which has been defined as bg-1 in the colour panel.

Section 0-v-padding

The '0-v-padding' combo class for sections remove all vertical padding.