A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.
Preview loads on approachPreview loads on approach
Exact source · blockquote-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Blockquote} from '@astryxdesign/core/Blockquote';
import {Stack} from '@astryxdesign/core/Layout';
export default function BlockquoteShowcase() {
return (
<Stack direction="vertical" gap={4} style={{width: 500}}>
<Blockquote>
Design is not just what it looks like and feels like. Design is how it
works.
</Blockquote>
<Blockquote cite="Steve Jobs">
The people who are crazy enough to think they can change the world are
the ones who do.
</Blockquote>
</Stack>
);
}
Usage
A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.
Use for quoted text, testimonials, or highlighted excerpts from external sources.
Provide a cite prop when the source of the quote is known.
Pass the source through cite rather than typing it into children, so it renders as a semantic <cite> element that assistive technology can distinguish from the quotation.
Use for callout boxes or informational notes; use Banner for those.
Wrap the attribution in your own <footer>. A <footer> inside a <blockquote> becomes a contentinfo document landmark, and a page with several quotes then reports several page footers.
Typed props
Prop
Type and behavior
children
ReactNode · required
Content of the blockquote.
cite
ReactNode
Optional attribution for the quote. Rendered in a <cite> element after the quoted content.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
Anatomy
Rule · required
The border on the inline-start edge, drawn with --color-border-emphasized.
Quotation · required
The quoted content, passed as children. Renders inside the <blockquote> element.
Attribution · optional
The source, passed as cite. Renders as a <cite> element below the quotation.
