Cards Component

Example

Callout No Icon

Image Card

Unsplash Landscape

Local Image

Raw image under static directory.

Local 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

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

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:

Remote image: the full URL in the image parameter.
Static image: use the relative path in Hugo’s static/ directory.
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.