Blockquote / Quote

Quotation in four styles: `bar` (border accent), `icon` (large quote mark), `card` (with author), `pull` (large centered pull-quote).

Import

import { Blockquote } from '@marbleui/ui'

Props

<Blockquote>

Prop	Type	Default
children *required	`ReactNode`	`—`
author	`string`	`—`
cite	`string`	`—`
className	`string`	`—`
role	`string`	`—`
variant	`'card' \| 'icon' \| 'bar' \| 'pull'`	`'bar'`

Usage notes

Quotation with optional attribution, for testimonials and pull quotes on marketing or case-study pages. Inside long-form text, a plain <blockquote> in Prose is already styled.

<Blockquote variant="card" author="Dana Reyes" role="VP Engineering, Northwind">
  We moved the whole admin to one component library and shipped the redesign two sprints early.
</Blockquote>

variant is bar (default, accent border), icon (large quote mark), card (bordered surface with an Avatar for the author) or pull (large and centered).
role is the author’s title, shown after the name; it is not an ARIA role. Neither renders unless author is set.
cite sets the source URL on the <blockquote> element and isn’t displayed.
It renders a <figure> with the attribution in a <figcaption>. No quotation marks are added to the text; the icon mark is decorative and hidden from screen readers.

Example source · show

import { Blockquote } from './blockquote'

const q = 'We replaced three UI kits with one library, and our accessibility audit came back clean for the first time.'
export const styles = {
  Bar: () => <Blockquote className="w-96" author="Dana Reyes" role="VP Engineering, Northwind">{q}</Blockquote>,
  Icon: () => <Blockquote variant="icon" className="w-96" author="Dana Reyes">{q}</Blockquote>,
  Card: () => <Blockquote variant="card" className="w-96" author="Dana Reyes" role="VP Engineering, Northwind">{q}</Blockquote>,
  Pull: () => <Blockquote variant="pull" className="w-[32rem]" author="Dana Reyes">“The best accessibility work is the work your users never notice.”</Blockquote>,
}

Source: packages/ui/src/blockquote/blockquote.tsx

Catalog