Use cards in Markdown

Cards are Markdown directives in a Web Device content item. They organize an author-provided title, description, optional icon, and link as page content. A card does not create an AUP session or gain permission to run exec, write data, or edit the document.

This page is a live feature guide (source + rendered cards on the same page). Atomic unit pages: link-card, info-card, action-card, card-group.

Sample contract

link-card

Source:

::link-card{title="Web Device overview" description="Review the site structure and its boundary" href="/en/docs/web-device/overview/" icon="book"}

Rendered:

A link-card becomes a link only when it has a safe href. Clicking it performs ordinary page navigation only; it does not write content.

Source without href (not a navigation target):

::link-card{title="Not a link" description="Missing href stays non-interactive chrome"}

Rendered:

info-card

Source:

:::info-card{title="A read-only example" description="Content and layout are maintained separately"}
The body can contain paragraphs, lists, and code.

- A content item owns the reader-facing text
- `layout.aup` decides how a page organizes those items
:::

Rendered:

An info-card is not a link. Even if an author supplies an href, the current content reader does not promote it to a clickable card.

action-card

An action-card places explicit action nodes in a card body. This example contains only an ordinary navigation href, with no event, exec, or data write.

Source:

:::action-card{title="Continue reading" description="Place several navigation choices in one card" icon="book"}
::action{label="Read the AUP layout boundary" href="/en/docs/web-device/aup-reference/" variant="primary"}
:::

Rendered:

In Content Markdown, this action proves link navigation only. It is not evidence that a document can run a background action or has AFS or session permission.

Put several entry points in a card-group

The outer fence needs one more colon than the nested container directive. This card-group contains two leaf cards, so four colons are sufficient:

Source:

::::card-group
::link-card{title="Content objects" description="Review content and metadata" href="/en/docs/web-device/content-and-objects/" icon="book"}
::link-card{title="AUP boundary" description="See the difference between page layout and an AUP tree" href="/en/docs/web-device/aup-reference/" icon="layout"}
::::

Rendered:

Failure and limits

Card syntax belongs to the Web Device content-reading path. It is not a general input format for a .web component. To override or author a layout component, see Use and override components.

Verification evidence