Content & Publishing
25 components for blogs, documentation, and content-rich applications
Blog Post Card
Article preview with metadata
When to useBlog listings, news feeds, content grids.
Tutorial5 min read
Getting Started with React
Learn the fundamentals of React and build your first component...
1.2k 89 12
Rich Text Editor
WYSIWYG toolbar and editor
When to useBlog posts, documentation, content management.
Start writing your content...
Quote Block
Styled blockquote
When to useArticles, testimonials, citations.
"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs
Table of Contents
Article navigation sidebar
When to useDocumentation, long articles, guides.
Contents
- 1Introduction
- 2Getting Started
- 3Core Concepts
- 4Advanced Topics
- 5Conclusion
Tag Cloud
Clickable category tags
When to useBlog sidebars, filtering, categories.
Reading Progress
Article scroll indicator
When to useLong-form content, articles, documentation.
35% complete~4 min remaining
Code Block
Syntax highlighted code
When to useDocumentation, tutorials, technical content.
JavaScript
const greeting = "Hello World";
console.log(greeting);Callout Boxes
Highlighted info sections
When to useTips, warnings, notes in content.
💡
Pro tip: Use keyboard shortcuts to speed up your workflow.
⚠️
Warning: This action cannot be undone.
Date & Time
Publication metadata
When to useArticles, posts, content timestamps.
Dec 2, 2024
5 min read
John Doe
Image with Caption
Captioned figure
When to useArticles, documentation, galleries.
Accordion FAQ
Expandable questions
When to useFAQs, documentation, help pages.
Answer to the question goes here with detailed explanation.
Step Guide
Numbered instructions
When to useTutorials, guides, onboarding.
1
Create your account
Brief description of this step.
2
Set up your profile
Brief description of this step.
3
Start creating
Brief description of this step.
Content Rating
Was this helpful feedback
When to useDocumentation, articles, help content.
Was this article helpful?
Comparison Table
Feature comparison grid
When to useProduct comparisons, plan features.
| Feature | Basic | Pro |
|---|---|---|
| Storage | 1GB | Unlimited |
| Users | 1GB | Unlimited |
| Support | 1GB | Unlimited |
Video Embed
Embedded video player
When to useTutorials, content, media pages.
2:45
Checklist
Interactive task list
When to useGuides, checklists, progress tracking.
Read introduction
Complete exercises
Take the quiz
Footnotes
Reference annotations
When to useAcademic content, citations, references.
This is an example paragraph with a footnote reference[1] that links to additional information below.
[1] Additional reference information or citation goes here.
Great article! Really helpful.
Thanks John!