Earnforth Blank
Use this for new page
Colors
Primary
Secondary
Success
Warning
Error
Info
Typography
Heading 1 - Poppins Font
Heading 2 - Poppins Font
Heading 3 - Poppins Font
Heading 4 - Poppins Font
Heading 5 - Poppins Font
Heading 6 - Poppins Font
This is a paragraph with regular text. The quick brown fox jumps over the lazy dog.
This is muted text for less important information.
Buttons
Button Variants
Button Sizes
Icon Buttons
Button States
Block Button
Forms
Text Inputs
Input Sizes
Textarea
Select
Checkboxes
Radio Buttons
Switch
Toggle Switch
Input Groups
@
.com
Validation States
This field is required
Cards
Card Title
Card subtitle
This is a basic card with header, body, and footer sections.
Card with Image
This card includes an image at the top.
Premium Card
This is a premium styled card with special styling.
Alerts
Success!
Error!
Warning!
Info
Badges
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Outline
Progress Bars
Tables
Basic Table
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | User | Active |
| Bob Johnson | bob@example.com | User | Pending |
Striped Table
| # | Product | Price | Quantity |
|---|---|---|---|
| 1 | Product A | $99.99 | 5 |
| 2 | Product B | $149.99 | 3 |
| 3 | Product C | $79.99 | 8 |
List Groups
Breadcrumbs
Pagination
Accordion
Accordion Item 1
This is the content for accordion item 1. It can contain any HTML content.
Accordion Item 2
This is the content for accordion item 2. You can add forms, images, or any other content here.
Accordion Item 3
This is the content for accordion item 3. The accordion is fully responsive and works on all devices.
Avatars
Avatar Sizes
Avatar Group
Spinners
Modals & Dialogs
Utility Classes
Spacing
m-3 p-3
mt-4 mb-4 p-2
Text Alignment
Left aligned text
Center aligned text
Right aligned text
Display
Flex container
Badge