Blockquote
v0.4.0
Styled quote component with 3 variants and optional author attribution.
Live Demo
Default Variant
The important thing is not to stop questioning. Curiosity has its own reason for existing.
Accent Variant
Innovation distinguishes between a leader and a follower.
Subtle Variant
We delight in the beauty of the butterfly, but rarely admit the changes it has gone through to achieve that beauty.
Installation
Terminalbash
Usage
Reacttsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
author | string | undefined | Quote author name |
source | string | undefined | Source/book/article title |
cite | string | undefined | URL to the source |
variant | 'default' | 'accent' | 'subtle' | 'default' | Visual variant (default, accent, or subtle) |
className | string | undefined | Additional CSS classes to apply |
Best Practices
Do
- ✓ Always provide attribution with author and source when known
- ✓ Use the cite prop with a valid URL for accessibility and SEO
- ✓ Choose variants that match your content hierarchy (accent for emphasis, subtle for secondary)
- ✓ Keep quotes concise and impactful - break long quotes into paragraphs
- ✓ Use semantic HTML for proper quote markup
Don't
- ✗ Don't use blockquotes for non-quote content like tips or warnings
- ✗ Don't omit attribution for copyrighted or published quotes
- ✗ Don't use accent variant everywhere - it loses impact
- ✗ Don't include entire paragraphs - extract the key message
- ✗ Don't forget to escape special characters in quotes