# Typography - SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList A small set of prose primitives so headings, body copy, links, quotes, highlights, and lists all pull from one type scale and the shared `--sg-*` tokens - instead of scattering ad-hoc font sizes and colours across your app. - **SvTitle** - headings (`h1`-`h6`) with size decoupled from semantic level. - **SvText** - body / inline text with size, weight, tone, truncation, line-clamp. - **SvAnchor** - a themed link with safe external handling. - **SvBlockquote** - a quotation with an accent rule and optional citation. - **SvMark** - highlighted inline text (a themed ``). - **SvList** - ordered / unordered / unstyled lists. Related: [SvText as cell content](https://svgrid.com/docs/help/ui-components/sv-card/) · [Tokens](https://svgrid.com/docs/help/tokens/) ## Installation Add them with the CLI:

Or install the package and import them directly. They ship free in `@svgrid/grid` (dependency-free):

The examples on this page import from `@svgrid/grid`: ```svelte ``` ```ts import { SvTitle, SvText, SvAnchor, SvBlockquote, SvMark, SvList } from '@svgrid/grid' ``` ## Example > Live demo: Typography & display primitives - https://svgrid.com/demos/410-typography-display/ ```svelte Dashboard Last synced 2 minutes ago. A highlighted phrase and an external link. ``` ## SvTitle `order` sets the semantic level (`h1`-`h6`) and, by default, the visual size. Pass `size` to make an `h3` look like an `h5` while staying semantically correct. | Prop | Type | Default | Description | | ---------- | --------------------------------- | ------- | -------------------------------------------- | | `order` | `1`-`6` | `2` | Semantic heading level (`h1`-`h6`). | | `size` | `1`-`6` | `order` | Visual size step, decoupled from `order`. | | `align` | `start` \| `center` \| `end` | - | Text alignment. | | `truncate` | `boolean` | `false` | Single-line ellipsis. | ## SvText | Prop | Type | Default | Description | | ---------- | ---------------------------------------------------------------- | --------- | ------------------------------------------- | | `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Font size step. | | `weight` | `normal` \| `medium` \| `semibold` \| `bold` | `normal` | Font weight. | | `tone` | `default` \| `muted` \| `accent` \| `success` \| `warning` \| `error` | `default` | Semantic colour. | | `align` | `start` \| `center` \| `end` | - | Text alignment. | | `truncate` | `boolean` | `false` | Single-line ellipsis. | | `clamp` | `number` | - | Clamp to N lines (overrides `truncate`). | | `inline` | `boolean` | `false` | Render a `span` instead of a `p`. | | `as` | `string` | - | Override the element/tag. | ## SvAnchor | Prop | Type | Default | Description | | ----------- | --------------------------------- | -------- | --------------------------------------------------- | | `href` | `string` | - | Link target. | | `external` | `boolean` | `false` | Open in a new tab with `rel="noopener noreferrer"` + an offscreen "opens in a new tab" hint. | | `underline` | `hover` \| `always` \| `none` | `hover` | Underline behaviour. | | `tone` | `accent` \| `default` \| `muted` | `accent` | Colour. | | `size` | `sm` \| `md` \| `lg` | `md` | Font size step. | ## SvBlockquote | Prop | Type | Default | Description | | ------ | ------------------------------------------------------- | -------- | --------------------------------- | | `cite` | `string` | - | Attribution shown under the quote.| | `tone` | `accent` \| `muted` \| `success` \| `warning` \| `error`| `accent` | Colour of the accent rule. | ## SvMark | Prop | Type | Default | Description | | ------ | -------------------------------------------------------- | -------- | ------------- | | `tone` | `yellow` \| `accent` \| `success` \| `warning` \| `error`| `yellow` | Highlight tint.| ## SvList Pass `items` for the simple case, or a `children` snippet of `

` elements for full control. | Prop | Type | Default | Description | | --------- | ------------------------------------- | ------------ | --------------------------------------- | | `type` | `unordered` \| `ordered` \| `none` | `unordered` | Marker style (`none` drops indentation).| | `items` | `string[]` | - | Simple string items. | | `spacing` | `sm` \| `md` \| `lg` | `md` | Vertical gap between items. | | `size` | `sm` \| `md` \| `lg` | `md` | Font size step. | ## Accessibility - **SvTitle** renders a real heading element - keep the document outline logical (do not skip levels for looks; use `size` to adjust appearance instead). - **SvAnchor** with `external` includes an offscreen "opens in a new tab" note so the behaviour is announced, and shows a focus ring on keyboard focus. - **SvMark** conveys emphasis visually; do not rely on the highlight colour alone to carry meaning. ## A heading, body and a link These carry the type scale so a page reads consistently without a stylesheet per screen. `SvTitle` takes `order` for the heading level, which keeps the document outline correct even when the visual size does not match. ```svelte Release notes This release adds row spanning and a faster filter pass. Read the documentation for the full list. ``` ## See also - [Display primitives](https://svgrid.com/docs/help/ui-components/sv-display-primitives/) - SvKbd / SvCode / SvAspectRatio / SvVisuallyHidden. - [Tokens](https://svgrid.com/docs/help/tokens/) - the `--sg-*` colours and font these components read. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-typography/ . All docs: https://svgrid.com/llms.txt