Blockquote

Presents a quotation set apart from your own prose. Given an attribution, it wraps the quote and its source in the correct semantic markup.

import { Blockquote } from 'neba';

<Blockquote>Perfection is achieved when there is nothing left to take away.</Blockquote>

<Blockquote author="Antoine de Saint-Exupéry" source="Terre des Hommes">
  Perfection is achieved when there is nothing left to take away.
</Blockquote>;

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'text'	Weight of the sheet under the quote. `text` is the default and is a rule in the margin and nothing else. The accent rule stays in all three
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The quote's type scale and the sheet's padding. One step above body copy, with the leading a paragraph needs
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The sheet is never dyed; the family shows up in the rule and the mark
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. A quote is set into a page rather than floating over it, so this is rarely raised
author	ReactNode	—	Who said it. Its presence turns the whole thing into a figure with a figcaption, because the spec puts the attribution outside the quote
source	ReactNode	—	Where it is from: a book, a talk, a page. Rendered in a `<cite>`, which is for the title of a work and never for a person
cite	string	—	The source document's URL. Lands on the blockquote's own `cite` attribute, which is machine-readable and shown to nobody
icon	ReactNode | false	—	The mark before the quote. Omit for the house glyph, pass a node to replace it, pass false to take it away
children	ReactNode	—	What was said
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="fade"). Wrap it in an Animate* component for a trigger or a replay

With no attribution it renders a single <blockquote>. Given either author or source, it wraps that in a <figure> and puts the attribution in a <figcaption>.

<figure>
  <blockquote cite="…">…</blockquote>
  <figcaption>— Author, <cite>Source</cite></figcaption>
</figure>

author sits outside the <cite>, since <cite> is the element for the title of a work.

Examples

variant

text is the default: a single rule in the margin, sized to sit inside running prose. outline and solid draw a sheet, for a quote that is the point of the section.

import { Blockquote } from 'neba';

export default function BlockquoteVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      <Blockquote variant="text">
        The rule in the margin and nothing else, which is what a quote in running prose should be.
      </Blockquote>

      <Blockquote variant="outline">
        A hairline sheet under the words, for a quote that has to be found on a busy page.
      </Blockquote>

      <Blockquote variant="solid">
        The frosted sheet, for a pull quote that is the point of the section rather than an aside
        inside it.
      </Blockquote>
    </div>
  );
}

author and source

Pass author on its own, source on its own, or both. cite is the URL of the document the quote came from and lands on the <blockquote>'s cite attribute: it never appears on screen, only machines read it.

import { Blockquote } from 'neba';

export default function BlockquoteAttribution() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-6">
      {/* Nothing at all: a plain `<blockquote>`. */}
      <Blockquote variant="outline">Make it work, make it right, make it fast.</Blockquote>

      {/* A person. */}
      <Blockquote variant="outline" author="Kent Beck">
        Make it work, make it right, make it fast.
      </Blockquote>

      {/* A person and the work it came from, with a machine-readable URL. */}
      <Blockquote
        variant="outline"
        author="Kent Beck"
        source="Extreme Programming Explained"
        cite="https://example.com/xp"
      >
        Make it work, make it right, make it fast.
      </Blockquote>
    </div>
  );
}

color

The quote's background is never dyed. color applies to the margin rule and the quotation mark only.

import { Blockquote } from 'neba';

const families = ['primary', 'success', 'warning', 'danger'] as const;

export default function BlockquoteColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {families.map((color) => (
        <Blockquote key={color} color={color} variant="outline" size="sm" icon={false}>
          The sheet stays undyed whatever the family is — the colour is in the rule and the mark.
        </Blockquote>
      ))}
    </div>
  );
}

icon

icon behaves three ways: omit it for the default quotation glyph, pass a node to replace it, pass false to draw none.

<Blockquote>Default quotation mark</Blockquote>
<Blockquote icon={<QuoteIcon />}>A glyph of your own</Blockquote>
<Blockquote icon={false}>No glyph</Blockquote>