Hugo Book

- Introduction: https://hugo-book-demo.netlify.app/docs/getting-started/introduction/
- Create a Site: https://hugo-book-demo.netlify.app/docs/getting-started/create-a-site/
- Configuration: https://hugo-book-demo.netlify.app/docs/getting-started/configuration/
- Organisation: https://hugo-book-demo.netlify.app/docs/content/organisation/
- Pages: https://hugo-book-demo.netlify.app/docs/content/pages/
- Menus: https://hugo-book-demo.netlify.app/docs/content/menus/
- Blog: https://hugo-book-demo.netlify.app/docs/content/blog/
- Multi-Language: https://hugo-book-demo.netlify.app/docs/content/multilingual/
- Shortcodes: https://hugo-book-demo.netlify.app/docs/content/shortcodes/
- Asciinema: https://hugo-book-demo.netlify.app/docs/content/shortcodes/asciinema/
- Badges: https://hugo-book-demo.netlify.app/docs/content/shortcodes/badges/
- Buttons: https://hugo-book-demo.netlify.app/docs/content/shortcodes/buttons/
- Cards: https://hugo-book-demo.netlify.app/docs/content/shortcodes/cards/
- Columns: https://hugo-book-demo.netlify.app/docs/content/shortcodes/columns/
- Details: https://hugo-book-demo.netlify.app/docs/content/shortcodes/details/
- Hints: https://hugo-book-demo.netlify.app/docs/content/shortcodes/hints/
- Images: https://hugo-book-demo.netlify.app/docs/content/shortcodes/images/
- Mermaid: https://hugo-book-demo.netlify.app/docs/content/shortcodes/mermaid/
- Steps: https://hugo-book-demo.netlify.app/docs/content/shortcodes/steps/
- Tabs: https://hugo-book-demo.netlify.app/docs/content/shortcodes/tabs/
- KaTeX: https://hugo-book-demo.netlify.app/docs/content/shortcodes/katex/
- Styles: https://hugo-book-demo.netlify.app/docs/customization/styles/
- Inject Partials: https://hugo-book-demo.netlify.app/docs/customization/inject-partials/

# Cards

Content blocks with optional images and links. Often used with [Columns](/docs/content/shortcodes/columns) for grid layouts.

## Syntax

```tpl
{{</* card [href="..."] [image="..."] [title="..."] */>}}
Markdown content
{{</* /card */>}}
```

## Example

{{% columns %}}
- {{< card image="placeholder.svg" >}}
  ### With Image
  Cards can display an image above the content.
  {{< /card >}}

- {{< card href="/docs/content/shortcodes/cards" >}}
  ### With Link {anchor=false}
  When `href` is set, the entire card becomes clickable.
  {{< /card >}}

- {{< card title="Card" >}}
  ### Plain Card
  A basic card with no image or link, used for grouping related content.
  {{< /card >}}
{{% /columns %}}

## Parameters

`href`
: Makes the card a link. The entire card area becomes clickable.

`image`
: Path to an image displayed above the card content. Supports page resources and URLs.

`title`
: Accessible title for the card.

`alt`
: Alt text for the card image.

`class`
: Additional CSS classes.