Section Templates17Brandbook

Section Templates

Standardized templates for marketing sections, landing pages and product pages.

Section Templates

Hero Section

Active

Badge → Hero Title → Subtitle → 2 CTAs (primary + secondary) → Visual/Mockup

Top of landing pages

Features Grid

Active

Section title → 3-col Grid → Card (icon + title + description) × 3-6

Feature showcase

Social Proof

Active

Stats bar (3-4 metrics) → Testimonials carousel → Partner logos

Credibility

Pricing Table

Active

Annual/monthly toggle → 3-col Grid → PricingCard (name + price + features + CTA)

Conversion

FAQ Accordion

Active

Section title → Accordion items (question + collapsible answer)

Objections and questions

CTA Final

Active

Background gradient/glow → Impactful title → Subtitle → Large CTA

Page closing

Contact Form

Active

2 cols: Form (name + email + company + message) + Info sidebar

Lead capture

Blog Article

Planned

Breadcrumb → Hero (title + meta + img) → Content (MDX) → Related posts

Content

Anatomy of a Section

/* Standard section structure */
<section className="py-20 md:py-28">
  <div className="max-w-7xl mx-auto px-4 md:px-8">
    /* Badge / Eyebrow */
    <span className="inline-flex bg-[var(--brand-primary)]/10 text-[#cbd5e1] text-xs font-bold px-3 py-1 rounded-full border border-[#64748b]/30 uppercase tracking-wider mb-6">
      Section Title
    </span>

    /* Heading */
    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
      Text of <span className="grad-text">Heading</span>
    </h2>

    /* Description */
    <p className="text-slate-400 text-lg max-w-2xl mb-12">...</p>

    /* Content Grid */
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">...</div>
  </div>
</section>