PlBlockquote

Somebody else's words, set apart from your own. An accent rule down the leading edge, the quote at a heading's scale, and (when there is one) an attribution in the markup the HTML spec asks for.

React

import { PlBlockquote } from 'plass-ui';

<PlBlockquote author="Ada Lovelace" source="Notes on the Analytical Engine">
  Simplicity is hard.
</PlBlockquote>;

import 'package:plass_ui/plass_ui.dart';

const PlBlockquote(
  author: Text('Ada Lovelace'),
  source: Text('Notes on the Analytical Engine'),
  child: Text('Simplicity is hard.'),
);

Props

Prop	Type	Default	Description
variantshared	'solid' | 'glass' | 'ghost'	'ghost'	What the sheet is made of. As on any container, the sheet is never dyed — a quote holds somebody else’s words. ghost, the default, is a rule in the margin and nothing else
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The quote’s type scale — a heading’s size with a paragraph’s leading
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
author	ReactNode	—	Who said it. Its presence is what turns the quote into a figure with a figcaption, which is the markup the HTML spec asks for
source	ReactNode	—	Where it is from — a book, a talk, a page. Rendered inside a cite, which is for the title of a work and, per the spec, never for a person’s name
cite	string	—	URL of the document the quote came from. Lands on the blockquote’s own cite attribute — machine-readable and shown to nobody
icon	ReactNode | false	—	The mark drawn before the quote. Omit it for the house glyph, pass a node to replace it, pass false to take it away
children	ReactNode	—	What was said

Prop	Type	Default	Description
variantshared	PlassVariant	PlassVariant.ghost	What the sheet is made of. As on any container, the sheet is never dyed — a quote holds somebody else’s words. ghost, the default, is a rule in the margin and nothing else
sizeshared	PlassSize	PlassSize.md	The quote’s type scale — a heading’s size with a paragraph’s leading
colorshared	PlassColor	PlassColor.primary	Semantic colour role. Arbitrary colour values are not accepted
densityshared	PlassDensity	PlassDensity.standard	Padding only — never the height, never the type scale
elevationshared	int	0	Drop shadow depth. 0 means no shadow at all
author	Widget?	—	Who said it. Its presence is what turns the quote into a figure with a figcaption, which is the markup the HTML spec asks for
source	Widget?	—	Where it is from — a book, a talk, a page. Rendered inside a cite, which is for the title of a work and, per the spec, never for a person’s name
icon	Widget?	—	The mark drawn before the quote. Omit it for the house glyph, pass a node to replace it, pass false to take it away
showIcon	bool	true	Whether a mark is drawn at all. React says this with icon={false}; Dart has no value that is neither null nor a widget, so it gets its own name
child	Widget?	—	What was said

Every native <figure> attribute passes straight through, onto the wrapper rather than onto the <blockquote> inside it. color is excluded from the pass-through because it is a Plass prop here.

There is no cite: it is a machine-readable URL on an element Flutter does not have, read by nobody and by nothing. Use source for the part a reader should see.

icon is a Widget? and showIcon is the switch beside it. React says both with one three-way prop, which Dart has no value for. There is null and there is a widget, and nothing that means "take it away".

What the shared axes (variant size color density elevation) mean across the library is in prop conventions.

Examples

author and source

author is a person and source is a work. That is not a naming preference. <cite> is the element for the title of a work and, per the spec, never for the name of a person, so the two cannot share a slot.

An attribution is about the quote and is not part of what was said, which is why passing one turns the wrapper into a <figure> with a <figcaption> outside the <blockquote>. Without one the wrapper is a plain <div>: a <figure> with no <figcaption> in it is a figure of nothing.

cite is the URL, and it lands on the <blockquote>'s own attribute, machine-readable and shown to nobody.

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteAttribution() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      <PlBlockquote>Nobody is credited, so this is a plain div.</PlBlockquote>

      <PlBlockquote author="Ada Lovelace">A person said it.</PlBlockquote>

      <PlBlockquote source="Notes on the Analytical Engine">A work it came from.</PlBlockquote>

      <PlBlockquote
        author="Ada Lovelace"
        source="Notes on the Analytical Engine"
        cite="https://example.com/notes"
      >
        Both, plus the machine-readable URL nobody sees.
      </PlBlockquote>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class BlockquoteAttribution extends StatelessWidget {
  const BlockquoteAttribution({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          PlBlockquote(child: Text('Nobody is credited, so there is no attribution row.')),
          PlBlockquote(author: Text('Ada Lovelace'), child: Text('A person said it.')),
          PlBlockquote(
            source: Text('Notes on the Analytical Engine'),
            child: Text('A work it came from.'),
          ),
          PlBlockquote(
            author: Text('Ada Lovelace'),
            source: Text('Notes on the Analytical Engine'),
            child: Text('Both.'),
          ),
        ],
      ),
    );
  }
}

