# Display primitives - SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden
The small display helpers you reach for constantly in docs, command palettes, and
media layouts - each themed from the shared `--sg-*` tokens and dependency-free.
- **SvKbd** - a keyboard-key hint (single key or a combo).
- **SvCode** - monospace code, inline or as a scrolling block.
- **SvAspectRatio** - hold a fixed width:height ratio to prevent layout shift.
- **SvVisuallyHidden** - screen-reader-only content (the "sr-only" pattern).
Related: [SvCommand](https://svgrid.com/docs/help/ui-components/sv-command/) · [SvCode in docs](https://svgrid.com/docs/help/ui-components/sv-rich-text/) · [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 { SvKbd, SvCode, SvAspectRatio, SvVisuallyHidden } from '@svgrid/grid'
```
## Example
> Live demo: Typography & display primitives - https://svgrid.com/demos/410-typography-display/
```svelte
opens the palette.
npm i @svgrid/grid
```
## SvKbd
Pass `keys` for a combo (rendered as separate caps joined by `separator`), or a
single `children` label.
| Prop | Type | Default | Description |
| ----------- | ---------- | ------- | ------------------------------------ |
| `keys` | `string[]` | - | Key sequence, rendered as caps. |
| `separator` | `string` | `+` | Separator shown between keys. |
| `size` | `sm` \| `md` | `md` | Cap size. |
## SvCode
Inline by default; set `block` for a padded, horizontally-scrolling block. Pass
`code` as a string or use the `children` snippet. No syntax highlighting - bring
your own if you need it.
| Prop | Type | Default | Description |
| ------- | --------- | ------- | ------------------------------------ |
| `block` | `boolean` | `false` | Render a padded block, not inline. |
| `code` | `string` | - | Code as a string (skip the snippet). |
## SvAspectRatio
Holds the ratio for its content (media, embeds, maps, skeletons); the single
child fills the box (`object-fit: cover`).
| Prop | Type | Default | Description |
| ------- | -------- | --------- | -------------------------------------------- |
| `ratio` | `number` | `16 / 9` | Width / height ratio (e.g. `1`, `4 / 3`). |
## SvVisuallyHidden
| Prop | Type | Default | Description |
| ----------- | --------- | ------- | ------------------------------------------------------------ |
| `focusable` | `boolean` | `false` | Reveal on focus (for skip links). |
| `as` | `string` | `span` | Element/tag to render. |
## Accessibility
- **SvVisuallyHidden** keeps content in the accessibility tree while hiding it
visually - ideal for naming icon-only controls and for skip links (set
`focusable` so the link appears when tabbed to).
- **SvKbd** uses semantic `` elements; the separator between keys is
`aria-hidden` so screen readers announce the keys, not the "+".
- **SvAspectRatio** is presentational - always give the media inside it a real
`alt` (or `aria-hidden` when decorative).
## Keys, code and a fixed ratio
Small pieces that show up constantly in documentation and settings screens.
`SvKbd` takes the keys as data rather than as pre-joined text, so the separator
is presentation and can differ per platform.
```svelte
Press to open the palette.Install with .
16 : 9
```
## See also
- [Typography](https://svgrid.com/docs/help/ui-components/sv-typography/) - SvTitle / SvText / SvAnchor / SvBlockquote / SvMark / SvList.
- [SvCommand](https://svgrid.com/docs/help/ui-components/sv-command/) - the command palette where `SvKbd` shortcuts live.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-display-primitives/ . All docs: https://svgrid.com/llms.txt
