Elements

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

Form

Icons

Badges

Avatars