Use cards and tiles to create navigation grids, feature highlights, and content previews.
Cards
Cards are clickable containers with an optional icon, title, and description:
<wc-card icon-name="book" title="Documentation" href="getting-started/introduction">
Learn how to build beautiful documentation sites with DocsLit.
</wc-card>
Learn how to build beautiful documentation sites with DocsLit.
The card heading.
The link destination. Can be a page slug or an external URL.
A built-in icon name. See icons for the full list.
A short description. Alternatively, use the slot content (the content between the tags).
Tiles
Tiles create a grid of linked items. Use wc-tiles as the container and wc-tile for each item:
<wc-tiles>
<wc-tile icon-name="zap" title="Fast" description="Static builds with zero runtime overhead." href="deployment/static-hosting"></wc-tile>
<wc-tile icon-name="palette" title="Themeable" description="Dark and light modes out of the box." href="customization/theming"></wc-tile>
<wc-tile icon-name="search" title="Searchable" description="Full-text search with no external service." href="writing-content/search-and-seo"></wc-tile>
<wc-tile icon-name="blocks" title="Components" description="50+ interactive components built in." href="components/callouts-and-alerts"></wc-tile>
</wc-tiles>
The tile heading.
A short description displayed below the title.
The link destination.
A built-in icon name displayed above the title.
The number of columns in the grid. Defaults to automatic sizing based on content. Collapses to fewer columns on smaller screens.