Typography Components
Blockquote
Displays quoted content with a left border accent. Inherits appearance from the parent by default for seamless embedding in themed containers.
Displays quoted content as a semantic <blockquote> with a left border accent. Inherits appearance from the parent by default for seamless embedding in themed containers.
Basic Usage
A blockquote with attribution. The element renders as <blockquote> and inherits color from its surroundings.
The only way to do great work is to love what you do.
— Steve Jobs
<Blockquote> <Text italic>The only way to do great work is to love what you do.</Text> <Text sm secondary>— Steve Jobs</Text></Blockquote>Appearances
Apply appearance props to color the blockquote. The default is inherit, which picks up the parent color.
Primary appearance blockquote.
Brand appearance blockquote.
Accent appearance blockquote.
Secondary appearance blockquote.
Success appearance blockquote.
Danger appearance blockquote.
Warning appearance blockquote.
Info appearance blockquote.
<Col> <Blockquote primary>Primary appearance blockquote.</Blockquote> <Blockquote brand>Brand appearance blockquote.</Blockquote> <Blockquote accent>Accent appearance blockquote.</Blockquote> <Blockquote secondary>Secondary appearance blockquote.</Blockquote> <Blockquote success>Success appearance blockquote.</Blockquote> <Blockquote danger>Danger appearance blockquote.</Blockquote> <Blockquote warning>Warning appearance blockquote.</Blockquote> <Blockquote info>Info appearance blockquote.</Blockquote></Col>Sizes
Blockquote supports five sizes: xs, sm, md (default), lg, xl.
Size xs: The best way to predict the future is to create it.
Size sm: The best way to predict the future is to create it.
Size md: The best way to predict the future is to create it.
Size lg: The best way to predict the future is to create it.
Size xl: The best way to predict the future is to create it.
<Col> <Blockquote xs primary>Size xs: The best way to predict the future is to create it.</Blockquote> <Blockquote sm primary>Size sm: The best way to predict the future is to create it.</Blockquote> <Blockquote primary>Size md: The best way to predict the future is to create it.</Blockquote> <Blockquote lg primary>Size lg: The best way to predict the future is to create it.</Blockquote> <Blockquote xl primary>Size xl: The best way to predict the future is to create it.</Blockquote></Col>Italic
Italic is not a default — opt in with the italic prop for traditional quotation styling.
Upright (default) — no italic styling.
Italic — traditional quotation styling.
<Col> <Blockquote primary>Upright (default) — no italic styling.</Blockquote> <Blockquote primary italic>Italic — traditional quotation styling.</Blockquote></Col>Variants
Use filled for solid background blockquotes or outline (default) for the left-border accent style.
Outline (default) — with a left border accent.
Filled — solid background for emphasis.
Outline info — informational note.
Filled info — strong callout.
<Col> <Blockquote primary>Outline (default) — with a left border accent.</Blockquote> <Blockquote primary filled>Filled — solid background for emphasis.</Blockquote> <Blockquote info>Outline info — informational note.</Blockquote> <Blockquote info filled>Filled info — strong callout.</Blockquote></Col>Inside a Card
Blockquote inherits the parent appearance, making it blend seamlessly inside themed containers.
Inherits primary from the card.
Inherits success from the card.
Inherits danger from the card.
<Row flexWrap> <Card primary> <Blockquote>Inherits primary from the card.</Blockquote> </Card> <Card success> <Blockquote>Inherits success from the card.</Blockquote> </Card> <Card danger> <Blockquote>Inherits danger from the card.</Blockquote> </Card></Row>With Rich Content
Blockquotes can contain multiple paragraphs and nested components.
Steve Jobs
Innovation distinguishes between a leader and a follower. Stay hungry, stay foolish.
<Blockquote primary> <Text bold>Steve Jobs</Text> <Text>Innovation distinguishes between a leader and a follower. Stay hungry, stay foolish.</Text></Blockquote>Testimonial Pattern
Use blockquotes with attribution for testimonials and customer quotes.
VaneUI made our design system migration incredibly smooth. The boolean props API is intuitive and the theming is powerful.
— Sarah Chen, Lead Engineer
We shipped our new dashboard in half the time thanks to VaneUI components.
— Alex Rivera, Product Manager
<Col> <Card brand> <Blockquote> <Text italic>VaneUI made our design system migration incredibly smooth. The boolean props API is intuitive and the theming is powerful.</Text> <Text sm bold>— Sarah Chen, Lead Engineer</Text> </Blockquote> </Card> <Card success> <Blockquote> <Text italic>We shipped our new dashboard in half the time thanks to VaneUI components.</Text> <Text sm bold>— Alex Rivera, Product Manager</Text> </Blockquote> </Card></Col>Blockquote Props
| Prop | Category | Default | Description |
|---|---|---|---|
accent | Appearance | Accent color appearance (rose) | |
brand | Appearance | Brand color appearance (blue) | |
danger | Appearance | Danger color appearance (red) | |
info | Appearance | Info color appearance (cyan) | |
inherit | Appearance | ✓ | Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables |
link | Appearance | Link color appearance (blue, for hyperlinks) | |
primary | Appearance | Primary color appearance (gray) | |
secondary | Appearance | Secondary color appearance (gray) | |
success | Appearance | Success color appearance (green) | |
tertiary | Appearance | Tertiary color appearance | |
warning | Appearance | Warning color appearance (amber) | |
heading | Font Family | Heading font family (defaults to sans, independently customizable via --font-heading CSS variable) | |
mono | Font Family | Monospace font family | |
sans | Font Family | ✓ | Sans-serif font family (default) |
serif | Font Family | Serif font family | |
italic | Font Style | Italic font style | |
notItalic | Font Style | Not italic (normal) font style | |
black | Font Weight | Black font weight (900) | |
bold | Font Weight | Bold font weight (700) | |
extrabold | Font Weight | Extra bold font weight (800) | |
extralight | Font Weight | Extra light font weight (200) | |
light | Font Weight | Light font weight (300) | |
medium | Font Weight | Medium font weight (500) | |
normal | Font Weight | Normal font weight (400) | |
semibold | Font Weight | Semibold font weight (600) | |
thin | Font Weight | Thin font weight (100) | |
inheritColor | Inherit Color | Inherit text color from parent via CSS variable cascade (suppresses data-appearance emission) | |
noInheritColor | Inherit Color | Keep own text color; do not inherit from parent | |
inheritSize | Inherit Size | Inherit font-size and line-height from the nearest parent typography element | |
noInheritSize | Inherit Size | Keep own font-size; do not inherit from parent | |
trackingNormal | Letter Spacing | Normal letter spacing (0) | |
trackingTight | Letter Spacing | Tight letter spacing (-0.025em) | |
trackingTighter | Letter Spacing | Tighter letter spacing (-0.05em) | |
trackingWide | Letter Spacing | Wide letter spacing (0.025em) | |
trackingWider | Letter Spacing | Wider letter spacing (0.05em) | |
trackingWidest | Letter Spacing | Widest letter spacing (0.1em) | |
lg | Size | Large size | |
md | Size | ✓ | Medium size (default) |
sm | Size | Small size | |
xl | Size | Extra large size | |
xs | Size | Extra small size | |
textCenter | Text Align | Align text to center | |
textJustify | Text Align | Justify text | |
textLeft | Text Align | ✓ | Align text to left |
textRight | Text Align | Align text to right | |
lineThrough | Text Decoration | Add strikethrough/line-through decoration across text | |
noUnderline | Text Decoration | Remove text decoration (no underline, strikethrough, etc.) | |
overline | Text Decoration | Add overline decoration above text | |
underline | Text Decoration | Add underline decoration below text | |
capitalize | Text Transform | Capitalize first letter of each word | |
lowercase | Text Transform | Transform text to lowercase | |
normalCase | Text Transform | Normal text case (no transformation) | |
uppercase | Text Transform | Transform text to uppercase | |
lineClamp2 | Truncate | Truncate at 2 lines with ellipsis | |
lineClamp3 | Truncate | Truncate at 3 lines with ellipsis | |
lineClamp4 | Truncate | Truncate at 4 lines with ellipsis | |
lineClamp5 | Truncate | Truncate at 5 lines with ellipsis | |
noTruncate | Truncate | Remove truncation | |
truncate | Truncate | Single line truncation with ellipsis | |
filled | Variant | Filled variant - solid background with contrasting text color | |
ghost | Variant | Ghost variant - transparent background, no border, appearance-colored text, tinted hover background | |
outline | Variant | ✓ | Outline variant - transparent background with border and colored text (default) |
Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props
| Prop | Category | Default | Description |
|---|---|---|---|
cursorDefault | Cursor | Default cursor - standard arrow | |
cursorMove | Cursor | Move cursor - indicates draggable element | |
cursorNone | Cursor | No cursor - hides the cursor | |
cursorNotAllowed | Cursor | Not-allowed cursor - indicates disabled state | |
cursorPointer | Cursor | Pointer cursor - indicates clickable element | |
cursorText | Cursor | Text cursor - indicates selectable text | |
cursorWait | Cursor | Wait cursor - indicates loading/processing | |
block | Display | Block display - takes full width, new line | |
contents | Display | Contents display - element's box is removed, children display as if parent didn't exist | |
flex | Display | Flex display - flexbox container | |
grid | Display | Grid display - CSS grid container | |
hidden | Display | Hidden display - element is not visible | |
inline | Display | Inline display - flows with text | |
inlineBlock | Display | Inline-block display - inline but with block properties | |
inlineFlex | Display | Inline-flex display - inline flexbox container | |
inlineGrid | Display | Inline-grid display - inline grid container | |
table | Display | Table display - behaves like table element | |
tableCell | Display | Table-cell display - behaves like td element | |
hAuto | Height | Set height to auto | |
hFit | Height | Set height to fit-content | |
hFull | Height | Set height to 100% | |
hScreen | Height | Set height to 100vh (viewport height), removes max-height constraint | |
desktopHide | Hide | Hide element on desktop devices and below (max-desktop: 80rem) | |
mobileHide | Hide | Hide element on mobile devices and below (max-mobile: 48rem) | |
tabletHide | Hide | Hide element on tablet devices and below (max-tablet: 64rem) | |
itemsBaseline | Items | Align items to baseline | |
itemsCenter | Items | Align items to center | |
itemsEnd | Items | Align items to end (bottom/right) | |
itemsStart | Items | Align items to start (top/left) | |
itemsStretch | Items | Stretch items to fill container | |
justifyAround | Justify | Distribute items with space around them | |
justifyBaseline | Justify | Align items along their baseline on main axis | |
justifyBetween | Justify | Distribute items with space between them | |
justifyCenter | Justify | Center items along the main axis | |
justifyEnd | Justify | Pack items toward the end of the main axis | |
justifyEvenly | Justify | Distribute items with equal space around them | |
justifyStart | Justify | Pack items toward the start of the main axis | |
justifyStretch | Justify | Stretch items to fill the main axis | |
overflowAuto | Overflow | Auto overflow - show scrollbars if needed | |
overflowClip | Overflow | Clip overflow - hard clip without scrollbars | |
overflowHidden | Overflow | Hidden overflow - clip content without scrollbars | |
overflowScroll | Overflow | Scroll overflow - always show scrollbars | |
overflowVisible | Overflow | Visible overflow - content extends beyond bounds | |
overflowXAuto | Overflow | Auto overflow on X-axis only | |
overflowXClip | Overflow | Clip overflow on X-axis only | |
overflowXHidden | Overflow | Hidden overflow on X-axis only | |
overflowXScroll | Overflow | Scroll overflow on X-axis only | |
overflowXVisible | Overflow | Visible overflow on X-axis only | |
overflowYAuto | Overflow | Auto overflow on Y-axis only | |
overflowYClip | Overflow | Clip overflow on Y-axis only | |
overflowYHidden | Overflow | Hidden overflow on Y-axis only | |
overflowYScroll | Overflow | Scroll overflow on Y-axis only | |
overflowYVisible | Overflow | Visible overflow on Y-axis only | |
absolute | Position | Absolute positioning | |
fixed | Position | Fixed positioning | |
relative | Position | Relative positioning | |
static | Position | Static positioning | |
sticky | Position | Sticky positioning | |
responsive | Responsive | Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap | |
wAuto | Width | Set width to auto | |
wFit | Width | Set width to fit-content | |
wFull | Width | ✓ | Set width to 100% |
wScreen | Width | Set width to 100vw (viewport width), removes max-width constraint |