Skip to content
Search
Search the documentation
Card & CardGrid
1 min read

Card & CardGrid

Linkable cards for next steps and feature grids.

A Card groups a title and description, optionally as a link. Give it an href and it becomes clickable, with a hover state and a trailing arrow. CardGrid lays cards out in a responsive grid that reflows without breakpoints: as many columns as fit, down to one on narrow screens.

Usage

			<script>
	import { Card, CardGrid } from 'svelte-docsmith';
</script>

<CardGrid>
	<Card title="Quick Start" href="/docs/quick-start">
		Wire up the pipeline and render your first page.
	</Card>
	<Card title="External link" href="https://svelte.dev" external>Opens in a new tab.</Card>
</CardGrid>
		

API reference

Card

title required string
Card heading.
href string
Makes the card a link.
external boolean default false
Open the link in a new tab.
icon Snippet
Optional leading icon.

CardGrid

children Snippet
The Cards to lay out.
Edit this page Last updated: Jul 12, 2026

Was this page helpful?