Elements

Reusable elements for Buttons, Forms, Icons and more

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 for different size icons. Scalable Vector Graphics (SVG) are typically added via an embed which allows you to control styling (such as color and hover effects) directly within the Webflow Designer.

Access thousands of free icons from Flowbase Icon Library

---

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").