variant

The sheet is never dyed, exactly as on a PlCard. A quote holds somebody else's words, and words on a tinted pane are words on a background nobody chose them against, so the family reaches the rule and stops.

ghost is the default and the one that belongs in running prose: a rule in the margin and nothing else, which is what a quote has looked like since long before there were surfaces to put one on.

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteVariants() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-5">
      {(['solid', 'glass', 'ghost'] as const).map((variant) => (
        <PlBlockquote key={variant} variant={variant} author={variant}>
          The same quote, three materials deep.
        </PlBlockquote>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class BlockquoteVariants extends StatelessWidget {
  const BlockquoteVariants({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 20,
        children: <Widget>[
          for (final variant in PlassVariant.values)
            PlBlockquote(
              variant: variant,
              author: Text(variant.name),
              child: const Text('The same quote, three materials deep.'),
            ),
        ],
      ),
    );
  }
}

color

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteColors() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {(['primary', 'success', 'warning', 'danger'] as const).map((color) => (
        <PlBlockquote key={color} color={color} icon={false}>
          The family reaches the rule and stops there.
        </PlBlockquote>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class BlockquoteColors extends StatelessWidget {
  const BlockquoteColors({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          for (final color in <PlassColor>[
            PlassColor.primary,
            PlassColor.success,
            PlassColor.warning,
            PlassColor.danger,
          ])
            PlBlockquote(
              color: color,
              showIcon: false,
              child: const Text('The family reaches the rule and stops there.'),
            ),
        ],
      ),
    );
  }
}

size

React

import { PlBlockquote } from 'plass-ui';

export default function BlockquoteSizes() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
        <PlBlockquote key={size} size={size} icon={false} author={size}>
          A quote is set at a heading’s scale with a paragraph’s leading.
        </PlBlockquote>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class BlockquoteSizes extends StatelessWidget {
  const BlockquoteSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 512,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          for (final size in PlassSize.values)
            PlBlockquote(
              size: size,
              showIcon: false,
              author: Text(size.name),
              child: const Text('A quote is set at a heading’s scale with a paragraph’s leading.'),
            ),
        ],
      ),
    );
  }
}

Accessibility

• The quote is a real <blockquote> and the attribution a real <figcaption> outside it. A name inside the quote claims the speaker said their own name.
• The quotation mark is decorative and aria-hidden. So is the em dash before the author. A screen reader announcing "em dash" before a name is reading the typography rather than the text.
• Nothing is drawn on the <blockquote> element itself. blockquote is one of the handful of tags a host stylesheet still styles by name, and moving the surface and the rule onto the wrapper is what lets a host reset undo its own version without also undoing this one.

• The quote and its attribution are one semantics node, read in order, with the attribution after the words rather than inside them. A name inside the quote claims the speaker said their own name.
• The quotation mark is drawn rather than typed and is excluded from semantics. So is the em dash before the author. A screen reader announcing "em dash" before a name is reading the typography rather than the text.
• The rule is painted beside the text rather than as a border on it, which is what keeps the corners on that edge square: a 2px rule that curves away from the text it marks is a bracket, not a margin rule.

Differences from the React build

React	Flutter	Why
<figure> / <figcaption> / <blockquote>	one semantics node	Flutter has no document markup to get right, so what the React build spends care on (which element the attribution lives in) has no counterpart. What survives is the reading order.
cite	—	A URL on an element that does not exist, read by nobody. source is the part a reader sees.
icon={false}	showIcon: false	Dart has no value that is neither null nor a widget, so "take it away" gets its own name.
children	child	Flutter's name.
className, style	—	There is no class list and no style attribute to pass through.

The quotation mark is the same drawing in both, unit for unit out of the same 16-unit box. A real “ would be set in whatever face the page uses and would change shape, weight and baseline with it, and at 2em it is the largest single glyph in the component.