Cards
Cards present links and information as rich, tappable blocks, great for “next steps” grids, feature overviews, and navigation.
Card
A standalone Card with an icon, title, and description. Add href to make the
whole card a link (it gains a hover state and an arrow):
Installation
Get Axerity running locally in a minute.
Card group
Wrap cards in a CardGroup to lay them out in a responsive grid. Use cols to
set the number of columns:
Quick Start
Write your first page in two minutes.
Markdown
Author content in Markdown and Svelte.
Components
Explore the component kit.
GitHub
Star the project on GitHub.
Horizontal
Set horizontal to place the icon beside the content instead of above it:
Configuration
A horizontal card is handy in tighter layouts.
Usage
<script> import { Card, CardGroup } from '$lib';</script><CardGroup cols={2}> <Card title="Quick Start" icon="rocket" href="/quick-start"> Write your first page in two minutes. </Card></CardGroup>Props
| Component | Prop | Description |
|---|---|---|
CardGroup |
cols |
Number of columns (default 2) |
Card |
title |
Card heading (required) |
Card |
icon |
Optional Lucide icon name |
Card |
href |
Makes the card a link |
Card |
horizontal |
Lay the icon beside the content |