Content Layout

A layout pattern for documentation, blogs, and content-focused sites.

Preview

On this page

Implementation

Installation

npx shadcn@latest add cs-coe-frontend/content-layout

Usage

import {
  ContentLayout,
  ContentLayoutHeader,
  ContentLayoutSidebar,
  ContentLayoutMain,
  ContentLayoutTOC,
  ContentLayoutFooter,
} from '@/components/layouts/content-layout';

<ContentLayout>
  <ContentLayoutHeader>
    {/* Navigation */}
  </ContentLayoutHeader>
  <ContentLayoutSidebar>
    {/* Table of contents */}
  </ContentLayoutSidebar>
  <ContentLayoutMain>
    {/* Article content */}
  </ContentLayoutMain>
  <ContentLayoutTOC>
    {/* On this page */}
  </ContentLayoutTOC>
  <ContentLayoutFooter>
    {/* Prev/Next navigation */}
  </ContentLayoutFooter>
</ContentLayout>

Use Cases

• Documentation sites
• Technical blogs
• Knowledge bases
• Marketing landing pages

Components

ContentLayoutHeader - Top navigation
ContentLayoutSidebar - Left navigation/TOC
ContentLayoutMain - Main content area
ContentLayoutTOC - Right "On this page"
ContentLayoutFooter - Prev/Next links