About QianDu
Community Maintenance Guide
Shortcodes
Cards

Cards

Example

Callout
Image CardImage Card
Qiandu Cards
Local ImageLocal Image
Qiandu Cards
Local ImageLocal Image
Qiandu Cards

use 

{{< cards >}}
  {{< card link="../callout" title="Callout" icon="warning" >}}
  {{< card link="/" title="No Icon" >}}
{{< /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

ParameterDescription
linkURL (internal or external)
titleTitle of the card
subtitleSubtitle (supports Markdown)
iconName of the icon

Image Card

Additionally, the card supports adding images and processing via the following parameters:

ParameterDescription
imageSpecify the image URL for the card.
methodSets Hugo’s image processing method.
optionsConfigure Hugo’s image processing options.

Cards support three kinds of images:

  1. Remote images: the full URL should be placed in the image parameter

  2. Static images: use a relative path from Hugo’s static/ directory

  3. Processed images: use a relative path from Hugo’s assets/ directory

Hextra automatically detects whether an image needs processing during the build process and applies the options parameter or the default settings (scaled, 800x, quality 80, WebP format) as needed.

It currently supports the following processing methods: Resize, Fit, Fill, and Crop.

For more information on Hugo’s built-in image processing commands, methods, and options, see their Image Processing Documentation.

CalloutsDetails