Card
Use the card shortcode to display a card that links to a content page.
Use the 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.
{{< card path="editing" header="publication" footer="tags" orientation="horizontal" class="col-sm-12 col-lg-8 mx-auto" />}}
The shortcode supports the following arguments:
Argument | Required | Description |
---|---|---|
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. |
alt | No | v0.19.0 |
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
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
and body-tertiary
are color-mode aware.
{{< card-group cols="4" gutter="3" >}}
{{< card color="primary" path="button" header="none" orientation="none" />}}
{{< card color="secondary" path="button" header="none" orientation="none" />}}
{{< card color="success" path="button" header="none" orientation="none" />}}
{{< card color="danger" path="button" header="none" orientation="none" />}}
{{< card color="warning" path="button" header="none" orientation="none" />}}
{{< card color="info" path="button" header="none" orientation="none" />}}
{{< card color="light" path="button" header="none" orientation="none" />}}
{{< card color="dark" path="button" header="none" orientation="none" />}}
{{< card color="white" path="button" header="none" orientation="none" />}}
{{< card color="black" path="button" header="none" orientation="none" />}}
{{< card color="body" path="button" header="none" orientation="none" />}}
{{< card color="body-tertiary" path="button" header="none" orientation="none" />}}
{{< /card-group >}}
Use the header
argument to customize the contents of the card.
{{< card-group cols="4" gutter="3" >}}
{{< card path="editing" header="full" orientation="none" />}}
{{< card path="editing" header="publication" orientation="none" />}}
{{< card path="editing" header="tags" orientation="none" />}}
{{< card path="editing" header="none" orientation="none" />}}
{{< /card-group >}}
Use the footer
argument to customize the contents of the card.
{{< card-group cols="4" gutter="3" >}}
{{< card path="editing" header="none" footer="full" orientation="none" />}}
{{< card path="editing" header="none" footer="publication" orientation="none" />}}
{{< card path="editing" header="none" footer="tags" orientation="none" />}}
{{< card path="editing" header="none" footer="none" orientation="none" />}}
{{< /card-group >}}
Use the orientation
argument to customize the placement of the card’s thumbnail or icon.
October 22, 2023 • 6 min read
{{< card path="editing" header="none" footer="none" orientation="stacked" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="button" header="none" footer="none" orientation="stacked" padding="3" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="editing" header="publication" footer="tags" orientation="horizontal" class="col-sm-12 col-lg-8 mx-auto" />}}
{{< card path="button" header="publication" footer="tags" orientation="horizontal" padding="3" class="col-sm-12 col-lg-8 mx-auto" />}}
Use title
, thumbnail
, icon
, and inner content to define the card’s content inline.
Title
This is the body
of the card. It supports Markdown.
Title
This is the body
of the card. It supports Markdown too.
{{< card header="none" footer="none" padding="3" class="col-sm-12 col-lg-8 mx-auto mb-3" title="Title" icon="fa address-card" >}}
This is the `body` of the card. It supports Markdown.
{{< /card >}}
{{< card header="none" footer="none" padding="3" class="col-sm-12 col-lg-8 mx-auto" title="Title" thumbnail="img/watch.jpg" >}}
This is the `body` of the card. It supports Markdown too.
{{< /card >}}
Use the 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.
{{< card path="button" header="none" footer="none" padding="3" class="col-sm-12 col-lg-8 mx-auto card-shrink" />}}
The style is defined in the theme.scss
file, which is transpiled into the site’s stylesheet.
.card-shrink {
transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 0.3s box-shadow, 0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
cursor: pointer;
}
.card-shrink:hover {
transform: scale(0.99);
box-shadow: none if($enable-important-utilities, !important, null);
}