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. Solar energy is transforming how we power our homes and businesses.
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 ensures that visitors can easily consume information about solar products and services.
Small text. This is smaller text, useful for captions, footnotes, meta information, and secondary details that support the main content.
"The sun is the only safe nuclear reactor, situated as it is some ninety-three million miles away." — Stephanie Mills
Buttons
Button styles and variations.
Cards
Card layouts for displaying content.
Feature Card
A simple card with an icon, heading, and description text for highlighting features.
Colored Card
A card with a colored background for emphasis and visual variety in layouts.
Shadow Card
A card with a prominent shadow for elevated importance in the visual hierarchy.
Badges
Badge and tag styles.
Form Elements
Input fields, selects, and other form components.
Alerts
Notification and alert styles.
Info: Your solar savings estimate is ready. Check your email for details.
Success: Your consultation request has been submitted successfully.
Warning: Solar incentives in your area may expire soon. Act now.
Error: Please fill in all required fields before submitting.