Blockquote @astryx-svelte/core v0.5.2 · Blockquote

Usage

A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.
ts
import { Blockquote } from '@astryx-svelte/core';

Best practices

GuidancePractices
DoUse for quoted text, testimonials, or highlighted excerpts from external sources.
DoProvide a cite prop when the source of the quote is known.
DoPass the source through cite rather than typing it into children, so it renders as a semantic <cite> element that assistive technology can distinguish from the quotation.
Don'tUse for callout boxes or informational notes; use Banner for those.
Don'tWrap the attribution in your own <footer>. A <footer> inside a <blockquote> becomes a contentinfo document landmark, and a page with several quotes then reports several page footers.

Examples

Common configurations, variations, and states.
Blockquote — Testimonials
Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.
Blockquote — With Attribution
A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.