ContentSection - Add Content Anywhere

Need to add text, lists, or simple content to your page? Wrap it in ContentSection.

See Examples

Choose Your Width

Regular Width

This is regular width. Perfect for paragraphs, lists, and readable text. The blue border shows the content boundaries.

Use: width="narrow"

Wide Width

This is wide width. See how the green border extends further? Use this when you need more horizontal space for tables, code examples, or side-by-side content.

Use: width="wide"

Choose Your Spacing

Spacing controls the vertical padding (top/bottom) of each section. Compare the three options:

Compact Spacing

py-8 (less vertical space)

Use for tightly grouped content

Default Spacing

py-12 md:py-16 (standard vertical space)

Use for most content sections

Spacious

py-16 md:py-20 (lots of vertical space)

Use when you want extra breathing room

Background Options

Choose white background, subtle gray, or no background at all.

White Background - Clean, standard

Subtle Gray - Gentle contrast

Column Layouts

Create side-by-side layouts that stack on mobile. Use columns=2 or columns=3:

Column 1

Two columns on tablet/desktop. Stacks vertically on mobile.

Column 2

Perfect for comparisons, feature lists, or side-by-side content.

Wide + 2 Columns

Use wide width for more horizontal space in each column.

More Room

Great for code examples or detailed content blocks.

Feature 1

Three columns work great for features or benefits.

Feature 2

Stacks on mobile, 3 columns on desktop.

Feature 3

Use wide width for 3-column layouts.

How to Use It

Wrap your content:

<ContentSection width="narrow" spacing="default" background="subtle" prose={true}>
  <h2>My Content</h2>
  <p>Just regular HTML here.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</ContentSection>

Create Columns

<ContentSection width="wide" columns={2}>
  <div>Column 1 content</div>
  <div>Column 2 content</div>
</ContentSection>

<ContentSection width="wide" columns={3}>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</ContentSection>

Options

width - "narrow" (regular), "wide" (extra space), or "full" (container width)
spacing - "compact", "default", or "spacious" (vertical padding)
background - "default" (white), "subtle" (gray), or "none"
prose - Add {true} to enable typography styling
columns - 1, 2, or 3 (creates responsive grid, stacks on mobile)

When to Use ContentSection

Adding paragraphs of text to a page
Creating lists or simple content blocks
Building showcase or documentation pages
Any time you need a content section with consistent spacing

Start Using ContentSection

Add it to your showcase pages and stop worrying about spacing and widths.

View All Components Section Components