Glossary
Aside from the classes shown in the stylesheet pages there are also a large number hidden from view. This is done as so not to confuse clients when they look at these pages for guidance, it therefore is also advisable to delete this page after going live.
All classes are listed in this glossary. It is mentioned when those might require customization to match the design for each individual project and it also shows when they have matching breakpoint-specific classes.
Tags
HTML tags can contain styling without having a class name. In Webflow these have purple colored name labels.
Body (all pages)
This sets your base page styling across your entire website.
All text elements inherit the typography styling made here unless they have their own stylings. Adjust the styling to match the design.
All text elements inherit the typography styling made here unless they have their own stylings. Adjust the styling to match the design.
All H1 Headings
This sets the styling across your entire website for all the h1 headlines that do not have a class applied to it.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
All H2 Headings
This sets the styling across your entire website for all the h2 headlines that do not have a class applied to it.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
All H3 Headings
This sets the styling across your entire website for all the h3 headlines that do not have a class applied to it.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
All H4 Headings
This sets the styling across your entire website for all the h4 headlines that do not have a class applied to it.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
All H5 Headings
This sets the styling across your entire website for all the h5 headlines that do not have a class applied to it.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
All Paragraphs
This sets the styling across your entire website for all the paragraph elements that do not have a class applied to it. As with all elements paragraphs inherit the styling from the Body tag, therefore you only may want to adapt the bottom margin.
All Bolds
This sets the styling across your entire website for all bold texts. In most cases you will not have to alter this unless you want a medium, extra bold, or black font-weight to represent bold text.
All Links
This sets the styling across your entire website for all links – be it a text or a link block – that do not have a class applied to it. Adjust the styling to match the design, including hover, pressed, and focus state.
All Block Quotes
This sets the styling across your entire website for all block quotes.
Adjust the styling to match the design.
Adjust the styling to match the design.
All Unordered Lists
This sets the styling across your entire website for all unordered lists.
Adjust the styling to match the design.
Adjust the styling to match the design.
All Ordered Lists
This sets the styling across your entire website for all ordered lists.
Adjust the styling to match the design.
Adjust the styling to match the design.
All List Items
This sets the styling across your entire website for all list items in either an unordered or ordered list. Adjust the styling to match the design.
All Labels
This sets the styling across your entire website for all form labels. These are the texts above a form field. Adjust the styling to match the design.
General classes
hidden
bp-S__hidden
bp-XS__hidden
bp-XXS__hidden
Hides an element from the canvas, it is still visible in the code.
bp-S__show
bp-XS__show
bp-XXS__show
Makes an element visible on the canvas.
opacity-0
Sets the opacity of an element to 0
opacity-10
Sets the opacity of an element to 10
opacity-20
Sets the opacity of an element to 20
opacity-30
Sets the opacity of an element to 30
opacity-40
Sets the opacity of an element to 40
opacity-50
Sets the opacity of an element to 50
opacity-60
Sets the opacity of an element to 60
opacity-70
Sets the opacity of an element to 70
opacity-80
Sets the opacity of an element to 80
opacity-90
Sets the opacity of an element to 90
opacity-100
Sets the opacity of an element to 100
overflow-hidden
Sets overflow to hidden
overflow-auto
Sets overflow to auto
no-click
Prevents all click and hover interaction on an element.
Styling is defined in the Global Styling component.
Styling is defined in the Global Styling component.
click
Enables all click and hover interaction on an element.
Styling is defined in the Global Styling component.
Styling is defined in the Global Styling component.
HR
A 1 px high horizontal ruler. Adjust the color to match the design.
Typography
heading-XL
Styling should be equal to the H1 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
heading-L
Styling should be equal to the H2 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
heading-M
Styling should be equal to the H3 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
heading-S
Styling should be equal to the H4 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
heading-XS
Styling should be equal to the H5 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
heading-XSS
Styling should be equal to the H6 tag here above.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
text-XL
optional
Styling used for the largest non-headline text.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
text-L
optional
Styling used for the second non-headline largest text.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
text-M
Styling used for the regular text, this should be equal to the Body here above.
Adjust the styling to match the design.
Adjust the styling to match the design.
text-S
optional
Styling used for the second smallest text.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
text-XS
optional
Styling used for the smallest text.
Adjust the styling to match the design across all standard breakpoints.
Adjust the styling to match the design across all standard breakpoints.
text-left
bp-S__text-left
bp-XS__text-left
bp-XXS__text-left
Set text alignment to left.
text-center
bp-S__text-center
bp-XS__text-center
bp-XXS__text-center
Set text alignment to center.
text-right
bp-S__text-right
bp-XS__text-right
bp-XXS__text-right
Set text alignment to right.
text-regular
Set font-weight to Normal aka Regular.
text-medium
optional
Set font-weight to Medium.
text-bold
Set font-weight to Bold, same styling as the Bold tag here above.
text-truncate
Truncates a text after 3 lines ending it with ...
Styling is defined in the Global Styling component.
Styling is defined in the Global Styling component.
text-caps
Set text in all capitals.
text-underline
Underlines a text. Styling is defined in the global styling component.
text-no-underline
Removes an underlining.
text-no-break
Prevents the text from breaking into multiple lines.
text-primary-500
Sets the text color to the primary brand color variable.
text-secondary-500
Sets the text color to the secondary brand color variable.
text-black
Sets the text color to the black color variable.
text-white
Sets the text color to the white color variable.
text-action
Sets the text color to the action color variable.
text-rich
A class name to give to rich text elements to enable a different styling for the elements within it. Adjust the styling to match the design.
Background Color and Shadows
background-black
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-white
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-action
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-25
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-50
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-100
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-200
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-300
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-400
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-500
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-600
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-700
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-800
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-primary-900
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-25
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-50
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-100
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-200
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-300
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-400
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-500
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-600
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-700
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-800
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
background-secondary-900
optional
Sets the background color to the matching color variable.
Adjust the color in the variables panel.
Adjust the color in the variables panel.
shadow-XL
Gives an element the largest outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
shadow-L
Gives an element the second largest outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
shadow-M
Gives an element a medium outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
shadow-S
Gives an element a small outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
shadow-XS
Gives an element the second smallest outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
shadow-XXS
Gives an element the smallest outer box shadow.
Adjust if the design comes with a differently defined shadow.
Adjust if the design comes with a differently defined shadow.
Layout
page-wrapper
This can be used to hold all the page sections.
It has relative positioning and a z-index 10.
It has relative positioning and a z-index 10.
container
Inside each Section there is a div with this class that hold all the content from that section. It controls the max width of its content and its distance from the left and right side of the screen.
spacing-XXL
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-XL
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-L
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-M
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-S
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-XS
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
spacing-XXS
Creates a square div of a fixed size.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
Adapt the size across all standard breakpoints to match the spacing system used in the design.
layout__row
This forms the row that will hold the columns.
Adapt the left and right margins in case the design works with a column gap that is different then 80px (each margin is half the size of the gap).
Adapt the left and right margins in case the design works with a column gap that is different then 80px (each margin is half the size of the gap).
layout__col
This forms the column inside the row.
Adapt the left and right padding in case the design works with a column gap that is different then 80px (each padding is half the size of the gap).
Adapt the left and right padding in case the design works with a column gap that is different then 80px (each padding is half the size of the gap).
layout__col-1
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 1 column (8.33%) inside the 12 column layout.
It forms a column width of 1 column (8.33%) inside the 12 column layout.
layout__col-2
bp-S__layout__col-2
bp-XS__layout__col-2
bp-XXS__layout__col-2
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 2 columns (16.67%) inside the 12 column layout.
It forms a column width of 2 columns (16.67%) inside the 12 column layout.
layout__col-3
bp-S__layout__col-3
bp-XS__layout__col-3
bp-XXS__layout__col-3
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 3 column (25%) inside the 12 column layout.
It forms a column width of 3 column (25%) inside the 12 column layout.
layout__col-4
bp-S__layout__col-4
bp-XS__layout__col-4
bp-XXS__layout__col-4
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 4 columns (33.33%) inside the 12 column layout.
It forms a column width of 4 columns (33.33%) inside the 12 column layout.
layout__col-5
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 5 columns (41.67%) inside the 12 column layout.
It forms a column width of 5 columns (41.67%) inside the 12 column layout.
layout__col-6
bp-S__layout__col-6
bp-XS__layout__col-6
bp-XXS__layout__col-6
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 6 columns (50%) inside the 12 column layout.
It forms a column width of 6 columns (50%) inside the 12 column layout.
layout__col-7
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 7 columns (58.33%) inside the 12 column layout.
It forms a column width of 7 columns (58.33%) inside the 12 column layout.
layout__col-8
bp-S__layout__col-8
bp-XS__layout__col-8
bp-XXS__layout__col-8
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 8 columns (66.67%) inside the 12 column layout.
It forms a column width of 8 columns (66.67%) inside the 12 column layout.
layout__col-9
bp-S__layout__col-9
bp-XS__layout__col-9
bp-XXS__layout__col-9
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 9 columns (75%) inside the 12 column layout.
It forms a column width of 9 columns (75%) inside the 12 column layout.
layout__col-10
bp-S__layout__col-10
bp-XS__layout__col-10
bp-XXS__layout__col-10
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 10 columns (83.33%) inside the 12 column layout.
It forms a column width of 10 columns (83.33%) inside the 12 column layout.
layout__col-11
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 11 columns (91.67%) inside the 12 column layout.
It forms a column width of 11 columns (91.67%) inside the 12 column layout.
layout__col-12
bp-S__layout__col-12
bp-XS__layout__col-12
bp-XXS__layout__col-12
This is a combo class and should only be used behind the layout__col class.
It forms a column width of 12 columns (100%) inside the 12 column layout.
It forms a column width of 12 columns (100%) inside the 12 column layout.
layout__no-wrap
bp-S__layout__no-wrap
bp-XS__layout__no-wrap
bp-XXS__layout__no-wrap
Prevents a row or column from wrapping its content.
layout__wrap
bp-S__layout__wrap
bp-XS__layout__wrap
bp-XXS__layout__wrap
This sets the wrapping settings of a row or column back to its default state that allows its content to wrap onto a new line.
layout__no-gutter
This removes the left and right margins and paddings from a row or column.
layout__no-gap
This removes the vertical gap inside layout__row.
layout__reverse
bp-S__layout__reverse
bp-XS__layout__reverse
bp-XXS__layout__reverse
This reverses the order of the elements in a row or column.
layout__horizontal
bp-S__layout__horizontal
bp-XS__layout__horizontal
bp-XXS__layout__horizontal
This sets the flexbox direction horizontal.
layout__vertical
bp-S__layout__vertical
bp-XS__layout__vertical
bp-XXS__layout__vertical
This sets the flexbox direction vertical.
layout__align-start
bp-S__layout__align-start
bp-XS__layout__align-start
bp-XXS__layout__align-start
This sets the flexbox alignment to start, resulting in a top alignment for a horizontal direction and a left alignment for a vertical direction.
layout__align-center
bp-S__layout__align-center
bp-XS__layout__align-center
bp-XXS__layout__align-center
This sets the flexbox alignment to center.
layout__align-end
bp-S__layout__align-end
bp-XS__layout__align-end
bp-XXS__layout__align-end
This sets the flexbox alignment to end, resulting in a bottom alignment for a horizontal direction and a right alignment for a vertical direction.
layout__align-stretch
This sets the flexbox alignment to stretch, resulting the content to stretch out across the entire height for a horizontal direction and the entire width for a vertical direction.
layout__align-baseline
This sets the flexbox alignment to baseline, resulting text content to align upon the font baseline.
layout__justify-start
bp-S__layout__justify-start
bp-XS__layout__justify-start
bp-XXS__layout__justify-start
This sets the flexbox justify alignment to start, resulting in a left alignment for a horizontal direction and a top alignment for a vertical direction.
layout__justify-center
bp-S__layout__justify-center
bp-XS__layout__justify-center
bp-XXS__layout__justify-center
This sets the flexbox justify alignment to center.
layout__justify-end
bp-S__layout__justify-end
bp-XS__layout__justify-end
bp-XXS__layout__justify-end
This sets the flexbox justify alignment to end, resulting in a right alignment for a horizontal direction and a bottom alignment for a vertical direction.
layout__justify-space-between
This sets the flexbox justify alignment to space between, resulting in all the content being spaced out with even white space between them.
layout__justify-space-around
This sets the flexbox justify alignment to space around, resulting in all the content being spaced out with even white space around them.
Elements
button
Styles an elements as a button. Adjust the styling to match the design, including hover, pressed and focus state.
button-secondary
This is a combo class and should only be used behind the button class.
Adjust the styling to match the design, including hover, pressed and focus state.
Adjust the styling to match the design, including hover, pressed and focus state.
image-cover
Sets an image to cover the entire box it is in, while keeping its aspect ratio.
image-contain
Sets an image to fit within a box, while keeping its aspect ratio.
image-square
Creates a square element that will remain square even when dealing with different widths or heights.
image-16x9
Creates an element with an aspect ration of 16x9, that will remain 16x9 even when dealing with different widths or heights.
image-3x2
Creates an element with an aspect ration of 3x2, that will remain 3x2 even when dealing with different widths or heights.
image-2x3
Creates an element with an aspect ration of 2x3, that will remain 2x3 even when dealing with different widths or heights.
form
Set this to the outermost form element to have 0 margins.
form__input-field
Styles the form input field. Adjust the styling to match the design.
form__text-area
This is a combo class and should only be used behind the form__input-field class. Ityles the form text area field.
Adjust the styling to match the design.
Adjust the styling to match the design.
form__select
This is a combo class and should only be used behind the form__input-field class. It styles the form select field.
Adjust the styling to match the design.
Adjust the styling to match the design.
form__radio-button-wrapper
Set this to the element that holds the radio button and its label.
Adjust the padding if need be.
Adjust the padding if need be.
form__radio-button
This styles the radio button. Adjust the styling to match the design, including focussed and checked state.
form__checkbox-wrapper
Set this to the element that holds the checkbox and its label.
Adjust the padding if need be.
Adjust the padding if need be.
form__checkbox
This styles the checkbox. Adjust the styling to match the design, including focussed and checked state.
form__success
Styles the form success state.
Adjust the styling to match the design.
Adjust the styling to match the design.
form__error
Styles the form error state and sets the text color of the error message to the action variable.