This is a demo announcement, dismissible and configured in site.json.
Switch to latest

Cards

Responsive grid of linked or static cards for section overviews and feature grids.

The cards shortcode renders a responsive grid of cards. Each inner card shortcode defines one card with a title, optional body text, optional icon and an optional link that makes the whole card clickable.

Basic usage

text 
{{< cards >}}
{{< card title="Getting started" >}}
Install and configure Bora in under five minutes.
{{< /card >}}
{{< card title="Shortcodes" >}}
Embed diagrams, math, file trees, and more.
{{< /card >}}
{{< card title="Theming" >}}
Switch between light and dark, or add your own palette.
{{< /card >}}
{{< /cards >}}
Getting started

Install and configure Bora in under five minutes.

Shortcodes

Embed diagrams, math, file trees, and more.

Theming

Switch between light and dark, or add your own palette.

With icons

Pass any emoji or Unicode character as icon:

text 
{{< cards >}}
{{< card title="Getting started" icon="🚀" href="/docs/v1_0_0/en/getting-started/" >}}
Up and running in minutes.
{{< /card >}}
{{< card title="Features" icon="⚙️" href="/docs/v1_0_0/en/features/" >}}
Diagrams, math, file trees, steps, and more.
{{< /card >}}
{{< card title="Search" icon="🔍" >}}
Client-side full-text search, no server required.
{{< /card >}}
{{< /cards >}}
Getting started

Up and running in minutes.
Features

Diagrams, math, file trees, steps, and more.

Search

Client-side full-text search, no server required.

Linked cards

Add href to make the entire card surface a click target. Linked cards show a primary-color border and shadow on hover:

text 
{{< cards >}}
{{< card title="Changelog" href="/changelog/" >}}{{< /card >}}
{{< card title="Support" href="mailto:support@example.com" >}}{{< /card >}}
{{< /cards >}}
Changelog
Support

card parameters

Parameter Type Default Description
First positional / title string required Card heading.
icon string (none) Emoji or character shown above the title.
href string (none) URL. Makes the card a link.
Inner content markdown (none) Body text rendered below the title.

Notes

  • The grid uses auto-fill with a 220 px minimum column width, so it adapts from one column on narrow screens to three or four on wide ones.
  • Cards without href are <div> elements. Cards with href are <a> elements with full keyboard and screen-reader semantics.
  • Inner content is rendered as Markdown, so you can include inline code, links and emphasis.
Edit this page