Title here
Summary here
Card
Use the card shortcode to present information in a visually distinct card. Cards can stand alone or be grouped inside a
card-grid.
Usage
{{< card title="Getting started" icon="rocket" color="blue" >}}
Everything you need to get up and running.
{{< /card >}}Group multiple cards side by side with card-grid:
{{< card-grid >}}
{{< card title="Install" icon="download" color="green" >}}
Install Doks with a single command.
{{< /card >}}
{{< card title="Configure" icon="settings" color="purple" >}}
Adjust your project settings.
{{< /card >}}
{{< /card-grid >}}Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
title | string | — | Card heading text. |
icon | string | — | Name or path of an SVG icon. |
color | string | yellow | Icon accent color. One of yellow, purple, green, red, or blue. |
Inner content is optional and supports Markdown.
Examples
Standalone card
Deploy
Push your site to any static hosting provider.
{{< card title="Deploy" icon="cloud-upload" color="blue" >}}
Push your site to any static hosting provider.
{{< /card >}}Card grid
Fast
Optimized for performance out of the box.
Secure
Security best practices built in.
{{< card-grid >}}
{{< card title="Fast" icon="brand-speedtest" color="yellow" >}}
Optimized for performance out of the box.
{{< /card >}}
{{< card title="Secure" icon="shield" color="green" >}}
Security best practices built in.
{{< /card >}}
{{< /card-grid >}}