Docs
Card
Use the card shortcode to display a card that links to a content page.
Overview
Important
Cards support inner content since release v0.18.6 . As a result, references to the card shortcode must be closed or self-closed.
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="/guides/editing" header="publication" footer="tags" orientation="horizontal" class="col-sm-12 col-lg-8 mx-auto" />}}Arguments
The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| align | select | start | v0.23.0 Icon alignment. Supported values: [start, end, center]. | |
| alt | string |
v0.19.0
Alternate text for the thumbnail, uses title by default. |
||
| anchor | select |
v0.24.23
Anchor of the thumbnail’s crop box, defaults to anchor value set in imaging section of the site configuration (usually Smart). Supported values: [TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, Smart]. |
||
| body | select | full | v0.24.16 Body of the card. Supported values: [full, title, none]. | |
| button | bool | v0.23.0 Flag indicating the cards should include a button that links to the provided address. | ||
| buttonLabel | string | v0.23.2 Label of the link button, defaults to the card title. | ||
| buttonType | select | button | v0.23.18 Type of the button element. Supported values: [link, button]. | |
| class | string | Class attribute of the card element, e.g. “w-50”. | ||
| color | select | Theme color of the card. By default, no color is specified. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. | ||
| footer | select | none | Footer components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. | |
| gutter | select | 0 | Gutter between columns in a group. Supported values: [0, 1, 2, 3, 4, 5]. | |
| header | select | full | Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. | |
| icon | string | Font Awesome icon, displayed on top or the left of the card. | ||
| iconRounded | bool | v0.24.8 Stack the icon in a round container. | ||
| orientation | select | stacked | Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none]. | |
| padding | select | auto | Padding of the content. Supported values: [0, 1, 2, 3, 4, 5, auto]. | |
| path | path | Path of the page that the card reference to. If omitted, specify the title, icon, thumbnail, and description (inner content) as needed. | ||
| portrait | bool | false | v0.24.16 Flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics. | |
| style | string | v0.23.0 Icon style. | ||
| subtle | bool | v0.23.0 Apply subtle background colors. | ||
| thumbnail | path | Thumbnail image url, displayed on top or the left of the card. | ||
| title | string | Title of the card, replaces the title of the referenced page (if any). | ||
| wrapper | string | Element class of the card wrapper. |
Examples
Change the style of your card with class attributes and shortcode arguments.
Colored cards
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="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="secondary" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="success" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="danger" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="warning" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="info" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="light" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="dark" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="white" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="black" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="body" path="/docs/components/button/" header="none" orientation="none" />}}
{{< card color="body-tertiary" path="/docs/components/button/" header="none" orientation="none" />}}
{{< /card-group >}}Custom header
Use the header argument to customize the contents of the card.
{{< card-group cols="4" gutter="3" >}}
{{< card path="/guides/editing" header="full" orientation="none" />}}
{{< card path="/guides/editing" header="publication" orientation="none" />}}
{{< card path="/guides/editing" header="tags" orientation="none" />}}
{{< card path="/guides/editing" header="none" orientation="none" />}}
{{< /card-group >}}Custom footer
Use the footer argument to customize the contents of the card.
{{< card-group cols="4" gutter="3" >}}
{{< card path="/guides/editing" header="none" footer="full" orientation="none" />}}
{{< card path="/guides/editing" header="none" footer="publication" orientation="none" />}}
{{< card path="/guides/editing" header="none" footer="tags" orientation="none" />}}
{{< card path="/guides/editing" header="none" footer="none" orientation="none" />}}
{{< /card-group >}}Image placement
Use the orientation argument to customize the placement of the card’s thumbnail or icon.
December 29, 2023 •6 min read
{{< card path="/guides/editing" header="none" footer="none" orientation="stacked" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="/docs/components/button/" header="none" footer="none" orientation="stacked" padding="3" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="/guides/editing" header="publication" footer="tags" orientation="horizontal" class="col-sm-12 col-lg-8 mx-auto" />}}
{{< card path="/docs/components/button/" header="publication" footer="tags" orientation="horizontal" padding="3" class="col-sm-12 col-lg-8 mx-auto" />}}Inline content
Use title, thumbnail, icon, and inner content to define the card’s content inline.
Title
body of the card. It supports Markdown.
Title
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 >}}Custom styling
Use the class argument to customize the styling of the card. The following example applies the style card-shrink to apply an animation effect when hovering over the card.
{{< card path="/docs/components/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);
}