Elements
UI components and design system elements available in this template.
Typography
Heading levels, paragraph styles, and text treatments.
Heading 1 — The quick brown fox
Heading 2 — The quick brown fox
Heading 3 — The quick brown fox
Heading 4 — The quick brown fox
Heading 5 — The quick brown fox
Heading 6 — The quick brown fox
Lead text. This is a lead paragraph with a larger font size, suitable for introductions and important callouts. It draws the reader's attention and sets the tone for the content that follows.
Body text. This is a standard paragraph used for body copy throughout the template. It uses the default font size and a comfortable line height for readability. Good typography is the foundation of any well-designed interface, ensuring that users can easily consume and understand the content presented to them.
Small text. This is smaller text, useful for captions, footnotes, meta information, and secondary details that support the main content.
"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs
Buttons
Primary, secondary, and outline button styles in various sizes.
Variants
Sizes
Badges & Tags
Colored labels for statuses, categories, and metadata.
Alerts / Notices
Contextual feedback messages for user actions and system states.
Information
This is an informational alert. Use it to highlight neutral tips or contextual information.
Success
Your action has been completed successfully.
Warning
Please review the details carefully before proceeding.
Error
Something went wrong. Please try again or contact support.
Cards
Flexible content containers with various styles and layouts.
Basic Card
A simple card with a border, padding, and rounded corners.
Hover Shadow
This card elevates on hover with a larger shadow.
Icon Card
Features a prominent icon above the content.
Form Elements
Input fields, selects, textareas, and other form controls.