Viking Bookings
Webflow Style Guide

Welcome to the Viking Bookings Webflow Style Sheet! This comprehensive guide contains all the styles and classes necessary for designing the Viking Bookings website.

Created by Whisky Friday, this style sheet is the go-to resource for anyone working on the Viking Bookings website. It provides detailed information on the typography, colors, buttons, forms, and other design elements used on the site.

Please note that any changes made to the style sheet will be applied throughout the website. Therefore, it is essential to make changes with caution and ensure they align with the overall design vision for the website.

Colors

Dark Blue

#2F3243

White

#FFFFFF

Viking Blue

#01C3CF

Grey

#E0E1E3

Light Grey

#F4F4F5

Viking Blue 20

#CCF3F5

Viking Blue 5

#F2FCFC

Typography

Heading 1

Cera Pro Blod
54 / 64

This is a heading 1

This is a heading 1

Heading 2

Cera Pro Blod
40 / 50

This is a heading 2

This is a heading 2

Heading 3

Cera Pro Blod
40 / 50

This is a heading 3

This is a heading 3

Heading 4

Cera Pro Blod
40 / 50

This is a heading 4

This is a heading 4

Paragraph

Cera Pro Blod
16 / 26

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph Big

Cera Pro Blod
18 / 28

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph Small

Cera Pro Blod
14 / 24

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph Extra Small

Cera Pro Blod
12 / 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Cera Pro Medium
16 / 26

Rich text link

Cera Pro Medium Underlined
16 / 26

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!

Test

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.

  • Hallo

Checkmark list

Cera Pro Regular
16 / 26

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

Checkmark list big

Cera Pro Regular
18 / 28

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

Frequently asked questions

Question 1

Question 2

Question 3

Question 4

Question 5

Tab - USP Section with Image 3

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.

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

Tab - USP Section with Image 4

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.

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

Tab - USP Section with Image 2

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.

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark

  • List item with checkmark