Blockquote
A semantic quote: a figure wrapping a blockquote, with an optional visible attribution and an optional machine-readable source URL.
Import
import { Blockquote } from "@hyzer-labs/ui"Demo
With no cite, the figure wraps a bare quote and no <figcaption> renders.
Throw flat, trust the fade: the disc does the work on a hyzer line.
<Blockquote>
Throw flat, trust the fade: the disc does the work on a hyzer line.
</Blockquote>cite renders a visible attribution in a <figcaption> after the quote. Naming a person here is the widely accepted convention.
Practice putting from 15 feet more than anything else. That's where rounds are won.
<Blockquote cite="Paige Pierce">
Practice putting from 15 feet more than anything else. That's where
rounds are won.
</Blockquote>citeUrl sets the machine-readable cite attribute on the inner <blockquote>, and it's never rendered as visible text.
A thrown disc that comes to rest above the playing surface, in a tree for example, is treated as if it came to rest on the ground.
<Blockquote cite="PDGA Rules Committee" citeUrl="https://www.pdga.com/rules">
A thrown disc that comes to rest above the playing surface, in a tree
for example, is treated as if it came to rest on the ground.
</Blockquote>align moves the attribution row: start (default), center, or end. The quote body stays put.
The course doesn’t care how far you throw. It cares where the disc stops. After twelve titles I can tell you the short game decides more rounds than any 500-foot drive ever will: the upshots you place under the basket and the putts you grind in practice are the strokes that hold up on Sunday.
<Blockquote cite="Ken Climo">
The course doesn’t care how far you throw. It cares where the disc
stops. After twelve titles I can tell you the short game decides more
rounds than any 500-foot drive ever will: the upshots you place under
the basket and the putts you grind in practice are the strokes that
hold up on Sunday.
</Blockquote>The course doesn’t care how far you throw. It cares where the disc stops. After twelve titles I can tell you the short game decides more rounds than any 500-foot drive ever will: the upshots you place under the basket and the putts you grind in practice are the strokes that hold up on Sunday.
<Blockquote cite="Ken Climo" align="center">
The course doesn’t care how far you throw. It cares where the disc
stops. After twelve titles I can tell you the short game decides more
rounds than any 500-foot drive ever will: the upshots you place under
the basket and the putts you grind in practice are the strokes that
hold up on Sunday.
</Blockquote>The course doesn’t care how far you throw. It cares where the disc stops. After twelve titles I can tell you the short game decides more rounds than any 500-foot drive ever will: the upshots you place under the basket and the putts you grind in practice are the strokes that hold up on Sunday.
<Blockquote cite="Ken Climo" align="end">
The course doesn’t care how far you throw. It cares where the disc
stops. After twelve titles I can tell you the short game decides more
rounds than any 500-foot drive ever will: the upshots you place under
the basket and the putts you grind in practice are the strokes that
hold up on Sunday.
</Blockquote>intent colors the accent line (border-inline-start). The intentScope control below opts the quote text into the same color, and the
attribution row stays muted either way. Leaving intent unset keeps the
default look. See the intent vocabulary.
A flick release generates more spin than most players ever use.
<Blockquote intent="primary" cite="Simon Lizotte">
A flick release generates more spin than most players ever use.
</Blockquote>Props
| Name | Type | Default | Note |
|---|---|---|---|
children | Snippet | — | Required. The quoted content. |
cite | string | Snippet | — | Visible attribution, rendered in a <cite> outside the quote. |
citeUrl | string | — | Source URL — sets the blockquote cite attribute; never rendered as text. |
align | 'start' | 'center' | 'end' | 'start' | Aligns the attribution row under the quote; the quote body is untouched. |
intent | Intent | — | See Foundation → Colors & Intent. |
intentScope | 'line' | 'full' | 'line' | Only relevant with intent set. line colors just the accent line; full also colors the quote text. Attribution stays muted either way. |
class | string | — | Merged after the hz-blockquote class. |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-blockquote
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-align | 'start' | 'center' | 'end' | Aligns the attribution row only — the quote body is deliberately left alone. Default start. |
data-intent | any registered intent | Present only when intent is set. Colors only the accent line (border-inline-start) — no intent leaves the accent line at its default border color. |
data-intent-scope | 'line' | 'full' | Present only when intent is set (mirrors data-intent — meaningless without an intent to scope). line (default) matches data-intent alone; full also colors the quote text. The attribution row is never affected. |
Custom properties
| Hook | Values | Styles |
|---|---|---|
--hz-blockquote-border-width | <length> — default var(--hz-border-width-heavy) | Thickness of the inline-start accent line. Defaults to the heaviest border-width token; override with any length or a lighter token. The attribution row indent tracks it automatically. |
--hz-blockquote-font-size | <length> — default var(--hz-font-size-xl) | Font size of the quote body. Read, never declared, so it can be set per instance or inherited from any ancestor — the docs site tunes it down to body size for its doctrine notes. |
Part classes
| Hook | Values | Styles |
|---|---|---|
.hz-blockquote-quote | child element | The quote itself, carrying the accent bar. |
.hz-blockquote-attribution | child element | The attribution line. |
.hz-blockquote-cite | child element | The cite element. |
Accessibility
The root is always a <figure> wrapping a <blockquote>. When cite is provided, the attribution renders in a <figcaption><cite> outside the quote, so screen readers do not announce it as part of the quotation itself.
No ARIA is added: the native figure/blockquote/figcaption/cite elements carry all the semantics.
The decorative em-dash before the attribution is a theme ::before pseudo-element, so it never enters the accessible name.
References: MDN: <blockquote>