hextra_mirror/exampleSite/content/docs/guide/shortcodes/cards.md

---
title: Cards Component
linkTitle: Cards
---

## Example

{{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="../callout" title="Card with tag" icon="tag" tag="A custom tag with Tooltip" tagtooltip="Tooltip for Tag">}}
  {{< card link="/" title="No Icon, but with Tooltip" linktooltip="Tooltip for Link" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}}
  {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
  {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

## Usage

```
{{</* cards */>}}
  {{</* card link="../callout" title="Callout" icon="warning" */>}}
  {{</* card link="../callout" title="Card with tag" tag="A custom tag with Tooltip" tagtooltip="Tooltip for Tag" */>}}
  {{</* card link="/" title="No Icon, but with Tooltip" linktooltip="Tooltip for Link" */>}}
{{</* /cards */>}}
```

```
{{</* cards */>}}
  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
  {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}
```

## Card Parameters

| Parameter     | Description                                                           |
|---------------|-----------------------------------------------------------------------|
| `link`        | URL (internal or external).                                           |
| `title`       | Title heading for the card.                                           |
| `linktooltip` | Tooltip (title-attribut) for the link.                                |
| `subtitle`    | Subtitle heading (supports Markdown).                                 |
| `icon`        | Name of the icon.                                                     |
| `tag`         | Text in tag.                                                          |
| `tagType`     | Type of the tag: `info` (blue), `warning` (yellow) and `error` (red). |
| `tagtooltip`  | Tooltip (title-attribut) for the Tag.                                 |
  
## Image Card

Additionally, the card supports adding image and processing through these parameters:

| Parameter  | Description                                 |
|----------- |---------------------------------------------|
| `image`    | Specifies the image URL for the card.       |
| `method`   | Sets Hugo's image processing method.        |
| `options`  | Configures Hugo's image processing options. |

Card supports three kinds of images:

1. Remote image: the full URL in the `image` parameter.
2. Static image: use the relative path in Hugo's `static/` directory.
3. Processed image: use the relative path in Hugo's `assets/` directory.

Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.

For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).

## Tags

Card supports adding tags which could be useful to show extra status information.

{{< cards >}}
  {{< card link="../callout" title="Card with default tag" tag="tag text" >}}
  {{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
  {{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
  {{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
  {{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
{{< /cards >}}

```
{{</* cards */>}}
  {{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
  {{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
  {{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
  {{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
{{</* /cards */>}}
```