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

Parameter Description
link URL (internal or external)
title Title of the card
subtitle Subtitle (supports Markdown)
icon Name of the icon

Image Card

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

Parameter Description
image Specify the image URL for the card.
method Sets Hugo’s image processing method.
options Configure 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