Skip to content

Content Sections

Text and media layouts for long-form content.

2 component(s)

Article Layout – Bootstrap 5 content sections preview

Article Layout

Bootstrap 5 long-form article layout with drop cap, wide figure, pull quote, author box and a sticky reading progress bar.

Bootstrap 5 Content Sections
Article with Table of Contents – Tailwind CSS content sections preview

Article with Table of Contents

Tailwind CSS long-form article layout with a sticky table of contents that highlights the current section and shows reading progress.

Tailwind CSS Content Sections

What is a content section?

A content section is a layout for longer text combined with media: an article body, a story block, an image beside explanatory paragraphs, a pull quote, a two-column text layout or a section with a sticky table of contents. Content sections carry the explanation on about pages, case studies, documentation pages, product stories and long-form landing pages, where readable typography matters more than visual effects.

When to use a content section

Use one whenever you need to explain something in detail. Mixing text-only blocks with image-and-text blocks keeps long pages readable and helps break content into logical chunks.

Best practices

  • Limit line length to roughly 60 to 80 characters; max-width: 65ch is a simple rule of thumb.
  • Use a clear heading hierarchy (<h2>, <h3>) and real lists rather than visual imitations.
  • Keep body text at a comfortable size and line height, and ensure at least 4.5:1 contrast.
  • Use <figure> and <figcaption> for images with captions and <blockquote> for quotes.
  • On small screens, stack media above or below the text instead of squeezing two columns.
  • Give images width, height or aspect-ratio to prevent layout shift, and lazy-load those further down.
  • If you add a sticky table of contents, make sure it does not cover content and works with keyboard navigation.

Bootstrap, Tailwind CSS and pure CSS versions

Content section examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the grid, typography classes and image utilities, and Bootstrap 6 variants use the theme-* colour roles for highlights and callouts. Tailwind CSS versions apply utility classes to every element, and pure CSS versions style semantic HTML directly with custom properties. Filter by framework, read each layout in the live preview, then copy the code or download it. Replace the placeholder text and images with your own and adjust spacing to fit your design.