Use the card shortcode to display a card that links to a content page.
card shortcode to display a card that links to a content page. When using a rich layout, the card includes a thumbnail (or icon) and a header. As an example, the following shortcode displays a horizontal card that links to the editing guide. It includes a custom header and footer. You can use the
card-group shortcode to align multiple cards and to position them in a grid.
The shortcode supports the following arguments:
|path||No||Path of the page that the card reference to. If omitted, specify the title, icon, thumbnail, and body (inner content) as needed.|
|title||No||Optional title of the card, replaces the title of the referenced page (if any).|
|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”, “black”, “body”, or “body-tertiary”. By default, no color is specified.|
|padding||No||Optional padding of the content, either “0”, “1”, “2”, “3”, “4”, “5”, or “auto” (default).|
|gutter||No||If set, adds a wrapper around the card that defines a gutter between columns in a group. The value can be either “0” (default), “1”, “2”, “3”, “4”, or “5”.|
|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”.|
|thumbnail||No||Optional thumbnail image url, displayed on the top or the left of the card.|
Optional alternate text for the thumbnail, uses “title” by default.
|icon||No||Optional Font Awesome icon, displayed on the top or the left of the card.|
Change the style of your card with class attributes and shortcode arguments. Use the
color argument to set the background color of the card. As an example, the following shortcodes display a plain card for each available color. The cards are embedded in a grid. The final two cards with the color
body-tertiary are color-mode aware.
header argument to customize the contents of the card.
footer argument to customize the contents of the card.
orientation argument to customize the placement of the card’s thumbnail or icon.
icon, and inner content to define the card’s content inline.
This is the
body of the card. It supports Markdown.
This is the
body of the card. It supports Markdown too.
class argument to customize the styling of the card. The folllowing example applies the style
card-shrink to apply an animation effect when hovering over the card.
The style is defined in the
theme.scss file, which is transpiled into the site’s stylesheet.