Documentation
Guide
Shortcodes
Cards

Cards Component

Example

Callout No Icon
Image CardImage Card
Unsplash Landscape
Local ImageLocal Image
Raw image under static directory.
Local ImageLocal Image
Image under assets directory, processed by Hugo.

Usage 

{{< 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 heading for the card.
subtitleSubtitle heading (supports Markdown).
iconName of the icon.

Image Card

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

ParameterDescription
imageSpecifies the image URL for the card.
methodSets Hugo’s image processing method.
optionsConfigures 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.

Last updated on
CalloutDetails