hinode/content/en/docs/0.8/components/card.md

author, title, date, description, group, layout

author	title	date	description	group	layout
Mark Dumay	Card	2023-01-05	Use the card shortcode to display a card that links to a content page.	components	docs

Overview

Use the card shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail and a header.

Arguments

The shortcode supports the following arguments:

Argument	Required	Description
path	Yes	Required path of the page.
class	No	Optional class attribute of the card element, e.g. “w-50”.
color	No	Optional theme color of the card, either "primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "white" or "black". By default, no color is specified.
padding	No	Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
header	No	Optional header components of the card, displayed in small caps. Supported values are "full" (default), "publication", "tags", and "none".
footer	No	Optional footer components of the card, displayed in small caps. Supported values are "full", "publication", "tags", and "none" (default).
orientation	No	Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
{.table}

Example

As an example, the following shortcode displays a colored, borderless horizontal card that links to the [Rich Content]({{< ref "rich-content" >}} "Rich Content") page. It includes a custom header and footer.

{{</* ccard path="rich-content" class="w-100 border-0" orientation="horizontal" color="info" header="publication" footer="tags */>}}

The result looks like this:

{{< card path="rich-content" class="w-100 border-0" orientation="horizontal" color="info" header="publication" footer="tags" >}}