Base System for Webflow
  • Getting Started
    • Welcome
    • Getting Started
  • FRAMEWORK
    • Classes
    • Structure
    • Typography
    • Elements
    • Variables
    • Interactions
  • Additional Reading
    • Changelog
Powered by GitBook
On this page
  • Buttons
  • Form Elements
  • Icons
  • Optional Classes
  • Avatars
  • Badges
  1. FRAMEWORK

Elements

The Base System includes essential, ready-to-use UI elements designed to help you build quickly while maintaining flexibility and consistency.

PreviousTypographyNextVariables

Last updated 17 days ago

Buttons

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.

Adding Icons to Buttons

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 Elements

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.


Icons

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.


Optional Classes

Avatars

Used to display user profile images—ideal for testimonials, blog authors, or team members.

Badges

Perfect for highlighting key info, labeling categories, or indicating status (e.g. "New", "Featured", or "Sold Out").


Buttons

Base Classes
Property

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

Class Name
Property

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

Icons

Class Name
Size

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.

Badges

Name
Text & Line Size
Padding Top & Bottom
Padding Right & Left

Badge Large

16px / 24px

4px

10px

Badge Regular

14px / 16px

4px

8px

Badge Small

12px / 16px

4px

8px

Avatars

Class Name
Size (px)
Border Radius

Avatar X Large

64px

100%

Avatar Large

52px

100%

Avatar Regular

42px

100%

Avatar Small

32px

100%

Avatar X Small

24px

100%

Page cover image