Prose Components
Showcase of all 4 prose variants for long-form text content.
Variant: default
Standard width prose block (col-lg-10). The go-to choice for most content.
Default Prose Block
This is the default prose variant with standard width. It's suitable for most long-form content like articles, policy pages, and general text blocks.
The content area spans col-lg-10, providing comfortable line lengths for reading. You can include any HTML content including headings, paragraphs, lists, and more.
- Supports HTML content
- Comfortable reading width
- Great for articles and policies
Variant: narrow
Narrower width (col-lg-8) for focused reading. Best for articles and blog posts.
Narrow Prose Block
The narrow variant uses col-lg-8 for a more focused reading experience. This is ideal for blog posts, articles, and content where you want the reader's attention to stay centered.
Shorter line lengths improve readability and make the content feel more intimate and personal.
Variant: wide
Full width (col-12) for when you need maximum space.
Wide Prose Block
The wide variant uses the full container width (col-12). Use this when you have content that benefits from extra horizontal space, such as wide tables, code blocks, or when embedding wide media.
Be cautious with wide prose for regular text as longer line lengths can be harder to read.
Variant: card
Content presented inside an elevated card with border and shadow.
Card Prose Block
The card variant wraps your content in an elevated card with border and shadow. This is great for highlighting important information or creating visual separation from surrounding content.
Perfect for notices, important announcements, or featured content that needs to stand out.
- Elevated card design
- Visual separation from page
- Great for notices and highlights
Background Colors
All prose variants support the bg property.
Light Background
Use bg: "light" to add a subtle grey background that helps separate sections.
Grey Background
Use bg: "grey" for a slightly more prominent background color.