Skip to content

Cards#

View Markdown

Card, link-card, and card-grid blocks are opt-in. When disabled, the ::: forms stay literal.

Option Type Default
cards boolean / CardOptions false
import { oxContent } from "@ox-content/vite-plugin";

export default {
  plugins: [
    oxContent({
      cards: true,
    }),
  ],
};

Card#

::: card becomes <article class="ox-card">. Inner Markdown is parsed. The title comes from a leading heading or from ::: card[Title].

::: card

### Install

Copy the package and run the CLI.
:::

This site enables cards, so the next block is a live card:

Install#

Copy the package and run the CLI.

::: link-card[Title]{HREF} becomes <a class="ox-link-card" href="...">. Titles and descriptions are escaped. javascript:, data:, vbscript:, and protocol-relative // hrefs are rejected: the block still renders, but no anchor is emitted with that href.

::: link-card[Guide]{/getting-started}
Short description
:::

GuideShort description

Card grid#

::: card-grid wraps inner cards in <div class="ox-card-grid">. Lone cards and link cards also work outside a grid.

::: card-grid
::: card

### Install

Copy the package and run the CLI.
:::
::: link-card[Guide]{/getting-started}
Short description
:::
:::

Install#

Copy the package and run the CLI.

GuideShort description

Unclosed blocks stay literal and do not swallow the rest of the file. Markers inside fenced, inline, or indented code are left alone.

Last updated: