Card & Grid

Cards with text, images, and links in responsive grids.

Layout

Subtitle emphasis

Align

Imagine with AstraTurn ideas into architectural visuals.

Build with OpenAIExplore tools for your next project.

Code with CodexDelegate engineering tasks to the cloud.

Usage#

Images#

Imagine with AstraTurn ideas into architectural visuals.

Code with CodexDelegate engineering tasks to the cloud.

Use image for your own image, or let an external href supply a preview. Set imageMode to slot or background. Background images blur behind the text; imageBlur=false turns that off. Use image=null to hide an image.

Use theme="light" or dark to keep text consistent over a fixed image. default follows the page; inverted reverses it.

::::CardGrid{columns=2}
:::Card{href="https://developers.openai.com/blog/architectural-visualization-with-astra" title="Imagine with Astra" subtitle="Turn ideas into architectural visuals." imageMode="slot"}
:::

:::Card{href="https://developers.openai.com/blog/mastering-codex-remote-for-engineering" title="Code with Codex" subtitle="Delegate engineering tasks to the cloud." imageMode="background" imageBlur=true theme="dark" align="bottom" minHeight=240}
:::
::::

Content#

A small hintA few words go a long way.

Give a card a plain-text title and subtitle, and an optional icon. Set emphasis to title or subtitle to choose the stronger label.

::::CardGrid{columns=2}
:::Card{title="A small hint" subtitle="A few words go a long way." icon="lightbulb" emphasis="title"}
:::

:::Card{title="A small hint" subtitle="A few words go a long way." icon="lightbulb" emphasis="subtitle"}
:::
::::

Links#

HintInline explanations shown on hover or focus.

OpenAI for Developers in 2025A year-end roundup of the biggest model, API, and platform shifts for building production-grade agents.

Add href to make the card a link. Missing text comes from the destination; internal links can also inherit its icon. Explicit text takes precedence.

Set inferText=false to stop filling in missing text. Set title, subtitle, or icon to null to hide that field.

::::CardGrid{columns=2}
:::Card{href="/docs/frontend/components/hint"}
:::

:::Card{href="https://developers.openai.com/blog/openai-for-developers-2025" image=null}
:::
::::

Layout#

Start at the topHorizontal layout: icon beside the text.

Settle at the bottomVertical layout: icon above the text.

Space betweenVertical layout: icon above, text below.

Use layout="vertical" to stack the icon and text, or horizontal to place them side by side. Set minHeight in pixels to give them room; content can still grow beyond it.

align accepts top, bottom, or between. Between separates the icon from the labels vertically, or the icon and title from the subtitle horizontally.

:::::CardGrid{columns=2}
::::CardGrid{columns=1}
:::Card{title="Start at the top" subtitle="Horizontal layout: icon beside the text." icon="lightbulb" layout="horizontal" align="top" minHeight=180}
:::

:::Card{title="Settle at the bottom" subtitle="Vertical layout: icon above the text." icon="book" layout="vertical" align="bottom" minHeight=180}
:::

::::

::::Card{title="Space between" subtitle="Vertical layout: icon above, text below." icon="rocket" layout="vertical" align="between" minHeight=376}
::::
:::::

Card Grid#

Nest grids to arrange your cards. Here, two cards sit on the left and one fills the right.

Grids use fewer columns when space is tight, including on mobile.

:::::CardGrid{columns=2}
::::CardGrid{columns=1}
:::Card{title="A small hint" subtitle="A few words go a long way." icon="lightbulb"}
:::

:::Card{title="One more detail" subtitle="Leave a little room for context." icon="book"}
:::

::::

::::Card{title="Room to explore" subtitle="A bigger space for your next idea." icon="rocket" align="between"}
::::
:::::

Card Reference#

titleDefault undefined: null | string; Plain-text title. Omit to infer it from the destination when inferText is enabled; null hides it.

subtitleDefault undefined: null | string; Plain-text subtitle, without Markdown. Omit to infer the destination description when inferText is enabled; null hides it.

inferTextDefault true: boolean; Fill missing title and subtitle from the linked page. Explicit text takes precedence; images and icons are controlled independently.

emphasisDefault "title": "title" | "subtitle"; Label receiving the stronger foreground color.

hrefDefault undefined: string; Internal or external destination. Omit for a non-interactive card; external destinations show an outgoing arrow.

themeDefault "default": "default" | "inverted" | "dark" | "light"; Follow the page theme, invert it, or lock the card to dark or light.

imageDefault undefined: null | string; Image path or HTTP(S) URL. Omit to inherit an external preview image; null disables the image.

imageModeDefault "slot": "slot" | "background"; Place the image in a top media slot or fill the card background.

imageBlurDefault true: boolean; Progressively blur a background image behind the text for readability. No color overlay; ignored without a background image.

layoutDefault "vertical": "vertical" | "horizontal"; Stack the icon above the labels, or place it beside them.

alignDefault "top": "top" | "bottom" | "between"; Place content at the top or bottom. between separates icon and labels vertically, or title and subtitle horizontally.

minHeightDefault undefined: number; Minimum card height in pixels. Content can grow beyond it.

iconDefault undefined: null | IconID; Registered icon ID. Omit to inherit the internal destination icon, including its ancestor icon; null hides it.

Grid Reference#

columnsDefault 2: number; Maximum number of columns, from 1 to 6. Narrower containers use fewer columns.