Elements
The Base System includes essential, ready-to-use UI elements designed to help you build quickly while maintaining flexibility and consistency.
Last updated
The Base System includes essential, ready-to-use UI elements designed to help you build quickly while maintaining flexibility and consistency.
Last updated
The Base System offers multiple button sizes and style variants to suit different use cases. Rather than relying heavily on combo classes—which can become restrictive and hard to manage—we use unique, clearly named classes for each button type. These are powered by variables, making it easy to update styles and maintain design consistency across your site.
All buttons use display: flex
with a predefined gap
, allowing you to easily insert icons alongside text. To fine-tune spacing for better visual balance, you can apply a combo class like Icon Left
or Icon Right
to remove padding on one side of the button.
Form-related utility classes all begin with the prefix Form
, making them easy to find and manage. This naming structure ensures all inputs, text areas, checkboxes, and more stay organized and consistent throughout your project.
Icon classes can be applied to both images and code embeds. Wherever possible, we recommend using inline SVGs, which offer smaller file sizes and allow you to control styling (such as color and hover effects) directly within the Webflow Designer.
Used to display user profile images—ideal for testimonials, blog authors, or team members.
Perfect for highlighting key info, labeling categories, or indicating status (e.g. "New", "Featured", or "Sold Out").
Button Primary
Main call to action button
Button Secondary
Secondary call to action button
Button Outline
Button with a border
Button Ghost
Button with no background or border
Button Link
Text Link
Form Field Label
Default <label> style
Form Input
Default <input> style
Form Text Area
Variant of <input> for <textarea>
Form Select
Variant of <input> for <select>
Form Checkbox
Default <input type="checkbox">
Form Radio
Default <input type="radio">
Form Success Message
Form Error Message
Icon X Large
32x32(px)
Icon Large
28x28(px)
Icon Regular
24x24(px)
Icon Small
20x20(px)
Icon X Small
16x16(px)
Icon
No fixed size, used to center icon.
Badge Large
16px / 24px
4px
10px
Badge Regular
14px / 16px
4px
8px
Badge Small
12px / 16px
4px
8px
Avatar X Large
64px
100%
Avatar Large
52px
100%
Avatar Regular
42px
100%
Avatar Small
32px
100%
Avatar X Small
24px
100%