Class Reference
Elements
Ready-made styles for buttons, links, cards, text, media, forms and other page elements.
How to use
Choose a preset for the element, then add a color or layout utility only when that preset does not already own the same property. Header and footer presets belong on the outer wrapper and own its vertical padding; add padding-global for horizontal gutters. Put the logo, navigation and actions in a separate inner layout row.
Responsive behavior
Compact variants change the element size. Layout changes come from separate responsive utilities; a preset does not automatically rearrange its parent.
Examples and wireframes
Buttons & LinksButtons and links in their normal and interactive states.View examples →CardsCard presets with different surfaces and sizes.View examples →Text StylesHeading and body text presets.View examples →MediaImages, logos, avatars and media styles.View examples →AccordionAccordion headings and content styles.View examples →FormsInput and form component examples.View examples →