The quick brown fox jumps over the lazy dog
How to use this template
Variables
All colours, typography, spacing and radius values are stored as variables. To change the look of the entire site, open the Variables panel in the Webflow Designer and edit the values in the palette collection — changes will propagate automatically to every element that uses them. Avoid overriding styles directly on elements; always work at the variable level.
Components
All interactive UI elements (buttons, navbar, accordion, forms, sliders) are built as reusable Webflow components. To customise their appearance, edit the component's base class — do not style individual instances.
Colour modes
The theme variable collection supports Brand and Alternate modes. To apply the alternate colour scheme to any section, select the section and switch its variable mode in the element settings panel.
Theme
Through the
theme variable collection, you can manage the behavior of child elements with the theme-* class.Typography
Fonts
font-primary
The quick brown fox
font-secondary
The quick brown fox
font-tertiary
The quick brown fox
HTML Tags
HTML classes that define the heading tags throughout the project. Sizes, line height, and weight are set to inherit to manage styles with classes without conflicts.
Body (All Pages)
H1
The quick brown fox jumps over the lazy dog
H2
The quick brown fox jumps over the lazy dog
H3
The quick brown fox jumps over the lazy dog
H4
The quick brown fox jumps over the lazy dog
H5
The quick brown fox jumps over the lazy dog
H6
The quick brown fox jumps over the lazy dog
All Paragraphs
The quick brown fox jumps over the lazy dog
All Labels
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
All Links
All LinksAll Italics
The quick brown fox jumps over the lazy dog
All Bolds
The quick brown fox jumps over the lazy dog
All quotes
The quick brown fox jumps over the lazy dog
All Ordered Lists
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
All Unordered Lists
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
richtext
H1
H2
All *
...
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Headline
Classes for styling page titles
headline-large
The quick brown fox jumps over the lazy dog
headline-small
The quick brown fox jumps over the lazy dog
Heading
Classes useful for styling titles within page sections
heading-xxlarge
The quick brown fox jumps over the lazy dog
heading-xlarge
The quick brown fox jumps over the lazy dog
heading-large
The quick brown fox jumps over the lazy dog
heading-medium
The quick brown fox jumps over the lazy dog
heading-small
The quick brown fox jumps over the lazy dog
heading-xsmall
The quick brown fox jumps over the lazy dog
Text
text-size-xxlarge
The quick brown fox jumps over the lazy dog
text-size-xlarge
The quick brown fox jumps over the lazy dog
text-size-large
The quick brown fox jumps over the lazy dog
text-size-medium
The quick brown fox jumps over the lazy dog
text-size-body
The quick brown fox jumps over the lazy dog
text-size-small
The quick brown fox jumps over the lazy dog
text-size-xsmall
The quick brown fox jumps over the lazy dog
Utility classes
Preset classes that simplify development, allowing you to apply quick and consistent styles without custom CSS.
Margin
margin-bottom-auto
margin-right-auto
margin-top-auto
margin-left-auto
Gap
gap-xxsmall
gap-xsmall
gap-small
gap-medium
gap-large
gap-xlarge
gap-xxlarge
Radius
radius-xsmall
radius-small
radius-medium
radius-large
radius-xlarge
radius-full
Text
Text Styles
text-decoration-strikethrough
The quick brown fox
text-decoration-underline
The quick brown fox
text-space-nowrap
The quick brown fox
text-capitalize-everyword
The quick brown fox
text-capitalize-lowercase
The quick brown fox
text-capitalize-allcaps
The quick brown fox
Text Alignments
text-align-left
The quick brown fox jumps over the lazy dog
text-align-center
The quick brown fox jumps over the lazy dog
text-align-right
The quick brown fox jumps over the lazy dog
Text Colors
color-inherit
The quick brown fox
color-faded
The quick brown fox
Position
position Styles
position-static
position-relative
position-absolute
position-fixed
Layout
Overflow
overflow-clip
overflow-hidden
overflow-hidden-left
overflow-hidden-right
overflow-visible
overflow-x-auto
overflow-y-auto
Cursor
cursor-pointer
events-auto
events-none
Image
Fit
image-fit-contain
image-fit-cover
icon
icon
is-small
icon
icon
is-medium
icon
is-large
Visibility
Display
display-block
display-contents
display-inline
display-inline-block
display-inline-flex
display-inline-grid
display-none
Tablet display
tablet-display-block
tablet-display-none
Landscape display
landscape-display-block
landscape-display-none
Portrait display
portrait-display-block
portrait-display-none
Structure
Container
Predefined widths for page content
container
container
is-small
container
is-medium
container
is-large
Form
Class system for forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.