Cards & Tiles Shortcodes

Documentation and live specimens for Carbon cards, base tiles, clickable tiles, expandable tiles, and digital business cards.

Read Time: 5 min

Cards and tiles group related information and actions into bounded, structured containers following the 16-column 2x Grid.

1. Card (card)

The card shortcode implements the expressive Carbon card component. Cards support optional eyebrows, status tags, action links with arrow icons, media headers, and the official Carbon AI modifier gradient border.

Parameters

ParameterTypeDefaultDescription
titleStringOptionalCard headline
eyebrowStringOptionalPre-heading taxonomy or category label
hrefStringOptionalTarget link URL
actionTextString"Learn more"Label for the footer action button
tagStringOptionalStatus tag text displayed in the header
tagColorString"blue"Tag colorway (blue, green, red, purple, warm-gray)
iconString"arrow--right"Icon name for the action link
aiBooleanfalseWhen true, applies the Carbon AI gradient border and AI badge
aiTextStringOptionalExplainability description for the AI popover

Standard Card Example

Learn how the theme compiles SCSS via Dart Sass and bundles vanilla JavaScript modules at build time with zero external CDNs.
View Architecture 
1
2
3

{{< card title="Hugo Pipes Asset Pipeline" eyebrow="Core Engine" tag="v11.2" href="/docs/architecture/" actionText="View Architecture" >}}
Learn how the theme compiles SCSS via Dart Sass and bundles vanilla JavaScript modules at build time with zero external CDNs.
{{< /card >}}

Card with AI Modifier (ai="true")

When a card contains content generated or synthesised by an artificial intelligence model, pass ai="true" to display the signature Carbon AI gradient border and explainability badge:

AI Model

AI-generated content

This summary text was generated by an AI model to illustrate placeholder rendering in theme cards.

This is sample body prose generated to show how the card renders with an AI modifier, complete with multi-stop gradient border and popover explainability.
Inspect Specifications 
1
2
3

{{< card title="Automated Syntax Summariser" eyebrow="Synthesised Text" tag="AI Model" href="/docs/shortcodes/" actionText="Inspect Specifications" ai="true" aiText="This summary text was generated by an AI model to illustrate placeholder rendering in theme cards." >}}
This is sample body prose generated to show how the card renders with an AI modifier, complete with multi-stop gradient border and popover explainability.
{{< /card >}}

2. Base Tile (tile)

The base tile shortcode renders a clean rectangular container using --cds-layer-01 background and standard border tokens. It can be formatted as a static block or a selectable item.

Example

Static Carbon Tile: A structural container used to present grouped information with standard Carbon layer padding and subtle boundary borders.
1
2
3

{{< tile >}}
**Static Carbon Tile**: A structural container used to present grouped information with standard Carbon layer padding and subtle boundary borders.
{{< /tile >}}

Tile with AI Modifier

AI-Flagged Container: Tiles configured with ai="true" render an accessible AI slug badge in the top right corner and a distinctive multi-colour gradient border.
1
2
3

{{< tile ai="true" aiText="This tile specimen contains AI-synthesised demo text." >}}
**AI-Flagged Container**: Tiles configured with `ai="true"` render an accessible AI slug badge in the top right corner and a distinctive multi-colour gradient border.
{{< /tile >}}

3. Clickable Tile (clickable-tile)

The clickable-tile turns the entire surface into a focusable link with keyboard accessibility and active state elevation.

Parameters

ParameterTypeDefaultDescription
hrefStringRequiredDestination link URL
titleStringOptionalTile headline

Example

Explore Navigation Shortcodes &rarr;
Navigate to breadcrumb, tab, content switcher, and pagination component specifications.
1
2
3

{{< clickable-tile href="/docs/shortcodes/navigation/" title="Explore Navigation Shortcodes &rarr;" >}}
Navigate to breadcrumb, tab, content switcher, and pagination component specifications.
{{< /clickable-tile >}}

4. Expandable Tile (expandable-tile)

The expandable-tile divides content into two sections: an above-the-fold summary always visible, and an expanded drawer revealed when the user clicks the interactive chevron. Use the <!-- more --> separator in Markdown to designate the split.

Parameters

ParameterTypeDefaultDescription
titleStringRequiredHeader title for the tile

Example

Click chevron to view full configuration details
Visible Summary: Essential deployment parameters are defined in hugo.yaml.
Expanded Detail: Additional settings—such as Web Worker batch sizes, MapLibre GL initial coordinates, and local font paths—can be configured under params.carbon or overridden per section via front-matter cascade.
1
2
3
4
5

{{< expandable-tile title="Click chevron to view full configuration details" >}}
**Visible Summary**: Essential deployment parameters are defined in `hugo.yaml`.
<!-- more -->
**Expanded Detail**: Additional settings—such as Web Worker batch sizes, MapLibre GL initial coordinates, and local font paths—can be configured under `params.carbon` or overridden per section via front-matter cascade.
{{< /expandable-tile >}}

5. Digital Business Cards (vcard)

The vcard shortcode parses RFC 6350 vCard files (.vcf) or direct parameters to render an interactive contact card complete with:

  • Instant .vcf file download.
  • One-click contact copying to clipboard.
  • Pure client-side, zero-network QR code generation.

Parameters

ParameterTypeDefaultDescription
fileStringOptionalPath to a .vcf file in static/
nameStringOptionalContact full name
titleStringOptionalProfessional job title
orgStringOptionalOrganisation or department
emailStringOptionalEmail address
phoneStringOptionalPhone number
websiteStringOptionalPersonal or organisation website
locationStringOptionalCity and country
badgeStringOptionalRole badge label
badgeColorString"blue"Tag colorway
githubStringOptionalGitHub profile URL
linkedinStringOptionalLinkedIn profile URL

Example

OM

Open Source Maintainer

Public Domain
Hugo Theme Engineering
Hugo Carbon Project
Reference contact card specimen demonstrating dynamic VCF generation, clipboard synchronization, and offline QR rendering.
Email maintainer@example.org
Phone +44 20 7946 0990
Website carbon.caldeira.cc
Location London, United Kingdom
GitHub ↗
RFC 6350 vCard 3.0

Scan with camera on iOS or Android to import contact directly

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{{< vcard
    name="Open Source Maintainer"
    title="Hugo Theme Engineering"
    org="Hugo Carbon Project"
    email="maintainer@example.org"
    phone="+44 20 7946 0990"
    website="https://carbon.caldeira.cc"
    location="London, United Kingdom"
    badge="Public Domain"
    badgeColor="green"
    github="https://github.com/caldeira-cc/hugo-theme-carbon" >}}
Reference contact card specimen demonstrating dynamic VCF generation, clipboard synchronization, and offline QR rendering.
{{< /vcard >}}