Card

Use the card shortcode to display a card that links to a content page.

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:

ArgumentRequiredDescription
pathYesRequired path of the page.
classNoOptional class attribute of the card element, e.g. “w-50”.
colorNoOptional theme color of the card, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, “black”, or “body”. By default, no color is specified.
paddingNoOptional padding of the content, either “0”, “1”, “2”, “3”, “4”, “5”, or “auto” (default).
headerNoOptional header components of the card, displayed in small caps. Supported values are “full” (default), “publication”, “tags”, and “none”.
footerNoOptional footer components of the card, displayed in small caps. Supported values are “full”, “publication”, “tags”, and “none” (default).
orientationNoOptional placecement of the thumbnail, either “stacked” (default), “horizontal”, or “none”.

Example

As an example, the following shortcode displays a stacked card with icon that links to the responsive page. It includes a custom header and footer.

markdown
{{< card path="responsive" padding="3" class="w-50" color="light" header="publication" footer="none" >}}
Last updated: February 17, 2023 • Add body color (f946c10)