InfoCard
Memo-style callout card for inline notes and tips, with intent accent colors and three sizes.
Playground
<InfoCard>All systems operational</InfoCard>01 Examples
Context information blocks
Basic Usage
<InfoCard intent="info" title="Note">Use InfoCard to display tips.</InfoCard>Intents
<InfoCard intent="success" title="Saved">Your changes are live.</InfoCard>
<InfoCard intent="warning" title="Heads up">This action cannot be undone.</InfoCard>
<InfoCard intent="danger" title="Failed">The build did not complete.</InfoCard>
<InfoCard intent="neutral" title="Aside">Also available as a CLI flag.</InfoCard>02 Accessibility
Each card is a named landmark
Without href the card renders an <aside>, so it is a
complementary landmark — named from title, or from the translated "Note" when
there is none. Four callouts on a page are four landmarks: give each one a title, or a
screen-reader user gets four stops that all announce the same word.
The title is a real heading
It renders <h3> by default, so the card appears in the document outline
under the section it sits in. Set headingLevel when the card is nested deeper —
a card inside a subsection that keeps the default jumps a level.
The intent is decoration, the title is the message
The accent colour carries no semantics: a screen reader announces a warning card exactly
like an info card. Put the severity in the words — "This action cannot be undone" — never
in the colour alone. The icon is aria-hidden for the same reason.
A card is not a live region
It is static prose in the reading order and is not announced when it appears. For
something that has to interrupt — a failed save, a validation error — Alert from @urbicon-ui/blocks is the component that carries the live
region.
With href, the whole card is one link
Passing href swaps the <aside> for an <a> labelled by the title, so the body text is inside the link rather than
beside it. Keep the body short in that mode, and keep the title meaningful on its own — it is
the entire accessible name.
03 API Reference
Complete list of component properties and their configurations
Prop | Type | Default | Description | |
|---|---|---|---|---|
children | Snippet | — | Content to render inside the InfoCard component | |
class | string | — | Extra classes merged onto the root element. | |
headingLevel | 1234 +2 more | 3 | Heading level for the card title, clamped to 1..6. Cards usually sit inside
a <Section> (h2), so h3 is the default.
It was a fixed h4 until 2026-08, which put an h2 → h4 skip into the
outline of every page that used a card directly under a section, and an
h1 → h4 one on the pages that use cards as their landing grid. Pass an
explicit level where the nesting differs. The title styling is class-driven,
so the level never changes how the card looks. | |
href | string | — | Render the card as a link to this URL. Falls back to an <aside> when omitted. | |
icon | string | — | Decorative glyph rendered before the title. Purely visual — it is hidden from assistive tech, so never put meaning here that the title does not carry. | |
intent variant | apidangerexampleinfo +6 more | info | Controls the color theme and semantic meaning of the InfoCard. Affects the overall appearance and user perception. Available options: api, danger, example, and 7 more. | |
size variant | lgmdsm | md | Controls the dimensions, padding, and text size of the InfoCard. Affects the component's physical footprint. Available options: lg, md, sm. | |
slotClasses | Partial<Record<InfoCardSlots, string>> | — | Per-slot class overrides for internal elements. | |
title | string | — | Heading shown above the body. Also becomes the card's accessible name
(aria-label), so it is deliberately not the native title tooltip. | |
unstyled | boolean | — | Strip all default styles; combine with slotClasses to rebuild from scratch. | |
...HTMLAttributes<HTMLElement> inherited | HTMLAttributes | — | HTML attributes (excluding: 'children' | 'title') | |
...InfoCardVariantProps variant | VariantProps | — | Styling variants from InfoCardVariantProps |
04 Types
Local type definitions used by this component.
Name | Kind | Category | Used by | Description | |
|---|---|---|---|---|---|
InfoCardProps | interface | props | 0 | Props interface for InfoCard component | |
InfoCardVariantProps | type | variant | 1 | — | |
InfoCardSlots | type | variant | 0 | Slot names derived from the tv() config above — single source of truth for slotClasses. |
05 Installation
Import
import { InfoCard } from '@urbicon-ui/docs';