A contained box with a warm background and soft shadow. Use to seperate or highlight content. Can be used inside a [grid:] to present parallel resources, navigation options, or feature highlights. There are classes for tips, info, warnings and severe warnings.
Syntax
[card: *optional CSS here*]
Content goes here
[:card]
The CSS after the colon is optional. Leave it blank for the default card style: [card:].
Parameters
Any valid CSS property can be passed as an inline style:
| Property | Example |
|---|---|
| Background | background-color: var(--accent-pale) |
| Left border accent | border-left: 4px solid var(--accent) |
| Padding | padding: 2rem |
| Shadow | box-shadow: 0 2px 8px rgba(0,0,0,0.1) |
Example
[grid: cols:3]
[card:]
### Resources
A short description. Keep cards focused — one topic, one action.
[btn: Explore -> /documentation/markdown/custom_components/card/]
[:card]
[card:]
### Methods
A short description. Keep cards focused — one topic, one action.
[btn: Explore -> /documentation/markdown/custom_components/card/]
[:card]
[card:]
### Community
A short description. Keep cards focused — one topic, one action.
[btn: Explore -> /documentation/markdown/custom_components/card/]
[:card]
[:grid]
Resources
A short description. Keep cards focused — one topic, one action. Explore
Methods
A short description. Keep cards focused — one topic, one action. Explore
Community
A short description. Keep cards focused — one topic, one action. Explore
Alert Cards
Some styles for notes, tips, warnings and severe warnings are already implemented:
[card: class:note]
A **note** highlights neutral, supplementary information.
[:card]
A note highlights neutral, supplementary information.
[card: class:tip]
A **tip** highlights a helpful shortcut or best practice.
[:card]
A tip highlights a helpful shortcut or best practice.
[card: class:warning]
⚠️ A **warning** flags a medium-severity issue — something to double-check before proceeding.
[:card]
⚠️ A warning flags a medium-severity issue — something to double-check before proceeding.
[card: class:danger]
⚠️ A **danger** box flags a severe issue — data loss, broken links, or an action that cannot be undone.
[:card]
⚠️ A danger box flags a severe issue — data loss, broken links, or an action that cannot be undone.
Freely Styled Card
[card: border-left: 4px solid var(--accent)]
## Important Information
This card has a colored left border to draw attention.
[:card]
Important Information
This card has a colored left border to draw attention.