Badges
Learn about badges, and how to best use them in the Base System
Last updated
Learn about badges, and how to best use them in the Base System
Last updated
Badges are versatile UI elements used to highlight key information, indicate status, or categorize content. They are often used to draw attention to specific content, such as notifications, tags, or labels. In the Base System, badges are designed to be flexible and customizable, allowing you to tailor their appearance and behavior to fit your specific needs.
Explore the default badge classes and properties below, or learn more about how badges are used in your layouts through the style overview page.
Badges come with predefined styles for easy implementation, but they can also be customized to match your design preferences. The table below outlines the default badge classes and their associated properties. You can modify these classes or create new ones to align with your design system.
| Name | Text & Line Size | Padding Top & Bottom | Padding Right & Left |
|---|---|---|---|
Badge X Small | 12px / 16px | 2px | 6px |
Badge Small | 12px / 16px | 4px | 8px |
Badge Regular | 14px / 16px | 4px | 8px |
Badge Large | 16px / 24px | 4px | 10px |
By utilizing the badge classes, you can easily apply consistent styling across your web pages, while still maintaining the flexibility to adjust the design as needed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et mauris malesuada, tempor est eu, venenatis turpis. Vivamus non velit laoreet, suscipit sapien interdum, convallis purus. Integer at porta justo. Donec elementum lectus erat, id luctus metus feugiat nec. Integer vestibulum, nisl vitae auctor finibus, nunc libero sollicitudin mauris, ut tincidunt ipsum augue lobortis est.
Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Default Badges: Default sections use descriptive names based on the top and bottom padding.
Example: Badge Small, Badge Regular, Badge Large
Custom Containers: Use section as a suffix to the parent category
Example: Testmonial Badge, Pricing Badge
