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.tsimport { Blockquote } from '@astryx-svelte/core';
Best practices
| Guidance | Practices |
|---|---|
| Do | Use for quoted text, testimonials, or highlighted excerpts from external sources. |
| Do | Provide a cite prop when the source of the quote is known. |
| Do | Pass 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't | Use for callout boxes or informational notes; use Banner for those. |
| Don't | Wrap 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.