Custom List Styles
Lists are versatile tools. Sometimes you need a clean list, sometimes a checklist, and sometimes something that feels handwritten.
We’ve introduced a flexible <List /> component to handle these variations without conflict.
1. Default Style
The standard clean sans-serif list for general content.
- Item One
- Item Two
- Item Three
2. Hand Drawn Style
Perfect for “notes” or informal content. Uses the Kalam font.
- Buy Milk
- Walk the Dog
- Write Code
Ordered Hand Drawn
It works with numbers too!
- Priority 1
- Priority 2
- Priority 3
3. Checklist Style
Great for features, pros/cons, or completed tasks. The checkmark is automatic.
- Fast Performance
- SEO Optimized
- Dark Mode Support
4. Minimal Style
A sleek, sidebar-style list layout with a border guide.
- Introduction
- Methodology
- Results
- Conclusion
Usage
Import the component and use the variant prop.
import List from "../components/ui/List.astro";
<List variant="hand-drawn" data={["A", "B", "C"]} />
