Docs
Card
Posted on August 14, 2024 (Last modified on June 20, 2025) • 11 min read • 2,181 wordsUse 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.
markdown
{{< card path="/guides/editing" header-style="publication" footer-style="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
Alignment of the headline, content, or icon. Supported values: [start, center, end]. |
|
| alt | string |
v0.19.0
Alternate text for the thumbnail, uses title by default. |
||
| anchor | select |
v0.24.23
Anchor of the image’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
1.0.0
Use body-style instead. Body components of the element. Supported values: [full, title, none]. |
|
| body-style | select | full |
1.0.0
Body components of the element. Supported values: [full, title, none]. |
|
| button | bool | v0.23.0 Flag indicating the elements should include a button that links to the provided address. | ||
| button-label | string | v1.0.0 Label of the link button, defaults to the card title. | ||
| buttonLabel | string |
v0.23.2
v1.0.0
Use button-label instead. Label of the link button, defaults to the card title. |
||
| buttonType | select | button |
v0.23.18
v1.0.0
Use link-type instead. Type of the button element. Supported values: [link, button]. |
|
| class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
| color | select | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
||
| footer | select | none |
v1.0.0
Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|
| footer-style | select | none |
1.0.0
Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|
| gutter | int | Gutter between columns in a group. Supported values: [0 - 5]. |
||
| header | select | full |
1.0.0
Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. |
|
| header-style | select | full |
1.0.0
Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|
| icon | string | Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension. |
||
| icon-rounded | bool | v1.0.0 Stack the icon in a round container. | ||
| icon-style | string | v1.0.0 Icon style. | ||
| iconRounded | bool |
v0.24.8
v1.0.0
Use icon-rounded instead. Stack the icon in a round container. |
||
| link-type | select | button |
Style of the link. Supported values: [button, link]. |
|
| orientation | select | stacked |
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none]. |
|
| padding | int | 3 |
Padding of the content. Supported values: [0 - 5]. |
|
| path | path | Path of the page that the element references. | ||
| portrait | bool | v0.24.16 Flag to adjust the image 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
v1.0.0
Use icon-style instead. Icon style. |
||
| subtle | bool | v0.23.0 Apply subtle theme colors. | ||
| thumbnail | path | Thumbnail image url, displayed on top or the left of the element. | ||
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | ||
| wrapper | string | Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default. |
| Name | Type | Required | Default |
|---|---|---|---|
| align | select | start |
|
v0.23.0
Alignment of the headline, content, or icon. Supported values: [start, center, end]. |
|||
| alt | string | ||
v0.19.0
Alternate text for the thumbnail, uses title by default. |
|||
| anchor | select | ||
v0.24.23
Anchor of the image’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
1.0.0
Use body-style instead. Body components of the element. Supported values: [full, title, none]. |
|||
| body-style | select | full |
|
1.0.0
Body components of the element. Supported values: [full, title, none]. |
|||
| button | bool | ||
| v0.23.0 Flag indicating the elements should include a button that links to the provided address. | |||
| button-label | string | ||
| v1.0.0 Label of the link button, defaults to the card title. | |||
| buttonLabel | string | ||
v0.23.2
v1.0.0
Use button-label instead. Label of the link button, defaults to the card title. |
|||
| buttonType | select | button |
|
v0.23.18
v1.0.0
Use link-type instead. Type of the button element. Supported values: [link, button]. |
|||
| class | string | ||
| Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
| color | select | ||
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
|||
| footer | select | none |
|
v1.0.0
Use footer-style instead. Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|||
| footer-style | select | none |
|
1.0.0
Footer components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|||
| gutter | int | ||
Gutter between columns in a group. Supported values: [0 - 5]. |
|||
| header | select | full |
|
1.0.0
Use header-style instead. Header components of the card, displayed in small caps. Supported values: [full, publication, tags, none]. |
|||
| header-style | select | full |
|
1.0.0
Header components of the element, displayed in small caps. Supported values: [full, publication, tags, none]. |
|||
| icon | string | ||
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension. |
|||
| icon-rounded | bool | ||
| v1.0.0 Stack the icon in a round container. | |||
| icon-style | string | ||
| v1.0.0 Icon style. | |||
| iconRounded | bool | ||
v0.24.8
v1.0.0
Use icon-rounded instead. Stack the icon in a round container. |
|||
| link-type | select | button |
|
Style of the link. Supported values: [button, link]. |
|||
| orientation | select | stacked |
|
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none]. |
|||
| padding | int | 3 |
|
Padding of the content. Supported values: [0 - 5]. |
|||
| path | path | ||
| Path of the page that the element references. | |||
| portrait | bool | ||
| v0.24.16 Flag to adjust the image 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
v1.0.0
Use icon-style instead. Icon style. |
|||
| subtle | bool | ||
| v0.23.0 Apply subtle theme colors. | |||
| thumbnail | path | ||
| Thumbnail image url, displayed on top or the left of the element. | |||
| title | string, hstring.RenderedString, hstring.HTML, template.HTML | ||
| Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. | |||
| wrapper | string | ||
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default. |
|||
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.
markdown
{{< card-group cols="4" gutter="3" header-style="none" orientation="none" >}}
{{< card color="primary" path="/docs/components/button/" />}}
{{< card color="secondary" path="/docs/components/button/" />}}
{{< card color="success" path="/docs/components/button/" />}}
{{< card color="danger" path="/docs/components/button/" />}}
{{< card color="warning" path="/docs/components/button/" />}}
{{< card color="info" path="/docs/components/button/" />}}
{{< card color="light" path="/docs/components/button/" />}}
{{< card color="dark" path="/docs/components/button/" />}}
{{< card color="white" path="/docs/components/button/" />}}
{{< card color="black" path="/docs/components/button/" />}}
{{< card color="body" path="/docs/components/button/" />}}
{{< card color="body-tertiary" path="/docs/components/button/" />}}
{{< /card-group >}}Custom Header
Use the header argument to customize the contents of the card.
markdown
{{< card-group cols="4" gutter="3" orientation="none" >}}
{{< card path="/guides/editing" header-style="full" />}}
{{< card path="/guides/editing" header-style="publication" />}}
{{< card path="/guides/editing" header-style="tags" />}}
{{< card path="/guides/editing" header-style="none" />}}
{{< /card-group >}}Custom Footer
Use the footer-style argument to customize the contents of the card.
markdown
{{< card-group cols="4" gutter="3" header-style="none" >}}
{{< card path="/guides/editing" footer-style="full" orientation="none" />}}
{{< card path="/guides/editing" footer-style="publication" orientation="none" />}}
{{< card path="/guides/editing" footer-style="tags" orientation="none" />}}
{{< card path="/guides/editing" footer-style="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 • 9 min read
markdown
{{< card path="/guides/editing" header-style="none" footer-style="none" orientation="stacked" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="/docs/components/button/" header-style="none" footer-style="none" orientation="stacked" padding="3" class="col-sm-12 col-lg-6 mx-auto mb-3" />}}
{{< card path="/guides/editing" header-style="publication" footer-style="tags" orientation="horizontal" class="col-sm-12 col-lg-8 mx-auto" />}}
{{< card path="/docs/components/button/" header-style="publication" footer-style="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
This is the
body of the card. It supports Markdown.
Title
This is the
body of the card. It supports Markdown too.
markdown
{{< card header-style="none" footer-style="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-style="none" footer-style="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.
markdown
{{< card path="/docs/components/button/" header-style="none" footer-style="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);
}