Blockquote Component

Semantic <blockquote> with layout variants and dynamic accent colors.

Notes

Default blockquote

Default blockquote with left border and light background.

First paragraph of a multi-paragraph quote.

Second paragraph with natural spacing.

— Attribution via

Layout variants

blockquote-plain

Minimal — left border only, transparent background, no extra padding.

blockquote-quote

Large quotation marks at top-left and bottom-right, top divider line, no left border.

blockquote-bar

Vertical color bar on the start side, subtle rounded container.

blockquote-card

Full border, background, and quotation mark — similar to a callout card.

Color — default layout

primary — default theme

secondary — secondary theme

tertiary — tertiary theme

success — success status

error — error status

info — info status

warning — warning status

caution — caution status

highlight — highlight status

ink — neutral ink

title — neutral title

description — neutral description

caption — neutral caption

disabled — neutral disabled

Color — bar layout

primary

success

error

info

warning

caution

highlight

ink

title

description

caption

disabled

Color — card layout

primary

success

error

info

warning

caution

highlight

ink

title

description

caption

disabled

Color — quote layout

primary

success

error

info

warning

caution

highlight

ink

title

description

caption

disabled

Color — plain layout

primary

success

error

info

warning

caution

highlight

ink

title

description

caption

disabled

Custom colors

Multiple color formats are supported:

blockquote-green-100 — Tailwind shade

blockquote-green-500 — Tailwind shade

blockquote-green-800 — Tailwind shade

bar + green-100

bar + green-500

card + green-100

card + green-500

quote + green-100

quote + green-500

Use cases

Stay hungry, stay foolish.

— Steve Jobs, Stanford 2005

Tip: Ensure authentication tokens are configured before calling this API.

Caution: This action cannot be undone. Deleted data is irretrievable.

Done: All tasks completed. 128 records processed in 1.2s.

Error: Request failed (500). Server encountered an internal error.

A concise inline-style quote suitable for article body text.