# UI What each element is for. Rendered by the components. Rendered by: [Components](https://www.prongs.dev/docs/components.md) · Added with: `npx prongs add` · Domains: [11](#domains) · Intents: [186](#domains) ## Domains - [`heading.*`](https://www.prongs.dev/docs/intents/heading.md) Heading: Titles that give a page its structure, from the marketing headline down to the title of one item. ([``](https://www.prongs.dev/docs/components/text.md), 6 intents) - [`text.*`](https://www.prongs.dev/docs/intents/text.md) Text: Running text and the small pieces around it: introductions, captions, labels, facts about an item, code. ([``](https://www.prongs.dev/docs/components/text.md), 27 intents) - [`feedback.*`](https://www.prongs.dev/docs/intents/feedback.md) Feedback: Messages about what just happened or is happening. They are announced to screen readers. ([``](https://www.prongs.dev/docs/components/text.md), 4 intents) - [`action.*`](https://www.prongs.dev/docs/intents/action.md) Action: Commands, named for what they do: save, delete, share. With an href they render a link, without one a button. ([``](https://www.prongs.dev/docs/components/action.md), 27 intents) - [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) Navigation: Moving around: the home link, pages of the site, views of the same content, steps of a flow. ([``](https://www.prongs.dev/docs/components/action.md), 10 intents) - [`choice.*`](https://www.prongs.dev/docs/intents/choice.md) Choice: Picking from a small set shown all at once: options for a setting, filters, colours. ([``](https://www.prongs.dev/docs/components/action.md), 4 intents) - [`field.*`](https://www.prongs.dev/docs/intents/field.md) Field: What the user types or picks in a form. The intent sets the element, the input type, the input mode and autocomplete. ([``](https://www.prongs.dev/docs/components/field.md), 14 intents) - [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) Layout: Page regions and groups. The intent picks the element (main, section, form, ul…) and the arrangement. ([``](https://www.prongs.dev/docs/components/layout.md), 80 intents) - [`media.*`](https://www.prongs.dev/docs/intents/media.md) Media: Images that identify a person or illustrate content, with a text fallback when there is no image. ([``](https://www.prongs.dev/docs/components/media.md), 5 intents) - [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) Dialog: Modal interruptions built on the native : a task, a confirmation, a full-screen reader. ([``](https://www.prongs.dev/docs/components/dialog.md), 5 intents) - [`popover.*`](https://www.prongs.dev/docs/intents/popover.md) Popover: Things that open next to the button that opened them without blocking the page: menus, pickers, extra detail. ([``](https://www.prongs.dev/docs/components/popover.md), 4 intents) ## Looks The building blocks UI intents are made from: type, tone, surfaces, controls and arrangement. Code never uses them directly. Looks have no pages of their own; each is listed here with what it is built from and the intents built from it. ### [`typography.*`](https://www.prongs.dev/docs/intents/ui.md#typography) - [`typography.display`](https://www.prongs.dev/docs/intents/ui.md#typography-display): Largest type - Used to build: [`heading.pitch`](https://www.prongs.dev/docs/intents/heading/pitch.md) - [`typography.title`](https://www.prongs.dev/docs/intents/ui.md#typography-title): Page title type - Used to build: [`heading.page`](https://www.prongs.dev/docs/intents/heading/page.md), [`text.stat`](https://www.prongs.dev/docs/intents/text/stat.md) - [`typography.heading`](https://www.prongs.dev/docs/intents/ui.md#typography-heading): Section title type - Used to build: [`heading.section`](https://www.prongs.dev/docs/intents/heading/section.md) - [`typography.subheading`](https://www.prongs.dev/docs/intents/ui.md#typography-subheading): Small heading type - Used to build: [`heading.item`](https://www.prongs.dev/docs/intents/heading/item.md) - [`typography.lead`](https://www.prongs.dev/docs/intents/ui.md#typography-lead): Large reading type - Used to build: [`text.lead`](https://www.prongs.dev/docs/intents/text/lead.md), [`text.quote`](https://www.prongs.dev/docs/intents/text/quote.md) - [`typography.body`](https://www.prongs.dev/docs/intents/ui.md#typography-body): Reading type - Used to build: [`text.body`](https://www.prongs.dev/docs/intents/text/body.md) - [`typography.small`](https://www.prongs.dev/docs/intents/ui.md#typography-small): Small reading type - Used to build: [`text.caption`](https://www.prongs.dev/docs/intents/text/caption.md), [`text.meta`](https://www.prongs.dev/docs/intents/text/meta.md), [`text.excerpt`](https://www.prongs.dev/docs/intents/text/excerpt.md), [`feedback.info`](https://www.prongs.dev/docs/intents/feedback/info.md), [`text.address`](https://www.prongs.dev/docs/intents/text/address.md) - [`typography.label`](https://www.prongs.dev/docs/intents/ui.md#typography-label): Small, slightly heavy type for names of things - Used to build: [`text.label`](https://www.prongs.dev/docs/intents/text/label.md), [`text.current`](https://www.prongs.dev/docs/intents/text/current.md), [`text.value`](https://www.prongs.dev/docs/intents/text/value.md), [`text.topic`](https://www.prongs.dev/docs/intents/text/topic.md), [`text.status`](https://www.prongs.dev/docs/intents/text/status.md), [`text.count`](https://www.prongs.dev/docs/intents/text/count.md), [`text.summary`](https://www.prongs.dev/docs/intents/text/summary.md), [`feedback.error`](https://www.prongs.dev/docs/intents/feedback/error.md), [`feedback.warning`](https://www.prongs.dev/docs/intents/feedback/warning.md), [`feedback.success`](https://www.prongs.dev/docs/intents/feedback/success.md) - [`typography.overline`](https://www.prongs.dev/docs/intents/ui.md#typography-overline): Tiny uppercase type - Used to build: [`heading.kicker`](https://www.prongs.dev/docs/intents/heading/kicker.md), [`text.term`](https://www.prongs.dev/docs/intents/text/term.md) - [`typography.mono`](https://www.prongs.dev/docs/intents/ui.md#typography-mono): Monospaced type - Used to build: [`text.delta`](https://www.prongs.dev/docs/intents/text/delta.md), [`text.marker`](https://www.prongs.dev/docs/intents/text/marker.md), [`text.code`](https://www.prongs.dev/docs/intents/text/code.md), [`layout.registry.entry`](https://www.prongs.dev/docs/intents/layout/registry-entry.md) ### [`tone.*`](https://www.prongs.dev/docs/intents/ui.md#tone) - [`tone.default`](https://www.prongs.dev/docs/intents/ui.md#tone-default): Main text colour - Used to build: [`heading.pitch`](https://www.prongs.dev/docs/intents/heading/pitch.md), [`heading.page`](https://www.prongs.dev/docs/intents/heading/page.md), [`heading.section`](https://www.prongs.dev/docs/intents/heading/section.md), [`heading.item`](https://www.prongs.dev/docs/intents/heading/item.md), [`heading.side`](https://www.prongs.dev/docs/intents/heading/side.md), [`text.label`](https://www.prongs.dev/docs/intents/text/label.md), [`text.current`](https://www.prongs.dev/docs/intents/text/current.md), [`text.value`](https://www.prongs.dev/docs/intents/text/value.md), [`text.quote`](https://www.prongs.dev/docs/intents/text/quote.md), [`text.count`](https://www.prongs.dev/docs/intents/text/count.md), [`text.summary`](https://www.prongs.dev/docs/intents/text/summary.md), [`text.output`](https://www.prongs.dev/docs/intents/text/output.md), [`text.diff`](https://www.prongs.dev/docs/intents/text/diff.md), [`text.diff.line`](https://www.prongs.dev/docs/intents/text/diff-line.md), [`text.token`](https://www.prongs.dev/docs/intents/text/token.md), [`text.snippet`](https://www.prongs.dev/docs/intents/text/snippet.md), [`text.tally`](https://www.prongs.dev/docs/intents/text/tally.md), [`text.stat`](https://www.prongs.dev/docs/intents/text/stat.md), [`text.code`](https://www.prongs.dev/docs/intents/text/code.md), [`nav.sequel`](https://www.prongs.dev/docs/intents/nav/sequel.md), [`text.address`](https://www.prongs.dev/docs/intents/text/address.md) - [`tone.soft`](https://www.prongs.dev/docs/intents/ui.md#tone-soft): Text colour between main and muted, for introductions - Used to build: [`text.body`](https://www.prongs.dev/docs/intents/text/body.md), [`text.lead`](https://www.prongs.dev/docs/intents/text/lead.md), [`text.line`](https://www.prongs.dev/docs/intents/text/line.md) - [`tone.muted`](https://www.prongs.dev/docs/intents/ui.md#tone-muted): Secondary text colour, readable on every surface - Used to build: [`heading.kicker`](https://www.prongs.dev/docs/intents/heading/kicker.md), [`text.caption`](https://www.prongs.dev/docs/intents/text/caption.md), [`text.term`](https://www.prongs.dev/docs/intents/text/term.md), [`text.meta`](https://www.prongs.dev/docs/intents/text/meta.md), [`text.excerpt`](https://www.prongs.dev/docs/intents/text/excerpt.md), [`text.topic`](https://www.prongs.dev/docs/intents/text/topic.md), [`feedback.info`](https://www.prongs.dev/docs/intents/feedback/info.md) - [`tone.accent`](https://www.prongs.dev/docs/intents/ui.md#tone-accent): Brand text colour - Used to build: [`text.indicator`](https://www.prongs.dev/docs/intents/text/indicator.md) - [`tone.negative`](https://www.prongs.dev/docs/intents/ui.md#tone-negative): Error colour - Used to build: [`feedback.error`](https://www.prongs.dev/docs/intents/feedback/error.md) - [`tone.positive`](https://www.prongs.dev/docs/intents/ui.md#tone-positive): Success colour - Used to build: [`feedback.success`](https://www.prongs.dev/docs/intents/feedback/success.md) - [`tone.caution`](https://www.prongs.dev/docs/intents/ui.md#tone-caution): Warning colour - Used to build: [`feedback.warning`](https://www.prongs.dev/docs/intents/feedback/warning.md) - [`tone.info`](https://www.prongs.dev/docs/intents/ui.md#tone-info): Neutral notice colour ### [`surface.*`](https://www.prongs.dev/docs/intents/ui.md#surface) - [`surface.panel`](https://www.prongs.dev/docs/intents/ui.md#surface-panel): Bordered box, one level above what it sits in - Used to build: [`layout.panel`](https://www.prongs.dev/docs/intents/layout/panel.md), [`layout.teaser`](https://www.prongs.dev/docs/intents/layout/teaser.md), [`layout.window`](https://www.prongs.dev/docs/intents/layout/window.md), [`layout.disclosure.panel`](https://www.prongs.dev/docs/intents/layout/disclosure-panel.md) - [`surface.sunken`](https://www.prongs.dev/docs/intents/ui.md#surface-sunken): Recess cut into what it sits in - Used to build: [`layout.loading`](https://www.prongs.dev/docs/intents/layout/loading.md) - [`surface.notice`](https://www.prongs.dev/docs/intents/ui.md#surface-notice): Recessed, bordered strip - Used to build: [`layout.notice`](https://www.prongs.dev/docs/intents/layout/notice.md) - [`surface.rule`](https://www.prongs.dev/docs/intents/ui.md#surface-rule): A hairline in the colour that shows on the surface it is on - Used to build: [`layout.divider`](https://www.prongs.dev/docs/intents/layout/divider.md) - [`surface.overlay`](https://www.prongs.dev/docs/intents/ui.md#surface-overlay): Floats over a dimmed page and starts its own stack of surfaces - Used to build: [`layout.terminal`](https://www.prongs.dev/docs/intents/layout/terminal.md), [`dialog.task`](https://www.prongs.dev/docs/intents/dialog/task.md), [`dialog.confirm`](https://www.prongs.dev/docs/intents/dialog/confirm.md), [`dialog.media`](https://www.prongs.dev/docs/intents/dialog/media.md), [`dialog.reader`](https://www.prongs.dev/docs/intents/dialog/reader.md), [`dialog.drawer`](https://www.prongs.dev/docs/intents/dialog/drawer.md) - [`surface.floating`](https://www.prongs.dev/docs/intents/ui.md#surface-floating): Floats next to the element that opened it, flipping to stay on screen. Hidden while closed, whatever display the intent sets - Used to build: [`popover.menu`](https://www.prongs.dev/docs/intents/popover/menu.md), [`popover.picker`](https://www.prongs.dev/docs/intents/popover/picker.md), [`popover.info`](https://www.prongs.dev/docs/intents/popover/info.md) ### [`control.*`](https://www.prongs.dev/docs/intents/ui.md#control) - [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base): Shape and behaviour shared by every button - Used to build: [`control.primary`](https://www.prongs.dev/docs/intents/ui.md#control-primary), [`control.secondary`](https://www.prongs.dev/docs/intents/ui.md#control-secondary), [`control.ghost`](https://www.prongs.dev/docs/intents/ui.md#control-ghost), [`control.destructive`](https://www.prongs.dev/docs/intents/ui.md#control-destructive), [`control.quiet`](https://www.prongs.dev/docs/intents/ui.md#control-quiet), [`control.pill`](https://www.prongs.dev/docs/intents/ui.md#control-pill), [`control.tab`](https://www.prongs.dev/docs/intents/ui.md#control-tab), [`control.swatch`](https://www.prongs.dev/docs/intents/ui.md#control-swatch), [`action.inspect`](https://www.prongs.dev/docs/intents/action/inspect.md), [`nav.area`](https://www.prongs.dev/docs/intents/nav/area.md), [`nav.view`](https://www.prongs.dev/docs/intents/nav/view.md), [`nav.dot`](https://www.prongs.dev/docs/intents/nav/dot.md) - [`control.primary`](https://www.prongs.dev/docs/intents/ui.md#control-primary): Filled, highest emphasis - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`action.submit`](https://www.prongs.dev/docs/intents/action/submit.md), [`action.save`](https://www.prongs.dev/docs/intents/action/save.md), [`action.create`](https://www.prongs.dev/docs/intents/action/create.md), [`action.start`](https://www.prongs.dev/docs/intents/action/start.md), [`action.next`](https://www.prongs.dev/docs/intents/action/next.md), [`action.retry`](https://www.prongs.dev/docs/intents/action/retry.md), [`action.confirm`](https://www.prongs.dev/docs/intents/action/confirm.md) - [`control.secondary`](https://www.prongs.dev/docs/intents/ui.md#control-secondary): Filled, lower emphasis; shows a pressed state - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`action.guide`](https://www.prongs.dev/docs/intents/action/guide.md), [`action.cancel`](https://www.prongs.dev/docs/intents/action/cancel.md), [`action.edit`](https://www.prongs.dev/docs/intents/action/edit.md), [`action.add`](https://www.prongs.dev/docs/intents/action/add.md), [`action.toggle`](https://www.prongs.dev/docs/intents/action/toggle.md) - [`control.ghost`](https://www.prongs.dev/docs/intents/ui.md#control-ghost): No fill until hovered - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`action.skip`](https://www.prongs.dev/docs/intents/action/skip.md), [`action.back`](https://www.prongs.dev/docs/intents/action/back.md), [`action.dismiss`](https://www.prongs.dev/docs/intents/action/dismiss.md), [`nav.paging`](https://www.prongs.dev/docs/intents/nav/paging.md) - [`control.destructive`](https://www.prongs.dev/docs/intents/ui.md#control-destructive): Filled, danger colour - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`action.delete`](https://www.prongs.dev/docs/intents/action/delete.md) - [`control.quiet`](https://www.prongs.dev/docs/intents/ui.md#control-quiet): Small text command; shows a pressed state - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`action.signout`](https://www.prongs.dev/docs/intents/action/signout.md), [`action.remove`](https://www.prongs.dev/docs/intents/action/remove.md), [`action.share`](https://www.prongs.dev/docs/intents/action/share.md), [`action.copy`](https://www.prongs.dev/docs/intents/action/copy.md), [`action.utility`](https://www.prongs.dev/docs/intents/action/utility.md), [`action.reveal`](https://www.prongs.dev/docs/intents/action/reveal.md), [`action.sort`](https://www.prongs.dev/docs/intents/action/sort.md) - [`control.link`](https://www.prongs.dev/docs/intents/ui.md#control-link): Inline text link - Used to build: [`action.open`](https://www.prongs.dev/docs/intents/action/open.md), [`action.navigate`](https://www.prongs.dev/docs/intents/action/navigate.md), [`action.more`](https://www.prongs.dev/docs/intents/action/more.md), [`nav.entry`](https://www.prongs.dev/docs/intents/nav/entry.md), [`nav.item`](https://www.prongs.dev/docs/intents/nav/item.md) - [`control.icon`](https://www.prongs.dev/docs/intents/ui.md#control-icon): Square, icon-only shape. Layered over any action when it has no visible text - [`control.pill`](https://www.prongs.dev/docs/intents/ui.md#control-pill): Rounded option; filled while pressed - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`choice.option`](https://www.prongs.dev/docs/intents/choice/option.md), [`choice.filter`](https://www.prongs.dev/docs/intents/choice/filter.md) - [`control.tab`](https://www.prongs.dev/docs/intents/ui.md#control-tab): Underlined option; underline while pressed - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - [`control.menu`](https://www.prongs.dev/docs/intents/ui.md#control-menu): Plain navigation link; strong while current - Used to build: [`nav.home`](https://www.prongs.dev/docs/intents/nav/home.md), [`nav.page`](https://www.prongs.dev/docs/intents/nav/page.md), [`nav.step`](https://www.prongs.dev/docs/intents/nav/step.md) - [`control.swatch`](https://www.prongs.dev/docs/intents/ui.md#control-swatch): Colour circle filled from --choice-color; ringed while pressed - Built from: [`control.base`](https://www.prongs.dev/docs/intents/ui.md#control-base) - Used to build: [`choice.color`](https://www.prongs.dev/docs/intents/choice/color.md) - [`control.select`](https://www.prongs.dev/docs/intents/ui.md#control-select): Looks like a form field with a chevron: a button that opens choices - Used to build: [`choice.open`](https://www.prongs.dev/docs/intents/choice/open.md) ### [`input.*`](https://www.prongs.dev/docs/intents/ui.md#input) - [`input.default`](https://www.prongs.dev/docs/intents/ui.md#input-default): Bordered input box - Used to build: [`field.text`](https://www.prongs.dev/docs/intents/field/text.md), [`field.email`](https://www.prongs.dev/docs/intents/field/email.md), [`field.password`](https://www.prongs.dev/docs/intents/field/password.md), [`field.search`](https://www.prongs.dev/docs/intents/field/search.md), [`field.filter`](https://www.prongs.dev/docs/intents/field/filter.md), [`field.number`](https://www.prongs.dev/docs/intents/field/number.md), [`field.url`](https://www.prongs.dev/docs/intents/field/url.md), [`field.multiline`](https://www.prongs.dev/docs/intents/field/multiline.md), [`field.select`](https://www.prongs.dev/docs/intents/field/select.md) - [`input.check`](https://www.prongs.dev/docs/intents/ui.md#input-check): Small square checkbox - Used to build: [`field.checkbox`](https://www.prongs.dev/docs/intents/field/checkbox.md) - [`input.toggle`](https://www.prongs.dev/docs/intents/ui.md#input-toggle): Sliding on/off track - Used to build: [`field.switch`](https://www.prongs.dev/docs/intents/field/switch.md) - [`input.color`](https://www.prongs.dev/docs/intents/ui.md#input-color): Native colour well - Used to build: [`field.color`](https://www.prongs.dev/docs/intents/field/color.md) - [`input.range`](https://www.prongs.dev/docs/intents/ui.md#input-range): A slider along a track - Used to build: [`field.range`](https://www.prongs.dev/docs/intents/field/range.md) ### [`arrange.*`](https://www.prongs.dev/docs/intents/ui.md#arrange) - [`arrange.rows`](https://www.prongs.dev/docs/intents/ui.md#arrange-rows): Its buttons and links become full-width rows, whatever their own look, keeping a danger colour; a pressed or selected one is filled and ticked - Used to build: [`popover.menu`](https://www.prongs.dev/docs/intents/popover/menu.md), [`popover.picker`](https://www.prongs.dev/docs/intents/popover/picker.md) - [`arrange.table`](https://www.prongs.dev/docs/intents/ui.md#arrange-table): Table cells padded and aligned, header cells quiet, a hairline between rows - Used to build: [`layout.table`](https://www.prongs.dev/docs/intents/layout/table.md) - [`arrange.sidebar`](https://www.prongs.dev/docs/intents/ui.md#arrange-sidebar): A fixed-width sidebar column beside a flexible one, stacked on phones - Used to build: [`layout.shell`](https://www.prongs.dev/docs/intents/layout/shell.md) - [`arrange.stack`](https://www.prongs.dev/docs/intents/ui.md#arrange-stack): Children in a column, free to shrink inside a row or grid - Used to build: [`layout.page`](https://www.prongs.dev/docs/intents/layout/page.md), [`layout.article`](https://www.prongs.dev/docs/intents/layout/article.md), [`layout.task`](https://www.prongs.dev/docs/intents/layout/task.md), [`layout.subnav`](https://www.prongs.dev/docs/intents/layout/subnav.md), [`layout.aside`](https://www.prongs.dev/docs/intents/layout/aside.md), [`layout.section`](https://www.prongs.dev/docs/intents/layout/section.md), [`layout.group`](https://www.prongs.dev/docs/intents/layout/group.md), [`layout.form`](https://www.prongs.dev/docs/intents/layout/form.md), [`layout.field`](https://www.prongs.dev/docs/intents/layout/field.md), [`layout.fact`](https://www.prongs.dev/docs/intents/layout/fact.md), [`layout.listing`](https://www.prongs.dev/docs/intents/layout/listing.md), [`layout.scroller`](https://www.prongs.dev/docs/intents/layout/scroller.md), [`layout.blocks.cell`](https://www.prongs.dev/docs/intents/layout/blocks-cell.md), [`layout.chart`](https://www.prongs.dev/docs/intents/layout/chart.md), [`layout.showcase.item`](https://www.prongs.dev/docs/intents/layout/showcase-item.md), [`layout.overlay`](https://www.prongs.dev/docs/intents/layout/overlay.md), [`layout.points`](https://www.prongs.dev/docs/intents/layout/points.md), [`layout.steps`](https://www.prongs.dev/docs/intents/layout/steps.md), [`layout.point`](https://www.prongs.dev/docs/intents/layout/point.md), [`layout.list`](https://www.prongs.dev/docs/intents/layout/list.md), [`layout.item`](https://www.prongs.dev/docs/intents/layout/item.md), [`layout.panel`](https://www.prongs.dev/docs/intents/layout/panel.md), [`layout.teaser`](https://www.prongs.dev/docs/intents/layout/teaser.md), [`layout.marketing`](https://www.prongs.dev/docs/intents/layout/marketing.md), [`layout.registry`](https://www.prongs.dev/docs/intents/layout/registry.md), [`layout.registry.track`](https://www.prongs.dev/docs/intents/layout/registry-track.md), [`layout.stage`](https://www.prongs.dev/docs/intents/layout/stage.md), [`layout.window`](https://www.prongs.dev/docs/intents/layout/window.md), [`layout.terminal`](https://www.prongs.dev/docs/intents/layout/terminal.md), [`layout.terminal.log`](https://www.prongs.dev/docs/intents/layout/terminal-log.md), [`layout.agent`](https://www.prongs.dev/docs/intents/layout/agent.md), [`layout.tally`](https://www.prongs.dev/docs/intents/layout/tally.md), [`layout.tally.item`](https://www.prongs.dev/docs/intents/layout/tally-item.md), [`layout.arrival`](https://www.prongs.dev/docs/intents/layout/arrival.md), [`layout.band`](https://www.prongs.dev/docs/intents/layout/band.md), [`layout.demo`](https://www.prongs.dev/docs/intents/layout/demo.md), [`layout.example`](https://www.prongs.dev/docs/intents/layout/example.md), [`layout.peek`](https://www.prongs.dev/docs/intents/layout/peek.md), [`layout.meter`](https://www.prongs.dev/docs/intents/layout/meter.md), [`layout.meter.fill`](https://www.prongs.dev/docs/intents/layout/meter-fill.md), [`layout.marker`](https://www.prongs.dev/docs/intents/layout/marker.md), [`layout.disclosure`](https://www.prongs.dev/docs/intents/layout/disclosure.md) - [`arrange.row`](https://www.prongs.dev/docs/intents/ui.md#arrange-row): Children in a wrapping row - Used to build: [`layout.header`](https://www.prongs.dev/docs/intents/layout/header.md), [`layout.footer`](https://www.prongs.dev/docs/intents/layout/footer.md), [`layout.headline`](https://www.prongs.dev/docs/intents/layout/headline.md), [`layout.labelled`](https://www.prongs.dev/docs/intents/layout/labelled.md), [`layout.setting`](https://www.prongs.dev/docs/intents/layout/setting.md), [`layout.actions`](https://www.prongs.dev/docs/intents/layout/actions.md), [`layout.pitch.actions`](https://www.prongs.dev/docs/intents/layout/pitch-actions.md), [`layout.toolbar`](https://www.prongs.dev/docs/intents/layout/toolbar.md), [`layout.choices`](https://www.prongs.dev/docs/intents/layout/choices.md), [`layout.meta`](https://www.prongs.dev/docs/intents/layout/meta.md), [`layout.facts`](https://www.prongs.dev/docs/intents/layout/facts.md), [`layout.siblings`](https://www.prongs.dev/docs/intents/layout/siblings.md), [`layout.pager`](https://www.prongs.dev/docs/intents/layout/pager.md), [`layout.blocks`](https://www.prongs.dev/docs/intents/layout/blocks.md), [`layout.badged`](https://www.prongs.dev/docs/intents/layout/badged.md), [`layout.dock`](https://www.prongs.dev/docs/intents/layout/dock.md), [`layout.showcase`](https://www.prongs.dev/docs/intents/layout/showcase.md), [`layout.command`](https://www.prongs.dev/docs/intents/layout/command.md), [`layout.window.bar`](https://www.prongs.dev/docs/intents/layout/window-bar.md), [`layout.terminal.bar`](https://www.prongs.dev/docs/intents/layout/terminal-bar.md), [`layout.notice`](https://www.prongs.dev/docs/intents/layout/notice.md) - [`arrange.divided`](https://www.prongs.dev/docs/intents/ui.md#arrange-divided): Row with rules between children - [`arrange.grid`](https://www.prongs.dev/docs/intents/ui.md#arrange-grid): Grid of equal cells, as many columns as its own width fits - Used to build: [`layout.collection`](https://www.prongs.dev/docs/intents/layout/collection.md) ### [`constraint.*`](https://www.prongs.dev/docs/intents/ui.md#constraint) - [`constraint.wide`](https://www.prongs.dev/docs/intents/ui.md#constraint-wide): Centred, wide content width - Used to build: [`layout.page`](https://www.prongs.dev/docs/intents/layout/page.md), [`layout.header`](https://www.prongs.dev/docs/intents/layout/header.md), [`layout.footer`](https://www.prongs.dev/docs/intents/layout/footer.md) - [`constraint.narrow`](https://www.prongs.dev/docs/intents/ui.md#constraint-narrow): Centred, reading width - Used to build: [`layout.article`](https://www.prongs.dev/docs/intents/layout/article.md) - [`constraint.compact`](https://www.prongs.dev/docs/intents/ui.md#constraint-compact): Centred width for one short form - Used to build: [`layout.task`](https://www.prongs.dev/docs/intents/layout/task.md) ### [`frame.*`](https://www.prongs.dev/docs/intents/ui.md#frame) - [`frame.round`](https://www.prongs.dev/docs/intents/ui.md#frame-round): Small circle; centres initials when there is no image - Used to build: [`media.person`](https://www.prongs.dev/docs/intents/media/person.md) - [`frame.cover`](https://www.prongs.dev/docs/intents/ui.md#frame-cover): Wide rounded rectangle; centres the fallback text when there is no image - Used to build: [`media.enlarged`](https://www.prongs.dev/docs/intents/media/enlarged.md), [`media.image`](https://www.prongs.dev/docs/intents/media/image.md), [`media.artwork`](https://www.prongs.dev/docs/intents/media/artwork.md), [`media.embed`](https://www.prongs.dev/docs/intents/media/embed.md) ## For registry authors **Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.