Typography & display primitives
The prose + display kit: SvTitle / SvText / SvAnchor / SvBlockquote / SvMark / SvList for text, plus SvKbd, SvCode, SvAspectRatio and SvVisuallyHidden for the small display bits. Size decoupled from heading level, text tones, line clamping - all themed from the --sg-* tokens.
A live, editable Svelte 5 component example from the SvGrid gallery (Layout). Read the SvGrid UI component docs for the full API.
About this example
The prose and display primitives of SvGrid UI in Svelte 5: SvTitle with size decoupled from heading level, SvText with tones and line clamping, SvAnchor with an external marker, SvBlockquote with a citation, SvMark and SvList in ordered, unordered and none types, plus SvKbd for key combinations, SvCode, SvAspectRatio and SvVisuallyHidden for the small display bits. All themed from the tokens.
Typography + display primitives - SvTitle / SvText / SvAnchor / SvBlockquote / SvMark / SvList for prose, and SvKbd / SvCode / SvAspectRatio / SvVisuallyHidden for the small display bits. All themed from the --sg-* tokens.
Imports, features and API used
Imports: @svgrid/grid
Frequently asked questions
How is the heading level separated from its size?
order sets the semantic h1 to h6 element and size sets the visual scale independently, so a page can keep a correct outline while a card title looks small.
How do I clamp long text?
SvText takes clamp with a line count; the text is cut after that many lines with an ellipsis and the full content stays available to assistive technology.
What does SvVisuallyHidden do?
It renders content that screen readers announce but sighted users do not see, for labels and instructions that would clutter the layout.
Related documentation
Related articles
- Saved Views - Persist Grid Layout and Filters - Give users named, switchable snapshots of column order, sorting, filters, and grouping - persisted to localStorage or a server adapter - using SvGrid's createNamedViews API.
- Avoiding Layout Thrash in Custom Grid Cells - Layout thrash from interleaved DOM reads and writes is the most common cause of scroll jank in grids with custom cells - here is how to find it and design your way out of it.
- Displaying Tree Data and Hierarchies in SvGrid - Render parent-child hierarchies - org charts, file trees, category taxonomies - in SvGrid with expandable rows, size rollups, and lazy child loading.
Source code (410-typography-display.svelte)
<script lang="ts">
/**
* Typography + display primitives - SvTitle / SvText / SvAnchor / SvBlockquote /
* SvMark / SvList for prose, and SvKbd / SvCode / SvAspectRatio /
* SvVisuallyHidden for the small display bits. All themed from the --sg-* tokens.
*/
import {
SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList,
SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden,
SvStack, SvGroup, SvCard,
} from '@svgrid/grid'
const steps = ['Install the package', 'Import the component', 'Render it in your markup']
</script>
<div class="page">
<SvStack gap={24}>
<section>
<SvTitle order={2} size={1}>Typography</SvTitle>
<SvText tone="muted">A consistent type scale and text tones built on the shared tokens.</SvText>
</section>
<section>
<SvStack gap={8}>
<SvTitle order={2}>Headings decouple size from level</SvTitle>
<SvTitle order={3} size={5}>An h3 sized like an h5 (semantic, but compact)</SvTitle>
<SvText>
Body text with a <SvMark>highlighted</SvMark> phrase, a
<SvMark tone="success">success</SvMark> tint, and an inline
<SvAnchor href="https://svelte.dev" external>external link</SvAnchor>.
</SvText>
<SvText size="sm" tone="muted" clamp={2}>
This paragraph is clamped to two lines - a longer description that keeps going
well past what fits so you can see the ellipsis kick in at the end of the second
line rather than pushing the layout taller than intended on small cards.
</SvText>
</SvStack>
</section>
<section>
<SvTitle order={2}>Blockquote</SvTitle>
<SvBlockquote cite="Ada Lovelace">
The Analytical Engine weaves algebraic patterns just as the Jacquard loom weaves flowers and leaves.
</SvBlockquote>
</section>
<section>
<SvTitle order={2}>Lists</SvTitle>
<SvGroup gap={40} align="start">
<SvList type="ordered" items={steps} />
<SvList items={['Themed from --sg-* tokens', 'Ordered / unordered / none', 'Custom li snippet supported']} />
</SvGroup>
</section>
<section>
<SvTitle order={2}>Display bits</SvTitle>
<SvStack gap={12}>
<SvGroup gap={10} align="center">
<SvText size="sm" tone="muted">Open the palette with</SvText>
<SvKbd keys={['Ctrl', 'K']} />
<SvText size="sm" tone="muted">or press</SvText>
<SvKbd>Esc</SvKbd>
<SvText size="sm" tone="muted">to close.</SvText>
</SvGroup>
<SvText>Install with <SvCode>npm i @svgrid/grid</SvCode>, then:</SvText>
<SvCode block code={`import { SvTitle, SvText } from '@svgrid/grid'
<SvTitle order={1}>Hello</SvTitle>
<SvText tone="muted">Themed for free.</SvText>`} />
<SvCard>
<SvAspectRatio ratio={16 / 9}>
<div class="media">16 : 9 aspect box (no layout shift)</div>
</SvAspectRatio>
</SvCard>
<button class="icon-btn">
★<SvVisuallyHidden>Add to favourites</SvVisuallyHidden>
</button>
</SvStack>
</section>
</SvStack>
</div>
<style>
.page { padding: 24px; max-width: 680px; }
section { margin: 0; }
.media {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--sg-accent, #2563eb), color-mix(in srgb, var(--sg-accent, #2563eb) 55%, #000));
color: #fff; font-size: 13px; font-weight: 600;
}
.icon-btn {
align-self: flex-start;
width: 34px; height: 34px; font-size: 16px; cursor: pointer;
border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px;
background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
}
</style>More Layout examples
- Account & security settings console - A real SaaS settings surface composed from the UI kit: SvMenubar app bar, promise + Undo-action toasts on save, SvPopconfirm on destructive rows, SvHoverCard teammate previews, and frame input adornments (leading icons, prefix affixes, masked API key). Profile / Team / Security tabs over SvCard + SvStat.
- Invoice builder - An adornment-heavy money form: currency prefixes, % suffixes, masked tax IDs (frame adornments), line items with SvPopconfirm delete + Undo action toasts, live SvStat totals, an SvHoverCard tax hint, and a promise toast on Send. Pure UI-kit composition.
- Operations KPI dashboard - A KPI console: SvStat + SvSparkline tiles, an SvGauge SLA dial, SvHoverCard drill-down previews per service, an SvMenubar toolbar (View / Range / Actions) and a promise toast on Refresh. Pure UI-kit composition, no grid dependency.
- Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
- Form: cascading fields - SvForm dependent selects - a child list derives from the parent value via a function `options`, and `dependsOn` clears the child when the parent changes so a stale selection never lingers. Country -> State -> City.