Components
/Astryx Blockquote/
Astryx Blockquote
Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <blockquote> markup and supports an optional cite attribution rendered in a <footer> with <cite>.
Loading preview...
'use client';
import Blockquote from '@/components/ui/astryx-blockquote';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';
export default function BlockquoteShowcase() {
return (
<Theme theme={neutralTheme}>
<div
style={{
minHeight: '100dvh',
display: 'grid',
placeItems: 'center',
padding: 24,
}}>
<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>
</div>
</Theme>
);
}