Section Library

Browse all 300+ pre-designed website sections organized across 20 categories, from hero banners to footers.

Overview

GritCMS ships with over 300 pre-designed website sections that you can use in the page builder. Every section is fully responsive, styled with Tailwind CSS, and customizable through the section editor. Sections are organized into 20 categories covering every part of a website.

All sections use a clean, neutral color palette by default (gray-900, gray-600, white, with indigo-600 accents) so they work well together regardless of which sections you combine.

How Sections Work

Each section is a self-contained React component with:

  • Default content -- Realistic placeholder text and layout so you can see what the section looks like immediately.
  • Editable props -- Every piece of text, image, color, and setting can be customized through the section editor.
  • Responsive design -- Sections adapt to mobile, tablet, and desktop screen sizes automatically.
  • No external dependencies -- Sections use only Tailwind CSS classes, with no component library required.

When you add a section to a page, a copy is created with the default content. You then customize the content to match your needs. Changes to one page's section do not affect the same section used on other pages.

Section Categories

Hero (25 sections)

Hero sections are full-width banners designed for the top of a page. They typically include a large heading, subheading, call-to-action buttons, and optional imagery.

Variants include:

  • Centered text with dual CTA buttons
  • Split layout with text on one side and image on the other
  • Gradient backgrounds (indigo-to-purple, dark overlays)
  • Background image with text overlay
  • Animated or typed text effects
  • Hero with embedded signup form
  • Hero with app screenshot or floating cards
  • Wave or curved bottom edges
  • Dark and light theme variations
  • Minimal text-only hero

Common editable fields: heading, subheading, primary button text, primary button URL, secondary button text, secondary button URL, background image, badge text.

Features (25 sections)

Feature sections showcase the capabilities, benefits, or selling points of your product or service.

Variants include:

  • 3-column and 4-column icon grids
  • Card-based grids with shadows and hover effects
  • Alternating image-and-text rows (zigzag layout)
  • Bento grid layout
  • Comparison table (us vs. them)
  • Timeline-style feature progression
  • Minimal list with descriptions
  • Tabbed feature showcase
  • Large icon feature blocks
  • Feature sections with background patterns

Common editable fields: section heading, section subheading, feature items (each with icon/title/description).

CTA (20 sections)

Call-to-action sections encourage visitors to take a specific action -- sign up, download, subscribe, or purchase.

Variants include:

  • Simple banner with heading and button
  • Gradient background CTA
  • Split layout with image
  • CTA with statistics or social proof
  • Countdown timer CTA
  • Newsletter signup combination
  • Dark background emphasis
  • App download (App Store / Play Store badges)
  • Free trial prompt
  • CTA with testimonial quote

Common editable fields: heading, description, button text, button URL, background color/image.

Pricing (20 sections)

Pricing sections display your product or service tiers with features, prices, and signup buttons.

Variants include:

  • 2-tier, 3-tier, and 4-tier layouts
  • Monthly/yearly toggle pricing
  • Comparison table with feature checkmarks
  • Pricing with FAQ section below
  • Highlighted "popular" plan
  • Minimal pricing cards
  • Enterprise/custom pricing
  • Freemium model display

Common editable fields: section heading, pricing tiers (each with name, price, period, features list, button text, button URL, highlighted flag).

Testimonials (20 sections)

Testimonial sections display customer reviews, quotes, and social proof.

Variants include:

  • Carousel with navigation arrows
  • 3-column grid cards
  • Single featured testimonial with large quote
  • Avatar and name card layout
  • Star rating display
  • Logo bar with company testimonials
  • Video testimonial embeds
  • Tweet/social media style quotes
  • Stacked card layout
  • Large blockquote with background

Common editable fields: section heading, testimonial items (each with quote, author name, author title, author image, company, rating).

FAQ (15 sections)

FAQ sections answer common questions in expandable or static formats.

Variants include:

  • Accordion with expand/collapse
  • Two-column layout
  • Searchable FAQ
  • Categorized with tabs
  • FAQ with sidebar navigation
  • Minimal single-column
  • Boxed card style
  • Alternating background colors
  • FAQ with CTA section at the bottom

Common editable fields: section heading, section description, FAQ items (each with question and answer).

Team (15 sections)

Team sections introduce your people with photos, roles, and social links.

Variants include:

  • 3-column and 4-column photo grids
  • Carousel slider
  • List layout with descriptions
  • Cards with hover overlay effects
  • Bento grid arrangement
  • Minimal text-only
  • Cards with social media links
  • Leadership spotlight
  • Circular photo layout

Common editable fields: section heading, section description, team members (each with name, role, image, bio, social links).

Gallery (15 sections)

Gallery sections display collections of images in organized layouts.

Variants include:

  • 3-column and 4-column grids
  • Masonry layout (varying heights)
  • Carousel slider
  • Lightbox with full-screen view
  • Portfolio with category filter
  • Before/after comparison
  • Instagram-style grid

Common editable fields: section heading, gallery images (each with URL, alt text, caption).

