- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
Card 1
Some quick example
Card 2
Hover me
Card 3
Some quick example
Card 4
Some quick example
Card 5
Some quick example
Card 6
Some quick example
💻 HTML Code
Card 1
Some quick example
Card 2
Hover me
Card 3
Some quick example
Card 4
Some quick example
Card 5
Some quick example
Card 6
Some quick example
🎨 Colors
Apply a color to your card using .card-{color}. Each variant sets the background, border, and text contrast for the whole card.
For more specific variations such as colored headers, borders, or hover effects, refer to the examples above.
.card-{color}
📦 Card group
Use .card-group to display cards in a responsive
grid. Cards resize automatically using --card-min-width and the spacing comes from --card-group-gap.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--card-bg-color |
Background color of the card. |
--card-body-padding |
Padding inside the card body. |
--card-border-color |
Border color of the card. |
--card-border-radius |
Corner radius of the card. |
--card-border-style |
Border style of the card. |
--card-border-width |
Thickness of the card border. |
--card-box-shadow |
Default shadow applied to the card. |
--card-box-shadow-hover |
Shadow applied when the card is hovered. |
--card-footer-padding |
Padding inside the card footer. |
--card-group-gap |
Gap between cards inside a card group. |
--card-header-padding |
Padding inside the card header. |
--card-min-width |
Minimum width of a card. |