Typography Components

Blockquote

Displays quoted content with a left border accent. Inherits appearance from the parent by default, so it blends into themed containers.

Source Edit this page

Basic usage

Blockquote displays quoted content, shown here with an attribution line. 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>

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>

Appearances

Apply appearance props to color the blockquote. The default is inheritAppearance, which picks up the parent color.

Primary 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 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>

Blockquote is outline by default: an accent border in the appearance's colour, and no background of its own. filled paints no surface either. It switches the quote to the "on this fill" colour and drops the accent border, for a quote sitting on a filled surface of the same appearance.

outline info, on the page surface

outline danger, on the page surface

filled info, on a matching filled Card

<Col>
  <Blockquote info>outline info, on the page surface</Blockquote>
  <Blockquote danger>outline danger, on the page surface</Blockquote>
  <Card info filled>
    <Blockquote info filled>filled info, on a matching filled Card</Blockquote>
  </Card>
</Col>

To put a surface behind a quote, nest it in a filled Card rather than reaching for filled on the Blockquote itself.

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>

Source attribution

Pass cite to set the native <blockquote cite> attribute and render a visible source line below the quote. Blockquote has a single visual style, the reading-direction-start accent border (the outline default); it does not paint a background, so wrap it in a Card or Section to place a quote on a colored surface.

That brain of mine is something more than merely mortal, as time will show.Ada Lovelace

We can only see a short distance ahead, but we can see plenty there that needs to be done.Alan Turing

<Col>
  <Blockquote primary cite="Ada Lovelace">
    That brain of mine is something more than merely mortal, as time will show.
  </Blockquote>
  <Blockquote info cite="Alan Turing">
    We can only see a short distance ahead, but we can see plenty there that needs to be done.
  </Blockquote>
</Col>

Inside a Card

Blockquote inherits the parent appearance, so it blends into 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 fontBold>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 cut our migration time in half. The boolean props API is concise and the theming covers our cases.
- Sarah Chen, Lead Engineer

We shipped our new dashboard in half the time thanks to VaneUI components.
- Alex Rivera, Product Manager

<Col>
  <Card info>
    <Blockquote>
      <Text italic>VaneUI cut our migration time in half. The boolean props API is concise and the theming covers our cases.</Text>
      <Text sm fontBold> - 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 fontBold> - Alex Rivera, Product Manager</Text>
    </Blockquote>
  </Card>
</Col>

Blockquote Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inheritAppearance`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`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)
`fontHeading`	Font Family		Heading font family (defaults to sans, customizable via --font-heading) — emits font-heading
`fontMono`	Font Family		Monospace font family — emits font-mono
`fontSans`	Font Family	✓	Sans-serif font family (default) — emits font-sans
`fontSerif`	Font Family		Serif font family — emits font-serif
`italic`	Font Style		Italic font style
`notItalic`	Font Style		Not italic (normal) font style
`fontBlack`	Font Weight		Black font weight (900) — emits font-black
`fontBold`	Font Weight		Bold font weight (700) — emits font-bold
`fontExtrabold`	Font Weight		Extra bold font weight (800) — emits font-extrabold
`fontExtralight`	Font Weight		Extra light font weight (200) — emits font-extralight
`fontLight`	Font Weight		Light font weight (300) — emits font-light
`fontMedium`	Font Weight		Medium font weight (500) — emits font-medium
`fontNormal`	Font Weight		Normal font weight (400) — emits font-normal
`fontSemibold`	Font Weight		Semibold font weight (600) — emits font-semibold
`fontThin`	Font Weight		Thin font weight (100) — emits font-thin
`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)
`margin`	Margin		Enable margin on all sides
`marginB`	Margin		Enable only bottom margin
`marginT`	Margin		Enable only top margin
`marginX`	Margin		Enable only horizontal (inline) margin
`marginY`	Margin		Enable only vertical (block) margin
`noMargin`	Margin	✓	Disable margin (reset to 0)
`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
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align	✓	Align text to the reading-direction start (left in LTR, right in RTL)
`lineThrough`	Text Decoration		Add strikethrough/line-through decoration across text
`noUnderline`	Text Decoration		Remove ALL text-decoration — underline, line-through, and overline (text-decoration: none)
`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)
`breakAll`	Word Break		Break between any two characters - word-break: break-all
`breakKeep`	Word Break		Do not break CJK text - word-break: keep-all
`breakNormal`	Word Break		Reset breaking - overflow-wrap and word-break normal
`breakWords`	Word Break		Break long words to prevent overflow - overflow-wrap: break-word

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
`responsiveSizing`	Responsive Sizing		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`whitespaceBreakSpaces`	Whitespace		Preserve whitespace incl. trailing spaces, wrap text (white-space: break-spaces)
`whitespaceNormal`	Whitespace		Normal wrapping - default browser behavior
`whitespaceNowrap`	Whitespace		No wrap - text stays on single line
`whitespacePre`	Whitespace		Preserve whitespace and line breaks
`whitespacePreLine`	Whitespace		Preserve line breaks, collapse spaces, wrap text
`whitespacePreWrap`	Whitespace		Preserve whitespace, wrap text
`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