BlockQuote – Once UI

Use BlockQuote to present quoted text with emphasis and proper semantics. It renders a semantic <blockquote> element and forwards all layout and style props from Flex.

BlockQuote

“If you’re going to take this path, find your people.”Building is lonely if you do it alone.
—
Lorantonce-ui.com

<BlockQuote
  author={{
    name: "Lorant",
    avatar: "/images/avatar.jpg",
  }}
  link={{
    href: "https://once-ui.com/blog/truth",
    label: "once-ui.com"
  }}
  subline="Building is lonely if you do it alone.">
  “If you’re going to take this path, find your people.”
</BlockQuote>

Content

Use the children prop as the quote text and display an additional preline or subline.

Content

That’s when we realized the deeper problem.“So much of the industry has shifted from solving real problems to selling shortcuts.”Open your feed and you’ll see the same promises everywhere.
—
Lorant

<BlockQuote
  preline="That’s when we realized the deeper problem."
  subline="Open your feed and you’ll see the same promises everywhere."
  author={{
    name: "Lorant",
    avatar: "/images/avatar.jpg",
  }}>
  “So much of the industry has shifted from solving real problems to selling shortcuts.”
</BlockQuote>

Link

Attach a citation source using the link attribute. This is useful for accessibility and provenance.

Link

“The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
—Lorantonce-ui.com

<BlockQuote
  author={{
    name: "Lorant",
  }}
  link={{
    href: "once-ui.com/truth",
    label: "once-ui.com"
  }}>
  “The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
</BlockQuote>

Author

Include an author line below the quote.

Author

“Programs must be written for people to read, and only incidentally for machines to execute.”
—
Harold Abelson

<BlockQuote
  author={{
    name: "Lorant",
    avatar: "/images/avatar.jpg",
  }}>
    “No single piece guarantees success, but together, they create inevitability. Over time, people start recognizing your name, your style, your values, and your products. That recognition compounds.”
</BlockQuote>

Separators

Adjust the visibility of the separator lines by setting top, bottom or none to the separator prop.

Separator

“We weren’t interested in selling visions that fall apart the moment someone buys in. We wanted to build products that last.”

<BlockQuote separator="top">
  “We weren’t interested in selling visions that fall apart the moment someone buys in. We wanted to build products that last.”
</BlockQuote>

Alignment

Adjust the alignment of the quote text by setting align to left, center or right.

Alignment

“The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
—Lorantonce-ui.com

<BlockQuote
  align="left"
  separator="none"
  author={{
    name: "Lorant",
  }}
  link={{
    href: "once-ui.com/truth",
    label: "once-ui.com"
  }}>
  “The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
</BlockQuote>
<BlockQuote
  align="right"
  separator="top"
  author={{
    name: "Lorant",
  }}
  link={{
    href: "once-ui.com/truth",
    label: "once-ui.com"
  }}>
  “The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
</BlockQuote>

Styling

BlockQuote ships with a default look, but you can override appearance using any Flex styling props.

Styling

“The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”
—Lorantonce-ui.com

<BlockQuote 
  border="neutral-alpha-medium"
  background="surface"
  radius="xl"
  padding="l"
  align="left"
  separator="none"
  author={{
    name: "Lorant",
  }}
  link={{
    href: "once-ui.com/truth",
    label: "once-ui.com"
  }}>
  <Text variant="heading-default-l">“The first time a stranger pays for something you’ve built — something that came entirely from your mind — your worldview changes forever.”</Text>
</BlockQuote>

API Reference

Prop	Type	Default
children	React.ReactNode	—
preline Content rendered above the quote, such as a label or eyebrow.	React.ReactNode	—
subline	React.ReactNode	—
separator	topbottombothnone	both
author	{ name?: React.ReactNode, avatar?: string, }	—
link	{ href: string, label: string }	—
style	React.CSSProperties	—
className	string	—
align	centerleftright	center
…and every FlexProps prop	inherited	—

Accessibility Considerations

BlockQuote renders a semantic <blockquote> element to convey quoted content to assistive technologies. Provide a link URL when available to reference the source. Ensure sufficient color contrast if you override the default background or onBackground props.