Stats (15 sections)

Stats sections display key numbers, metrics, and achievements.

Variants include:

  • 4-column counter row
  • 3-column counter with icons
  • Progress bar visualization
  • Comparison layout (before/after)
  • Milestone timeline
  • Animated counters
  • Dark background emphasis

Common editable fields: section heading, stat items (each with value, label, icon, description).

Contact (15 sections)

Contact sections provide ways for visitors to reach you.

Variants include:

  • Split layout with form and contact info
  • Full-width contact form
  • Form with embedded map
  • Contact cards only (no form)
  • Minimal with email and phone
  • Dark themed
  • Floating card over background
  • Contact with FAQ section
  • Multiple office locations

Common editable fields: section heading, description, email, phone, address, form fields, map embed URL.

Footer (15 sections)

Footer sections appear at the bottom of the page with navigation links, social media, and legal information.

Variants include:

  • 4-column and 3-column link grids
  • Mega footer with all sections
  • Centered minimal footer
  • Dark themed
  • Footer with newsletter signup
  • Footer with CTA banner
  • Social media focused
  • App download links

Common editable fields: company name, description, link columns (each with title and links), social media URLs, copyright text.

Header (15 sections)

Header sections provide the top navigation bar for your page.

Variants include:

  • Transparent overlay header
  • Solid background header
  • Sticky/fixed header
  • Mega menu with dropdown panels
  • Hamburger mobile menu
  • Centered logo layout
  • Header with top announcement bar
  • Header with CTA button
  • Minimal links only
  • Dark themed

Common editable fields: logo text, logo image, navigation links (each with label and URL), CTA button text, CTA button URL.

Blog (15 sections)

Blog sections display article previews and post listings.

Variants include:

  • 3-column and 2-column card grids
  • Featured large post with grid below
  • List layout with sidebar
  • Magazine-style mixed layout
  • Minimal text list
  • Card overlay with image background
  • Timeline layout
  • Category tabs

Common editable fields: section heading, blog posts (each with title, excerpt, image, category, date, author, URL).

Logos (10 sections)

Logo sections display partner, client, or integration logos to build trust.

Variants include:

  • Single row with grayscale logos
  • Single row with color logos
  • Grid layout
  • Carousel/ticker animation
  • Logos with testimonial quote
  • Trust badge display
  • Partner grid with descriptions

Common editable fields: section heading, logo items (each with image, alt text, URL).

Newsletter (10 sections)

Newsletter sections capture email signups.

Variants include:

  • Inline simple (single row)
  • Inline split layout
  • Centered with description
  • Form with image
  • Gradient background
  • Minimal single-field
  • Popup-style card
  • Sidebar widget style

Common editable fields: heading, description, placeholder text, button text, form action URL.

E-commerce (15 sections)

E-commerce sections display products and shopping-related content.

Variants include:

  • Product grid with cards
  • Single featured product showcase
  • Category cards
  • Cart summary display
  • Product carousel
  • Deal/sale banner
  • Collection grid

Common editable fields: section heading, product items (each with name, price, image, description, URL, badge).

Video (10 sections)

Video sections embed and showcase video content.

Variants include:

  • Centered video player with heading
  • Split layout with text and video
  • Background video with overlay text
  • Video gallery grid
  • Testimonial video spotlight
  • Product demo showcase

Common editable fields: heading, description, video URL, poster image, autoplay toggle.

About (15 sections)

About sections tell your story and share your company background.

Variants include:

  • Split layout (story + image)
  • Company timeline
  • Mission, vision, and values cards
  • History with milestones
  • Team introduction combo
  • Stats and story combination
  • Founder spotlight
  • Company culture showcase
  • Awards and recognition

Common editable fields: heading, description, story text, image, milestones/values items.

Banner sections are narrow announcement or notification strips.

Variants include:

  • Top announcement bar
  • Promotional ribbon
  • Countdown sale timer
  • Cookie consent notice
  • App download prompt
  • Seasonal themed
  • Gradient wave background

Common editable fields: text, button text, button URL, background color, dismissible toggle.

Divider (10 sections)

Divider sections are decorative separators between content blocks.

Variants include:

  • Wave shape
  • Diagonal/angled cut
  • Curved line
  • Gradient fade
  • Dotted pattern
  • Illustration strip
  • Blob shape
  • Mountain silhouette
  • Zigzag pattern

Common editable fields: color, height, flip direction toggle.

Using Sections in the Page Builder

To add any section to your page:

  1. Open the Page Builder for a page.
  2. Click Add Section at the bottom of the structure panel.
  3. Browse categories or search for a specific section.
  4. Click the section card to add it to your page.
  5. Customize the content in the section editor panel.

Every section can be customized, reordered, or removed at any time. See the Page Builder guide for details on the editing interface.

Next Steps

  • Page Builder -- Learn how to use the visual editor
  • Templates -- Browse complete page templates built from these sections
  • Pages -- Page settings and publishing workflow
Previous
← Page Builder
Next
Templates →