All components (204)

Quote

Typography · Blockquote · .amset-quote

What it is and when to use it

A block quote, with a rule at its side and, if it says who said it, the attribution below preceded by a dash.

When to use it

What a customer said in a review, a paragraph of a contract being discussed, a sentence by someone with a name.
cite is who said it, and it can carry formatting or a link. source is the address the text comes from and goes to the element's cite attribute.

When not to

A notice or a highlighted note: Alert.
The ratings of a product, with their stars: RatingSummary.
A code block: CodeBlock.

Keyboard: it does not take part. If cite carries a link, that link takes focus like any other.

Accessibility: without cite it is a <blockquote> and nothing more. With cite, the root becomes a <figure> with the quote inside and the attribution in its <figcaption>: it is the only way for the name to stay tied to the quote without becoming part of what is quoted, which is what would happen inside the <blockquote>. The attributes passed to it always go to the root, whichever it is. The cite attribute written by source is not shown by any browser nor read by any screen reader: if the source matters to the reader, it also goes in view, in cite.

Fine-tuning: --amset-quote-rule (the colour of the rule; by default, the accent) and --amset-quote-color (that of the text).

What it looks like

No component forces you to use the mouse.

Accessibility report

<Blockquote cite="Accessibility report" source="October audit">
  Ningun componente obliga a usar el raton.
</Blockquote>

Props

Import it with import { Blockquote } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`cite`	`ReactNode`	Who said it. It is rendered below, preceded by a dash.
`className`	`string`	Merged with the library classes; it does not replace them.
`source`	`string`	The address of the source. It goes to the `cite` attribute of the element.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-quote-rule`	`var(--amset-accent)`
`--amset-quote-color`	`var(--amset-ink)`

How to change it

.amset-quote {
  --amset-quote-rule: ...;
  --amset-quote-color: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: