This page is for choosing. Every option the card parts and the motion system
offer is on it, side by side, each one showing the exact source that produces
it behind “Show code”. Nothing here is a new component: the variants are
modifiers on Card and the transitions are classes in recipes.css.
The reference tables are on Cards for the parts and in
docs/design-system.md for the motion tokens and the site theme.
Four tones, each of them a different answer to “what stands in for the edge”.
outlined is the default and card is its older name; filled and muted
are likewise the same tone. Padding and radius do not move between them, so a
row can mix tones and still line up.
<Card tone="elevated"> <CardContent>A shadow instead of a border.</CardContent></Card><Card tone="outlined"> <CardContent>The hairline card, unchanged.</CardContent></Card><Card tone="filled"> <CardContent>The muted fill, for a card inside a surface.</CardContent></Card><Card tone="ghost"> <CardContent>Nothing at rest. Point at it for the fill.</CardContent></Card>density moves the step the card parts pad to: 3 for compact, 4 by default,
5 for comfortable. A part that names its own step opts out and keeps it.
<Card tone="elevated" density="compact"> <CardContent>Elevated, compact.</CardContent></Card><Card tone="outlined" density="compact"> <CardContent>Outlined, compact.</CardContent></Card><Card tone="filled" density="compact"> <CardContent>Filled, compact.</CardContent></Card><Card tone="ghost" density="compact"> <CardContent>Ghost, compact.</CardContent></Card><Card tone="elevated"> <CardContent>Elevated, default.</CardContent></Card><Card tone="outlined"> <CardContent>Outlined, default.</CardContent></Card><Card tone="filled"> <CardContent>Filled, default.</CardContent></Card><Card tone="ghost"> <CardContent>Ghost, default.</CardContent></Card><Card tone="elevated" density="comfortable"> <CardContent>Elevated, comfortable.</CardContent></Card><Card tone="outlined" density="comfortable"> <CardContent>Outlined, comfortable.</CardContent></Card><Card tone="filled" density="comfortable"> <CardContent>Filled, comfortable.</CardContent></Card><Card tone="ghost" density="comfortable"> <CardContent>Ghost, comfortable.</CardContent></Card>top is the stacked card. side puts the frame down the leading edge at 40%
of the card and stacks again below 42rem, so a narrow viewport gets the top
placement whatever is asked for. background fills the card with the frame,
draws an overlay over it, and inverts the ink onto the fixed paper tone.
<Card> <CardMedia ratio="16/9"> <Media treatment="color-field" style="--accent: var(--helia-accent-purple)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Media on top</span> </CardHeader> <CardContent>The frame owns the ratio and the card stacks.</CardContent></Card>The frame leaves the flow and the card reserves its width, so the header, the body and the actions stay stacked.
<Card media="side"> <CardMedia ratio="16/9"> <Media treatment="graphite" style="--accent: var(--helia-accent-cyan)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Media beside</span> </CardHeader> <CardContent> The frame leaves the flow and the card reserves its width, so the header, the body and the actions stay stacked. </CardContent></Card>The ink inverts to the fixed paper tone, because the overlay is dark in both themes.
<Card media="background"> <CardMedia> <Media treatment="color-field" style="--accent: var(--helia-accent-blue)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Media behind</span> </CardHeader> <CardContent> The ink inverts to the fixed paper tone, because the overlay is dark in both themes. </CardContent></Card>A figure, its label, and an optional change. The number is the child, so it can
carry a unit or markup; the delta is a Badge and its tone is the caller’s,
because the component has no idea whether up is good.
Routes emitted
206
<StatCard label="Routes emitted">206</StatCard>Build time
41s-18%
<StatCard label="Build time" delta="-18%" deltaTone="success"> <span>41s</span></StatCard>Open findings
12+3
<StatCard label="Open findings" delta="+3" deltaTone="warning"> <span>12</span></StatCard>Bundle
84 kB
<StatCard label="Bundle" tone="elevated" density="compact"> <span>84 kB</span></StatCard>BigNumber is the figure with no card around it: the number at the display
step, the unit beside it a step down, and the label above or below. Sparkline
is the trend at control size, drawn by the same Plot-at-build path as Chart
and shipped as inline SVG — no axes, no gridlines, one series in
--helia-chart-1 unless the composition sets --accent.
The arrow and the ink are two props. direction says which way the number
went; deltaTone says whether that reads well, and only the composition knows,
because a figure that counts open findings goes up and that is not good news.
Both parts set their figures in tabular numerals, so a row of them lines up on
the digit.
Every number below is invented and describes this documentation site. Nothing here is a measurement of any part.
Routes emitted
206up+18
Build time
41sdown-18%
Pages published
128up+9
<Card> <CardContent variant="stats"> <BigNumber label="Routes emitted" delta="+18" direction="up"> <span>206</span> <Sparkline slot="sparkline" values={[164, 171, 169, 178, 186, 191, 199, 206]} ariaLabel="Routes emitted, rising across the quarter." marker /> </BigNumber> <BigNumber label="Build time" unit="s" delta="-18%" direction="down" deltaTone="success" > <span>41</span> <Sparkline slot="sparkline" kind="area" values={[58, 56, 57, 51, 48, 47, 43, 41]} ariaLabel="Build time, falling across the quarter." marker /> </BigNumber> <BigNumber label="Pages published" delta="+9" direction="up"> <span>128</span> <Sparkline slot="sparkline" values={[96, 101, 104, 110, 113, 119, 124, 128]} ariaLabel="Pages published, rising across the quarter." marker /> </BigNumber> </CardContent></Card>Build time
41s-18%
<StatCard label="Build time" delta="-18%" deltaTone="success" density="compact"> <span>41s</span> <Sparkline slot="sparkline" kind="area" values={[58, 56, 57, 51, 48, 47, 43, 41]} ariaLabel="Build time, falling across the quarter." lastValue="41s" width={110} height={28} /></StatCard>84kBdown-12%
Transferred weight
Neutral because nothing here knows whether lighter is the goal.
<BigNumber label="Transferred weight" labelPosition="below" step="heading" unit="kB" delta="-12%" direction="down" caption="Neutral because nothing here knows whether lighter is the goal."> <span>84</span></BigNumber>The accent is a hint, not a field, and so is the ink. A page spends both a few times: the accent word in the hero, one inked tile in a mosaic, the layer of a stack the page is about, the leading bar in a comparison, and the link out to the hub. The parts below are what make those moments cheap to write. What a page may spend, and how often, is the accent budget in the design system.
tone="ink" puts one card of a set on the ground the contrast hero uses,
pinned dark in both themes, with the inks and the accent re-derived against it.
The title, which is the link, takes the accent. One of them in a set: two
inked tiles is a dark row with a gap in it.
Guide
What each part owns, and how a subset of them composes.
Guide
Bands, grids and mosaics, and which one a section wants.
Reference
The spacing, radius and type ladders every part is built from.
<CardGrid columns={3} equalize class="not-content"> <LinkCard titleAs="h4" href="/helia-ui/cards/" eyebrow="Guide" title="The card parts"> What each part owns, and how a subset of them composes. </LinkCard> <LinkCard titleAs="h4" href="/helia-ui/layout/" eyebrow="Guide" title="Bands and grids"> Bands, grids and mosaics, and which one a section wants. </LinkCard> <LinkCard tone="ink" titleAs="h4" href="/helia-ui/foundations/" eyebrow="Reference" title="Tokens and scales"> The spacing, radius and type ladders every part is built from. </LinkCard></CardGrid>accent on a BigNumber colors the unit and nothing else. The glyph is the
smallest thing on a figure that still reads across a section, so it is what the
budget can afford here; the number stays ink.
Every number below is invented and measures nothing.
Vector over scalar
12×
Vector over DSP
8×
DSP over scalar
3×
<Card> <CardContent variant="stats"> <BigNumber label="Vector over scalar" unit="×" accent> <span>12</span> </BigNumber> <BigNumber label="Vector over DSP" unit="×" accent> <span>8</span> </BigNumber> <BigNumber label="DSP over scalar" unit="×" accent> <span>3</span> </BigNumber> </CardContent></Card>Stack is the chain of layers a product page opens with: what sits above the
thing, the thing, and what it runs on. One layer carries accent, and it is
the page’s own. Below 62rem the chain folds to two columns, because four
columns of wrapped pills on a phone is not a diagram.
<Stack ariaLabel="Where the kernel layer sits" layers={[ { label: 'Model tooling', chips: [{ label: 'Compiler' }, { label: 'Runtime' }] }, { label: 'Kernels', accent: true, chips: [{ label: 'This layer', accent: true }, { label: '23 families' }], }, { label: 'Acceleration path', chips: [{ label: 'Scalar' }, { label: 'DSP' }, { label: 'Vector' }] }, { label: 'Silicon', chips: [{ label: 'Cortex-M4' }, { label: 'Cortex-M55' }] }, ]}/>Bars is the comparison a heading needs and a chart is too heavy for: labeled
tracks against one scale, an axis under them, and one accented row. Every row
is text as well as a bar, so the reading survives without the tracks. Past a
handful of rows, or with a series that has a shape, reach for Chart.
The figures below are invented and measure nothing.
<Bars max={12} ticks={['0×', '6×', '12×']} caption="Invented figures, held here to show the scale." rows={[ { label: 'Vector', value: 12, display: '12.0×', accent: true }, { label: 'DSP', value: 3.3, display: '3.3×' }, { label: 'Scalar', value: 1, display: '1.0×' }, ]}/>Title, one line, and a cue that moves when the card is under the pointer. The link lives on the title and the recipe stretches it over the card, so the whole card is the target and the cue is inside the same hit area.
What each part owns, and how a subset of them composes.
<LinkCard titleAs="h4" href="/helia-ui/cards/" title="The card parts"> What each part owns, and how a subset of them composes.</LinkCard>Tokens
The scales every part compiles against.
<LinkCard titleAs="h4" href="/helia-ui/foundations/" title="Foundations" eyebrow="Tokens" tone="ghost"> The scales every part compiles against.</LinkCard>The four shapes the rest of the system reuses.
<LinkCard titleAs="h4" href="/helia-ui/primitives/" title="Primitives" tone="elevated" lift> The four shapes the rest of the system reuses.</LinkCard>Reference
Every variant on one page, with its source beside it.
<LinkCard titleAs="h4" href="/helia-ui/gallery/" title="Gallery" eyebrow="Reference" meta="Astro parts · React parts"> <Icon slot="icon" name="book" /> Every variant on one page, with its source beside it.</LinkCard>A page that renders its cards from a record writes none of their words in its source. The parts state their own line for the page’s Markdown twin, so an agent reading the rendition gets the card the page shows rather than the props it was written with.
<LinkCard titleAs="h4" href={modelCard.href} title={modelCard.title}> {modelCard.description}</LinkCard><Card> <CardHeader titleAs="h4" href={modelGuide.href}> {modelGuide.title} </CardHeader> <CardContent>{modelGuide.description}</CardContent></Card><Button href={modelAction.href} size="sm"> {modelAction.label}</Button>Six cards that need no image. Good artwork is the scarcest thing a card family
depends on, so each of these carries itself on type, a mark or a figure
instead. None of them is a new component: they are the CardHeader marks and
scale, two parts (CardList, CardQuote) and one CardContent variant, so
tone, density and the lift reach all of them unchanged.
Profiling
Every kernel reports its own cycle count, so a regression has a name before it has a bug report.
<Card density="comfortable"> <CardHeader titleAs="h4" eyebrow="Profiling"> <Icon slot="icon" name="gauge-high" /> <span>Latency you can budget</span> </CardHeader> <CardContent> Every kernel reports its own cycle count, so a regression has a name before it has a bug report. </CardContent></Card>Included
<Card density="comfortable"> <CardHeader titleAs="h4" eyebrow="Included"> <span>What the SDK ships with</span> </CardHeader> <CardList items={[ 'Quantisation-aware training recipes', 'A profiler that reads the device counters', 'Reference builds for every supported board', ]} /></Card>Step two
The converter keeps the calibration set with the artifact, so the same numbers come back on the next run.
<Card density="comfortable"> <CardHeader titleAs="h4" step={2} eyebrow="Step two"> <span>Quantise the graph</span> </CardHeader> <CardContent> The converter keeps the calibration set with the artifact, so the same numbers come back on the next run. </CardContent></Card>The profile told us where the cycles went on the first afternoon, which is a week we did not spend guessing.
<Card density="comfortable"> <CardQuote attribution="Dana Mercer" detail="Firmware lead" initials="DM" > The profile told us where the cycles went on the first afternoon, which is a week we did not spend guessing. </CardQuote></Card>Measured on device
Latency
18 ms
Energy
2.4 mJ
Model
96 kB
<Card density="comfortable"> <CardHeader titleAs="h4" eyebrow="Measured on device"> <span>Keyword spotting</span> </CardHeader> <CardContent variant="stats"> <StatCard label="Latency">18 ms</StatCard> <StatCard label="Energy">2.4 mJ</StatCard> <StatCard label="Model">96 kB</StatCard> </CardContent></Card>Platform
One card standing in for a hero, with nothing behind it but the type.
<Card density="comfortable" tone="filled"> <CardHeader titleAs="h4" scale="display" eyebrow="Platform"> <span>Ship the model, not the toolchain</span> </CardHeader> <CardContent> One card standing in for a hero, with nothing behind it but the type. </CardContent></Card>The same six with density="compact". The mark, the list gap and the figure
row all come off the density hook, so nothing here is restyled per size.
Profiling
<Card density="compact"> <CardHeader titleAs="h4" eyebrow="Profiling"> <Icon slot="icon" name="gauge-high" /> <span>Latency you can budget</span> </CardHeader> <CardContent>Every kernel reports its own cycle count.</CardContent></Card>Included
<Card density="compact"> <CardHeader titleAs="h4" eyebrow="Included"> <span>What the SDK ships with</span> </CardHeader> <CardList marker="bullet" items={[ 'Training recipes', 'A device profiler', 'Reference board builds', ]} /></Card>Step two
<Card density="compact"> <CardHeader titleAs="h4" step={2} eyebrow="Step two"> <span>Quantise the graph</span> </CardHeader> <CardContent>Calibration travels with the artifact.</CardContent></Card>A week we did not spend guessing.
<Card density="compact"> <CardQuote attribution="Dana Mercer" initials="DM"> A week we did not spend guessing. </CardQuote></Card>Measured on device
Latency
18 ms
Energy
2.4 mJ
<Card density="compact"> <CardHeader titleAs="h4" eyebrow="Measured on device"> <span>Keyword spotting</span> </CardHeader> <CardContent variant="stats"> <StatCard label="Latency">18 ms</StatCard> <StatCard label="Energy">2.4 mJ</StatCard> </CardContent></Card>Platform
<Card density="compact" tone="filled"> <CardHeader titleAs="h4" scale="display" eyebrow="Platform"> <span>Ship the model, not the toolchain</span> </CardHeader> <CardContent>The type carries it at any density.</CardContent></Card>Five transitions, each built from the motion tokens and nothing else, so the per-site dial and the reduced-motion rule reach all of them at once. Point at the cards below; none of them does anything at rest.
Background and border, 120ms. No transform: a card that moves under the pointer inside a grid reflows the row it shares.
<Card interactive> <CardHeader titleAs="h4"> <span>Hover me: the fill shifts</span> </CardHeader> <CardContent> Background and border, 120ms. No transform: a card that moves under the pointer inside a grid reflows the row it shares. </CardContent></Card>2px up and one shadow step, 200ms. Never a scale, which would resample the media and the text.
<Card lift tone="elevated"> <CardHeader titleAs="h4"> <span>Hover me: the card lifts</span> </CardHeader> <CardContent> 2px up and one shadow step, 200ms. Never a scale, which would resample the media and the text. </CardContent></Card>2px along, 120ms. The cue moves and the card holds still.
<LinkCard titleAs="h4" href="/helia-ui/gallery/#named-transitions" title="Hover me: the arrow nudges"> 2px along, 120ms. The cue moves and the card holds still.</LinkCard>Button and Chip are on the same 120ms step as the surface, so a card and the controls inside it settle together.
<Card> <CardActions> <Button href="/helia-ui/gallery/#named-transitions" size="sm"> <span>Hover me: the button fills</span> </Button> <Chip href="/helia-ui/gallery/#named-transitions">And the pill</Chip> </CardActions> <CardContent> Button and Chip are on the same 120ms step as the surface, so a card and the controls inside it settle together. </CardContent></Card>The fifth transition. The rail reads the same dial the CSS does, so a site with motion switched off gets the jump rather than the slide.
<ShowcaseCarousel variant="compact" tabs={['Compile', 'Profile', 'Deploy', 'Measure']}> <Card> <CardMedia ratio="16/9"> <Media treatment="color-field" style="--accent: var(--helia-accent-purple)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Compile</span> </CardHeader> </Card> <Card> <CardMedia ratio="16/9"> <Media treatment="color-field" style="--accent: var(--helia-accent-cyan)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Profile</span> </CardHeader> </Card> <Card> <CardMedia ratio="16/9"> <Media treatment="color-field" style="--accent: var(--helia-accent-green)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Deploy</span> </CardHeader> </Card> <Card> <CardMedia ratio="16/9"> <Media treatment="color-field" style="--accent: var(--helia-accent-orange)" /> </CardMedia> <CardHeader titleAs="h4"> <span>Measure</span> </CardHeader> </Card></ShowcaseCarousel>The site theme is nine dials in one file. :root is where a site sets them;
a section that wants its own treatment sets them on a wrapper that carries
data-helia-theme, which is the hook semantic.css re-derives the composed
tokens on. That is the mechanism every example below uses, and it is why they
can sit next to each other on one page. A wrapper without the attribute moves
only the dials themselves, not the radius steps and tinted surfaces built out
of them.
<div className="gallery-stack" data-helia-theme="knob-square" data-helia-density="compact" style="--helia-radius-scale: 0; --helia-surface-tint: var(--helia-accent-orange); --helia-surface-tint-amount: 6%"> <Card tone="elevated"> <CardContent>Square, compact, tinted orange.</CardContent> </Card> <Card tone="filled"> <CardActions> <Button href="/helia-ui/gallery/#theme-knobs" size="sm"> <span>Start</span> </Button> <Badge tone="secondary">Paired</Badge> </CardActions> </Card></div><div className="gallery-stack" data-helia-theme="knob-default" style="--helia-radius-scale: 1"> <Card tone="elevated"> <CardContent>The package defaults, for comparison.</CardContent> </Card> <Card tone="filled"> <CardActions> <Button href="/helia-ui/gallery/#theme-knobs" size="sm"> <span>Start</span> </Button> <Badge tone="secondary">Paired</Badge> </CardActions> </Card></div><div className="gallery-stack" data-helia-theme="knob-round" data-helia-density="comfortable" style="--helia-radius-scale: 1.6; --helia-surface-tint: var(--helia-accent-cyan); --helia-surface-tint-amount: 9%"> <Card tone="elevated"> <CardContent>Round, comfortable, tinted cyan.</CardContent> </Card> <Card tone="filled"> <CardActions> <Button href="/helia-ui/gallery/#theme-knobs" size="sm"> <span>Start</span> </Button> <Badge tone="secondary">Paired</Badge> </CardActions> </Card></div>The accent dial reaches a card through its artwork rather than its edge: no card part carries an accent rule or brim, so a subtree that names an accent shows it in the media, the badges and the type. The second accent is the one that pairs with it, and a link card spends it on the cue under the pointer.
<div data-helia-theme="knob-orange" style="--helia-product-accent: var(--helia-accent-orange)"> <Card> <CardMedia> <Media treatment="color-field" style="--accent: var(--helia-product-accent)" /> </CardMedia> <CardContent>An orange site.</CardContent> </Card></div><div data-helia-theme="knob-purple" style="--helia-product-accent: var(--helia-accent-purple)"> <Card> <CardMedia> <Media treatment="color-field" style="--accent: var(--helia-product-accent)" /> </CardMedia> <CardContent>A purple site.</CardContent> </Card></div><div data-helia-theme="knob-still" style="--helia-motion-scale: 0"> <Card lift tone="elevated"> <CardContent>Motion off: the lift arrives instantly.</CardContent> </Card></div>Reveal fades and rises what it wraps the first time it reaches the viewport.
Use it on a section, not on every card in one: a page where each element
arrives separately reads as a page that is still loading. stagger is the one
exception, and it is still one wrapper.
The hidden state is a class the script adds, so the content is visible without JavaScript, and the script returns before arming anything when the motion scale is 0.
Replay re-arms every reveal on this page, so the entry can be watched without scrolling away and back. It does nothing for a visitor who asked for reduced motion, because nothing armed.
Scroll on. The cards below start hidden and arrive as they reach the viewport.
<Reveal> <div className="gallery-grid not-content"> <Card tone="elevated"> <CardContent>One section, one reveal.</CardContent> </Card> <Card tone="elevated"> <CardContent>The cards inside it arrive together.</CardContent> </Card> <Card tone="elevated"> <CardContent>Which is the point of wrapping the section.</CardContent> </Card> </div></Reveal>A gap, so the staggered grid below is still out of view when the group above arrives.
The cascade is on the direct children, so the grid is the Reveal rather than
a div inside it: one wrapper with a grid class on it, and the cards are the
children that arrive.
Each one waits a fast step longer than the last.
<Reveal stagger class="gallery-grid not-content"> <Card tone="elevated"> <CardContent>With stagger, the children arrive in order.</CardContent> </Card> <Card tone="elevated"> <CardContent>Each one waits a fast step longer than the last.</CardContent> </Card> <Card tone="elevated"> <CardContent>The wrapper itself does not move.</CardContent> </Card> <Card tone="elevated"> <CardContent>The cascade stops at the sixth child.</CardContent> </Card></Reveal>A second gap, so the group below is still out of view when the first arrives.
A higher threshold waits until more of the section is in view.
Lower it for a section too tall to ever cross the mark.
<Reveal threshold={0.4}> <div className="gallery-grid not-content"> <Card tone="filled"> <CardContent> A higher threshold waits until more of the section is in view. </CardContent> </Card> <Card tone="filled"> <CardContent> Lower it for a section too tall to ever cross the mark. </CardContent> </Card> </div></Reveal>Four parts that arrange a page rather than fill one. None of them knows what it is carrying: the ground, the cards and the artwork are all handed in, so the same four cover a product page, a release note and a landing.
Band takes a section to the edges of the reading frame and keeps its content
on the readable measure. tone picks the ground and density the rhythm above
and below it. None of the four grounds draws an edge or an elevation: a section
that carried either would be a very wide card.
Ground
The paint runs to the edges of the frame and the words stay on the measure. Nothing is drawn around it.
<Band tone="muted"> <div slot="header"> <Eyebrow>Ground</Eyebrow> <h4>A section with a ground of its own</h4> </div> <p> The paint runs to the edges of the frame and the words stay on the measure. Nothing is drawn around it. </p></Band>CardGrid is the row of peers. A named count steps down at the two
breakpoints; auto fits whatever min allows, which is the answer for a set
whose length the page does not know. stagger makes the grid the reveal
itself, so the cards cascade in rather than the block arriving as one.
Two, three, four, or as many as the minimum allows.
Every row takes the height of the tallest card on the grid.
<CardGrid columns={3} equalize stagger class="not-content"> <Card tone="filled"> <CardHeader titleAs="h4"> <span>Columns</span> </CardHeader> <CardContent>Two, three, four, or as many as the minimum allows.</CardContent> </Card> <Card tone="filled"> <CardHeader titleAs="h4"> <span>Equalise</span> </CardHeader> <CardContent>Every row takes the height of the tallest card on the grid.</CardContent> </Card> <Card tone="filled"> <CardHeader titleAs="h4"> <span>Stagger</span> </CardHeader> <CardContent>One wrapper, one arrival, told across the row.</CardContent> </Card></CardGrid>Masonry packs cards of unequal height into columns with no dead space under
the short ones. It is CSS columns, so the packing is right in the first paint;
the cost is a reading order that runs down each column before it moves across.
Masonry packs by column with no JavaScript; use CardGrid when rows must
align.
The profile told us where the cycles went on the first afternoon.
A short card next to a long one is what the layout is for. Forcing the two to one height is what makes a set of notes look padded.
Included
<Masonry columns={3} class="not-content"> <Card tone="filled"> <CardQuote attribution="Dana Mercer" detail="Firmware lead" initials="DM"> The profile told us where the cycles went on the first afternoon. </CardQuote> </Card> <Card tone="filled"> <CardHeader titleAs="h4"> <span>Uneven by design</span> </CardHeader> <CardContent> A short card next to a long one is what the layout is for. Forcing the two to one height is what makes a set of notes look padded. </CardContent> </Card> <Card tone="filled"> <CardHeader titleAs="h4" eyebrow="Included"> <span>What the column keeps</span> </CardHeader> <CardList items={[ 'Each card whole across a break', 'The gap on the spacing scale', 'One column below 42rem', ]} /> </Card></Masonry>Mosaic gives one card the room to carry artwork and fills the rest of the set
around it. The feature is the first child rather than a prop, so the
arrangement follows reading order. pattern moves it to the end of the set or
across the top.
Two columns by two rows, with somewhere to put the artwork.
<Mosaic class="not-content"> <Card tone="elevated" media="background"> <CardMedia> <Media treatment="color-field" style="--accent: var(--helia-accent-cyan)" /> </CardMedia> <CardHeader titleAs="h4"> <span>The feature</span> </CardHeader> <CardContent>Two columns by two rows, with somewhere to put the artwork.</CardContent> </Card> <Card tone="filled"> <CardContent>The rest fill the remaining cells.</CardContent> </Card> <Card tone="filled"> <CardContent>In the order they were written.</CardContent> </Card> <Card tone="filled"> <CardContent>Nothing here is placed by hand.</CardContent> </Card></Mosaic>The rest of this section is not an example on a stage: the bands are on the page itself, which is the only way to see a ground actually run to the edges and a run of sections read as one rhythm. Scroll it as a page rather than as a set of parts.
Overview
Featured
Artwork needs room, and a grid of equals says nothing about which card is the point.
Capabilities
The section above it has none, so this one reads as a step rather than as a box.
Paint to the edges, text on the same width as the prose above it.
No edge, no brim, no shadow. The ground is the whole of the signal.
Notes
We stopped arguing about section spacing the week the bands landed.
Good artwork is the scarcest thing a card family depends on, so the options that carry a card without an image are the ones a long page leans on.
Covered
Three columns, no measuring, no layout shift when the font lands.
The inked ground is pinned dark in both themes, because ink that follows the theme over a ground that does not is a section that reads half the time. Code slotted into it holds the dark syntax theme on either page theme, for the same reason.
import { Band } from '@ambiqai/helia-ui/astro';Chart draws with Observable Plot at build and ships the result as inline SVG,
so a page with five charts on it still ships no chart JavaScript. The palette is
written as var(--helia-chart-*), which is what lets a figure that will never be
redrawn follow the theme toggle.
The title and the subtitle are the part’s HTML rather than Plot’s type, and the subtitle says what is plotted against what — which is why no axis is titled. Gridlines run across the measure; only a scatter, which has a measure on both axes, gets the second set.
Every number below is invented and describes this documentation site. Nothing here is a measurement of any part.
Weekly page views
Page views against week of the quarter, by section
<Chart title="Weekly page views" subtitle="Page views against week of the quarter, by section" caption="Synthetic series." kind="line" data={trafficSeries} x="week" y="views" series="section" width={900} height={280}/>Build time by stage
Wall-clock seconds against build stage, by cache profile
<Chart title="Build time by stage" subtitle="Wall-clock seconds against build stage, by cache profile" kind="bar" data={buildSeries} x="stage" y="seconds" series="profile" width={900} height={280}/>Pages published
Pages on the site against week of the quarter
<Chart title="Pages published" subtitle="Pages on the site against week of the quarter" kind="area" data={pagesSeries} x="week" y="pages" width={900} height={260}/>Weight against score
Performance score against transferred kilobytes, by template
<Chart title="Weight against score" subtitle="Performance score against transferred kilobytes, by template" kind="scatter" data={weightSeries} x="transferKb" y="score" series="template" width={900} height={280}/>A chart with more categories than a row of bars can name, and a measure that spans more than a decade, needs four options the defaults do not give it. The set below is invented — the routines do not exist and neither do the ratios — but it is shaped like the one the options were written for: fourteen long names, three series, and speedups from under one to twelve.
orientation="horizontal" puts the categories on the vertical axis and takes
the left margin from the longest label, so a name is never cut. The data
contract does not move with the drawing: x still names the categories and y
still names the measure.
Speedup by routine
Times faster than the reference path, by code path
<Chart title="Speedup by routine" subtitle="Times faster than the reference path, by code path" caption="Invented routines and invented ratios." kind="bar" data={routineSpeedups} x="routine" y="speedup" series="path" orientation="horizontal" width={900} height={620}/>scale moves the measure. A log axis ticks at 1, 2 and 5 through each decade
it spans and rounds its own ends to that sequence unless min and max say
otherwise, which is what stops a set with one twelve-times result in it from
drawing every other bar as a stub. A log axis cannot draw a zero or a negative
number: given one, the chart is drawn linear and the build log says why.
Speedup by routine, logarithmic
Times faster than the reference path, by code path
<Chart title="Speedup by routine, logarithmic" subtitle="Times faster than the reference path, by code path" kind="bar" data={routineSpeedups} x="routine" y="speedup" series="path" orientation="horizontal" scale={{ type: 'log', min: 0.5 }} valueFormat={(value) => `${value}x`} width={900} height={620}/>Inside a group the bars run in the order the rows first name the series, not in
the order those names sort in, and the legend lists them in that same order. The
series here are written fastest first — vector path, scalar path,
reference — which is not alphabetical, so the two orders agreeing is the
assertion rather than a coincidence.
Speedup by routine, compact
Times faster than the reference path, by code path
<Chart title="Speedup by routine, compact" subtitle="Times faster than the reference path, by code path" kind="bar" data={routineSpeedups} x="routine" y="speedup" series="path" orientation="horizontal" density="compact" width={900} height={520}/>axis titles an axis the subtitle cannot carry the unit for, valueLabels
writes each bar’s value at its end, and referenceLines draws a rule across
the measure. A constant baseline belongs on the rule rather than in a third
series: it costs a palette color, a legend entry and a third of the bars to
draw a line. Value labels are dropped as a set when the bands are too small to
hold them, so a chart that shows them at one height stops showing them at
another rather than overprinting.
Speedup against the reference path
Two code paths, fourteen routines
<Chart title="Speedup against the reference path" subtitle="Two code paths, fourteen routines" kind="bar" data={routinePaths} x="routine" y="speedup" series="path" orientation="horizontal" scale={{ type: 'log', min: 0.5 }} axis={{ valueLabel: 'Times faster than reference', categoryLabel: 'Routine' }} valueLabels valueFormat={(value) => `${value}x`} referenceLines={[{ value: 1, label: 'reference' }]} width={900} height={480}/>ChartGroup gives the charts equal columns, so three drawn at the same width
and height line up across the row and read as one figure. Draw them at a width
near the column, not at the page width: the SVG scales into its column and takes
its type with it.
Page views
Views against week, by section
Build time
Seconds against stage, by cache profile
Pages published
Pages against week
<ChartGroup> <Chart title="Page views" subtitle="Views against week, by section" kind="line" data={trafficSeries} x="week" y="views" series="section" width={300} height={200} density="compact" /> <Chart title="Build time" subtitle="Seconds against stage, by cache profile" kind="bar" data={buildSeries} x="stage" y="seconds" series="profile" width={300} height={200} density="compact" /> <Chart title="Pages published" subtitle="Pages against week" kind="area" data={pagesSeries} x="week" y="pages" width={300} height={200} density="compact" /></ChartGroup>Three parts for an index rather than a grid of cards: the tile that marks an entry, the row that is one entry, and the panel that sets a short piece of writing beside the code it describes.
The box comes off the control-height scale and the frame is one of three.
--accent is per instance, so a list can give every entry a color of its own
without the part learning what the list holds.
<div className="helia-display-row"> <IconTile name="microchip" size="sm" /> <IconTile name="microchip" /> <IconTile name="microchip" size="lg" /> <IconTile name="gauge-high" variant="outlined" /> <IconTile name="gauge-high" variant="filled" /> <IconTile name="chart-line" size="lg" variant="filled" style="--accent: var(--helia-accent-cyan)" /></div>The anchor is the row itself, so the tile, the title and the line are one hit
area and one accessible name. Hover tints the row where it sits; nothing
lifts. Two to a desktop column and one to a phone is CardGrid columns={2}.
<CardGrid columns={2}> <IconRow href="/helia-ui/cards/" title="Cards" icon="layer-group"> Every part of the card family, and the modifiers that move them. </IconRow> <IconRow href="/helia-ui/code/" title="Code" icon="code"> Fences, language tabs and the terminal transcript. </IconRow> <IconRow href="/helia-ui/layout/" title="Layout" icon="table-columns"> Bands, grids and the two mosaics. </IconRow> <IconRow href="/helia-ui/foundations/" title="Foundations" icon="palette"> The tokens every recipe on this page is built from. </IconRow></CardGrid>The code slot is what the panel exists for: the block is the answer to the
sentence beside it rather than a fence further down the page. ratio gives the
two columns their share of the width, and below 62rem the text leads and the
code follows.
Quickstart
The command reads the model, runs it on the attached board and writes the layer timings beside it.
npm run profile -- modelprofile('model')<SplitPanel ratio="3:2" titleAs="h4"> <span slot="eyebrow">Quickstart</span> <span slot="title">Profile a model on the board</span> <div slot="body"> The command reads the model, runs it on the attached board and writes the layer timings beside it. </div> <CodeTabs slot="code" ariaLabel="Profiler quickstart" tabs={[ { label: 'Shell', language: 'bash', code: 'npm run profile -- model', }, { label: 'Python', language: 'python', code: "profile('model')", }, ]} /></SplitPanel>The top of a landing page. The headline is the default slot rather than a prop,
because the word that takes the product accent has to be marked in the markup:
wrap it in <em> and the hero draws it in --helia-product-accent with the
slant taken off. The side column renders only when aside or media has
something in it, and below 62rem it stacks under the lede.
In MDX the headline goes in a <Fragment> on one line, with a blank line
between it and every slotted child. Bare text on its own line is flow content,
so MDX wraps it in a paragraph inside the heading and pulls the line after it
into the same paragraph, which costs the first action its slot.
data-helia-accent is set on the example itself to show one product’s color on
a page that carries none. A product site sets it once, through the Starlight
plugin’s accent option, and writes no CSS.
The copy here is placeholder, not an approved product claim. The code frame in
the side column holds the dark treatment on either page theme, the way one
inside a contrast Band does, down to the frame’s title and buttons.
Kernel library
A kernel layer with tuned operators, package delivery, and integration paths for the toolchains a firmware build already uses.
Operators
200+
Op types
53
Models
40+
Paths
4
npm install @example/kernels<Hero variant="contrast" titleAs="h3" data-helia-accent="helia-core" eyebrow="Kernel library" badge="Preview" summary="A kernel layer with tuned operators, package delivery, and integration paths for the toolchains a firmware build already uses."> <Fragment>Kernel <em>acceleration</em> for the edge.</Fragment>
<Button slot="actions" href="/helia-ui/">Getting started</Button>
<Button slot="actions" href="/helia-ui/gallery/" variant="secondary">Why</Button>
<Button slot="actions" href="/helia-ui/reference/" variant="secondary">API</Button>
<CardGrid slot="aside" columns={2}> <StatCard label="Operators">200+</StatCard> <StatCard label="Op types">53</StatCard> <StatCard label="Models">40+</StatCard> <StatCard label="Paths">4</StatCard> </CardGrid> <CodeBlock slot="media" language="bash" label="Install" code={'npm install @example/kernels'} /></Hero>With no side column and no ground, the same part is the lede on its own
measure: a section opener rather than a front door. The lede here is the
summary slot rather than the prop, which is what a claim carrying bold or
inline code needs; the slot wins wherever both are set.
Design system
Every part on this page is composed from the same tokens, so a site adopts
the theme rather than a stylesheet: the recipes live in recipes.css
and the site writes none of them.
<Hero titleAs="h3" eyebrow="Design system"> <Fragment>Parts, not <em>pages</em>.</Fragment>
<Fragment slot="summary"> Every part on this page is composed from the same tokens, so a site adopts **the theme** rather than a stylesheet: the recipes live in `recipes.css` and the site writes none of them. </Fragment>
<Button slot="actions" href="/helia-ui/foundations/">Foundations</Button>
<Button slot="actions" href="/helia-ui/cards/" variant="secondary">Cards</Button></Hero>An API reference is generated, not written, and it is generated for four
languages. The extractors differ, the model they produce does not, and these
parts render the model: the same header, the same table, the same columns for
a Python function, a C function and a TypeScript function. Everything below
comes from one hand-written model in src/lib/reference-gallery-model.ts.
Run a model on a connected target and return a typed collection of measurements.
src/helia/profiler.py:48
profile_model( model: str | Path, *, board: str, timeout_s: float = 30.0,) -> ProfileResultParameters
| Name | Type | Default | Description |
|---|---|---|---|
model | str | Path | Required | Path to the model artifact to profile. |
board | str | Required | Target board identifier used by the active probe. |
timeout_s | float | 30.0 | Maximum time to wait for the target to complete. |
<RefSymbol {...symbolProps(REFERENCE_EXAMPLES.python)} level={3}> <RefSection title="Parameters"> <RefParams caption="Parameters of profile_model" density="compact" rows={paramRows(REFERENCE_EXAMPLES.python)} /> </RefSection></RefSymbol>Run the same operation with caller-owned configuration and result structures.
include/profile.h:112
profile_status_t profile_model( const profile_config_t *config, profile_result_t *result);Parameters
| Name | Type | Default | Description |
|---|---|---|---|
config | const profile_config_t * | Required · in | Profiling configuration. The caller retains ownership. |
result | profile_result_t * | Required · out | Receives measurements and execution metadata. |
<RefSymbol {...symbolProps(REFERENCE_EXAMPLES.c)} level={3}> <RefSection title="Parameters"> <RefParams caption="Parameters of profile_model" density="compact" rows={paramRows(REFERENCE_EXAMPLES.c)} /> </RefSection></RefSymbol>Run the same operation from the browser client against a gateway.
src/client/profile.ts:31
function profileModel( model: string | URL, options: ProfileOptions,): Promise<ProfileResult>Parameters
| Name | Type | Default | Description |
|---|---|---|---|
model | string | URL | Required | Where the model artifact can be fetched from. |
options | ProfileOptions | {} | Board, measurements, and the gateway to dispatch to. |
<RefSymbol {...symbolProps(REFERENCE_EXAMPLES.typescript)} level={3}> <RefSection title="Parameters"> <RefParams caption="Parameters of profileModel" density="compact" rows={paramRows(REFERENCE_EXAMPLES.typescript)} /> </RefSection></RefSymbol>A generated module page carries more symbols than a table of contents will show, so it indexes itself; a site that builds its own sidebar takes the same tree as nested links.
profile_modelfunctionRun a model on a connected target.ProfileResultclassThe measurements a run produced.<RefMembers label="On this page" items={[ { id: 'helia.profiler.profile_model', name: 'profile_model', kind: 'function', summary: 'Run a model on a connected target.', }, { id: 'helia.profiler.ProfileResult', name: 'ProfileResult', kind: 'class', summary: 'The measurements a run produced.', }, ]}/><RefNav label="API reference" items={REFERENCE_NAV} />The rest of the Astro parts, one example each. They are documented in depth on their own pages; they are here so that one page answers what the package can draw.
const average = total / samples.length;average = total / len(samples)<CodeTabs ariaLabel="Average latency implementation" tabs={[ { label: 'TypeScript', language: 'typescript', code: 'const average = total / samples.length;', }, { label: 'Python', language: 'python', code: 'average = total / len(samples)', }, ]}/><AsciiTerminal title="Expected output" lines={[ { kind: 'command', text: 'npm run build' }, { kind: 'muted', text: 'Resolving configuration…' }, { kind: 'output', text: ' ENTRY src/index.ts' }, { kind: 'output', text: ' TARGET es2022' }, { kind: 'warning', text: ' ! no accent color set' }, { kind: 'error', text: ' x missing tsconfig path alias' }, { kind: 'success', text: '✓ Build complete' }, ]}/><AsciiTerminal title="From a module" lines={modelTranscript} /><div className="helia-callout-stack"> <Callout title="Keep the calibration set"> The converter writes it beside the artifact, so the next run starts from the same numbers. </Callout> <Callout tone="warning" title="Density is inherited"> A part that names its own step opts out of the hook and keeps it. </Callout></div>Every example carries the MDX that renders it.
<Timeline heading="What's new" groups={[ { label: 'Week two', items: [ { title: 'The gallery shows its own source', description: 'Every example carries the MDX that renders it.', }, ], }, { label: 'Week one', items: [{ title: 'Content-first cards landed' }], }, ]}/>When it is a modifier on a part rather than a part of its own.
On the page for the part, not on this one.
<AccordionGroup items={[ { title: 'When does a variant earn a place here?', content: 'When it is a modifier on a part rather than a part of its own.', }, { title: 'Where are the reference tables?', content: 'On the page for the part, not on this one.', }, ]}/>Chapter
No border, no radius, no shadow: a chapter-level section.
<EditorialBand tone="paper"> <SectionHeader eyebrow="Chapter" title="A band, not a card" description="No border, no radius, no shadow: a chapter-level section." /></EditorialBand>Parts
One row above a section, with the link that leaves it.
<SectionHeader eyebrow="Parts" title="Everything the package draws" description="One row above a section, with the link that leaves it." href="/helia-ui/reference/astro-parts/" linkLabel="All contracts"/>| Tone | What stands in for the edge |
|---|---|
| elevated | A shadow |
| outlined | A hairline border |
| filled | A muted fill |
| ghost | Nothing, until the pointer arrives |
<DataTable caption="Card tones" columns={['Tone', 'What stands in for the edge']} rows={[ ['elevated', 'A shadow'], ['outlined', 'A hairline border'], ['filled', 'A muted fill'], ['ghost', 'Nothing, until the pointer arrives'], ]}/><MediaEmbed title="YouTube embed sample" videoId="M7lc1UVf-VE" caption="The player is not requested until the visitor presses play." duration="1:24"/>Section label
Inline label<Eyebrow>Section label</Eyebrow><Eyebrow as="span">Inline label</Eyebrow><div className="helia-badge-row"> <Chip>Neutral</Chip> <Chip tone="accent">Accent</Chip> <Chip tone="static">Static</Chip> <Chip href="/helia-ui/gallery/#other-parts">Linked</Chip> <Chip size="md">Medium</Chip> <Chip size="md" tone="static"> Medium static </Chip></div><div className="helia-display-row"> <Button href="/helia-ui/gallery/#other-parts">Primary</Button> <Button href="/helia-ui/gallery/#other-parts" variant="secondary"> Secondary </Button> <Button href="/helia-ui/gallery/#other-parts" variant="ghost"> Ghost </Button> <Button href="/helia-ui/gallery/#other-parts" size="sm"> Primary, small </Button> <Button href="/helia-ui/gallery/#other-parts" variant="secondary" size="sm" > Secondary, small </Button> <Button href="/helia-ui/gallery/#other-parts" variant="ghost" size="sm"> Ghost, small </Button></div>Info, medium
With a dot
<div className="helia-badge-row"> <Badge>Neutral</Badge> <Badge tone="info">Info</Badge> <Badge tone="success">Success</Badge> <Badge tone="warning">Warning</Badge> <Badge tone="danger">Danger</Badge> <Badge tone="accent">Accent</Badge> <Badge size="md">Neutral, medium</Badge> <Badge size="md" tone="info"> Info, medium </Badge> <Badge size="md" tone="success" dot> With a dot </Badge></div><div className="gallery-stack"> <div className="helia-display-row"> <Icon name="gauge-high" text="gauge-high" size="sm" /> <Icon name="memory" text="memory" size="sm" /> <Icon name="microchip" text="microchip" size="sm" /> </div> <div className="helia-display-row"> <Icon name="gauge-high" text="gauge-high" size="md" /> <Icon name="memory" text="memory" size="md" /> <Icon name="microchip" text="microchip" size="md" /> </div> <div className="helia-display-row"> <Icon name="gauge-high" text="gauge-high" size="lg" /> <Icon name="memory" text="memory" size="lg" /> <Icon name="microchip" text="microchip" size="lg" /> </div> <div className="helia-display-row"> <Icon name="gauge-high" /> <Icon name="memory" /> <Icon name="microchip" /> <Icon name="chart-line" /> <Icon name="circle-info" /> <Icon name="arrow-right" /> </div></div>Standalone plots keep the same separation as other prose blocks. A chart group owns the spacing between its plots.
| Build | Size |
|---|---|
| Example | 24 |
Size by build
Illustrative size units
First grouped plot
Second grouped plot