Your Business Name
Skip to main content

Minimal Layout - Zero Distractions, Maximum Impact

Pure content, zero distraction. The cleanest reading experience possible. Perfect for landing pages and high-converting announcements.

What Is Minimal Layout?

Minimal layout strips away everything except the content itself. No sidebars, no related posts, no author bios - just pure content with maximum focus. Ideal for landing pages, short announcements, and high-converting content.

How to Create a Minimal Layout Page

Quick Start

Minimal layout is perfect for landing pages, success pages, and focused announcements. No distractions, just content and a clear CTA.

1. Create Your Landing Page

---
// src/pages/launch.astro
import Layout from '@theme/layouts/Layout.astro';
import Hero from '@theme/components/sections/Hero.astro';
import CTABlock from '@theme/components/sections/CTABlock.astro';

const title = 'New Feature Launch - Your Product';
const description = 'Announcing our latest feature...';
---

<Layout title={title} description={description}>
  <Hero
    variant="centered"
    heading="We Built Something Amazing"
    description="The feature you've been asking for is finally here."
    buttonText="Try It Now"
    buttonHref="/signup"
  />

  <section class="py-16 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4 max-w-2xl">
      <div class="prose prose-lg dark:prose-invert mx-auto text-center">
        <p class="text-xl text-gray-600 dark:text-gray-300">
          Simple, focused content that drives action.
        </p>
      </div>
    </div>
  </section>

  <CTABlock
    heading="Ready to Get Started?"
    description="Join thousands of happy customers"
    buttonText="Sign Up Free"
    buttonHref="/signup"
    variant="primary"
  />
</Layout>

2. Success Page Example

---
// src/pages/success.astro
import Layout from '@theme/layouts/Layout.astro';

const title = 'Thank You!';
const description = 'Your message has been received.';
---

<Layout title={title} description={description}>
  <section class="py-32 bg-white dark:bg-slate-950">
    <div class="container mx-auto px-4 max-w-2xl text-center">
      <div class="mb-8">
        <span class="text-6xl">✅</span>
      </div>
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
        Thank You!
      </h1>
      <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
        We'll get back to you within 24 hours.
      </p>
      <a
        href="/"
        class="inline-block bg-[--color-primary] text-white dark:text-gray-900 px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity"
      >
        Back to Home
      </a>
    </div>
  </section>
</Layout>

3. Key Principles

  • Center everything - create visual focus
  • Use max-w-2xl or max-w-3xl - narrow content width
  • Single clear CTA - don't split attention
  • Remove navigation links (optional) - prevent exits
  • Large text sizes - make content scannable

When to Use Minimal Layout

✅ Ideal For:

  • Landing pages
  • Thank you/success pages
  • Announcements
  • Legal pages (privacy, terms)
  • Single-focus content

❌ Not Suitable For:

  • Blog posts (use Magazine layout)
  • Content with metadata (use Standard layout)
  • Multi-section pages (use Standard or Magazine)

Minimal Layout Features

Zero Distractions

Content is the only focus

Fast Loading

Minimal markup for maximum speed

Mobile-First

Optimized for mobile reading

High Conversion

Clean path to your CTA

Explore Other Layouts

Each layout is optimized for specific content types. Choose the right one for your pages.