Ceres Theme

Layouts

Learn about the available page layouts in Ceres Theme.

Ceres Theme includes three layouts for different types of pages.

Available Layouts

Layout Purpose Use For
default Base layout with header and footer Foundation for other layouts
home Full-width landing pages Homepage, marketing pages
page Standard content pages About, contact, general pages

Default Layout

The base layout that includes the header, footer, navigation, and all required CSS and JavaScript.

All other layouts extend default, so you typically won’t use it directly.

Includes:

  • Google Fonts (Space Grotesk, JetBrains Mono)
  • Bootstrap Icons
  • Theme CSS
  • Header with navigation
  • Footer with links and social icons
  • Scroll effect for navbar

Home Layout

Use the home layout for landing pages where you want full-width sections.

---
layout: home
title: Welcome to My Site
---

<section class="hero">
    <div class="container">
        <!-- Hero content -->
    </div>
</section>

<section id="features">
    <div class="container">
        <!-- Features content -->
    </div>
</section>

Characteristics:

  • Full-width sections
  • No default content wrapper
  • Ideal for custom section-based layouts
  • Works with all components (hero, bento grid, pricing, etc.)

Page Layout

Use the page layout for standard content pages like About, Contact, or any text-heavy pages.

---
layout: page
title: About Us
---

## Our Story

We started this company in 2020...

Or with HTML:

---
layout: page
title: Contact
---

<h2>Get in Touch</h2>
<p>We'd love to hear from you.</p>

Characteristics:

  • Content wrapped in <main> tag
  • Standard container width
  • Good for Markdown content
  • Automatic typography styling

Using Layouts

In HTML Files

---
layout: home
title: My Page Title
---

<!-- Your HTML content here -->

In Markdown Files

---
layout: page
title: My Page Title
---

Your markdown content here...

Page Front Matter

All layouts support these front matter variables:

Variable Description
layout Which layout to use
title Page title (used in <title> tag)
description Page description (used in meta tags)
lang Page language (defaults to en)
custom_js Path to custom JavaScript file

Example:

---
layout: page
title: About Our Company
description: Learn about our mission and team.
lang: en
custom_js: /assets/js/about.js
---

Creating Custom Layouts

You can create your own layouts by extending the default layout. Create a file in _layouts/:

<!-- _layouts/docs.html -->
---
layout: default
---

<div class="docs-wrapper">
    <aside class="sidebar">
        <!-- Sidebar navigation -->
    </aside>
    <main class="content">
        <div class="docs-wrapper">
    <aside class="docs-sidebar">
        <nav class="docs-nav">
            <div class="docs-nav-section">
                <div class="docs-nav-title">Getting Started</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/getting-started" class="">Installation</a></li>
                    <li><a href="/ceres-theme/configuration" class="">Configuration</a></li>
                    <li><a href="/ceres-theme/layouts" class="">Layouts</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Components</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/components/" class="active">Overview</a></li>
                    <li><a href="/ceres-theme/components/hero" class="">Hero</a></li>
                    <li><a href="/ceres-theme/components/bento-grid" class="">Bento Grid</a></li>
                    <li><a href="/ceres-theme/components/steps" class="">Steps</a></li>
                    <li><a href="/ceres-theme/components/use-cases" class="">Use Cases</a></li>
                    <li><a href="/ceres-theme/components/pricing" class="">Pricing</a></li>
                    <li><a href="/ceres-theme/components/cta" class="">CTA Section</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Styling</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/css-reference" class="">CSS Reference</a></li>
                    <li><a href="/ceres-theme/customization" class="">Customization</a></li>
                    <li><a href="/ceres-theme/colors" class="">Colors</a></li>
                </ul>
            </div>
            <div class="docs-nav-section">
                <div class="docs-nav-title">Resources</div>
                <ul class="docs-nav-list">
                    <li><a href="/ceres-theme/migration" class="">Migration Guide</a></li>
                    <li><a href="/ceres-theme/changelog" class="">Changelog</a></li>
                </ul>
            </div>
        </nav>
    </aside>
    <main class="docs-content">
        <article class="docs-article">
            
            <header class="docs-header">
                <h1>Components</h1>
                
                <p class="docs-lead">Overview of all pre-built UI components available in Ceres Theme.</p>
                
            </header>
            
            <p>Ceres Theme includes a comprehensive set of pre-built components for building professional landing pages.</p>

<h2 id="component-list">Component List</h2>

<table>
  <thead>
    <tr>
      <th>Component</th>
      <th>Description</th>
      <th>Use For</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/components/hero">Hero</a></td>
      <td>Full-height intro section</td>
      <td>Page headers, landing intros</td>
    </tr>
    <tr>
      <td><a href="/components/bento-grid">Bento Grid</a></td>
      <td>Feature card grid</td>
      <td>Feature showcases</td>
    </tr>
    <tr>
      <td><a href="/components/steps">Steps</a></td>
      <td>Numbered step cards</td>
      <td>Processes, how-it-works</td>
    </tr>
    <tr>
      <td><a href="/components/use-cases">Use Cases</a></td>
      <td>Horizontal cards with icons</td>
      <td>Use cases, benefits</td>
    </tr>
    <tr>
      <td><a href="/components/pricing">Pricing</a></td>
      <td>Pricing tier cards</td>
      <td>Pricing pages</td>
    </tr>
    <tr>
      <td><a href="/components/cta">CTA</a></td>
      <td>Call-to-action section</td>
      <td>Page endings, conversions</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="using-components">Using Components</h2>

<h3 id="as-includes">As Includes</h3>

<p>Some components are available as Jekyll includes:</p>

<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>hero.html<span class="err">
</span><span class="w">   </span><span class="na">tag</span><span class="o">=</span><span class="s2">"Welcome"</span><span class="err">
</span><span class="w">   </span><span class="na">title</span><span class="o">=</span><span class="s2">"Hello &lt;span class='gradient'&gt;World&lt;/span&gt;"</span><span class="err">
</span><span class="w">   </span><span class="na">description</span><span class="o">=</span><span class="s2">"Your description here."</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary</span><span class="o">=</span><span class="s2">"Get Started"</span><span class="err">
</span><span class="w">   </span><span class="na">cta_primary_url</span><span class="o">=</span><span class="s2">"#"</span><span class="err">
</span><span class="p">%}</span>
</code></pre></div></div>

<h3 id="as-html">As HTML</h3>

<p>All components can also be used as plain HTML:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">class=</span><span class="s">"hero"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-content"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero-tag"</span><span class="nt">&gt;</span>Welcome<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;h1&gt;</span>Hello <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"gradient"</span><span class="nt">&gt;</span>World<span class="nt">&lt;/span&gt;&lt;/h1&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="available-includes">Available Includes</h2>

<p>The theme provides these reusable includes:</p>

<h3 id="herohtml">hero.html</h3>

<p>Full-height hero section with tag, title, description, CTAs, and optional stats.</p>

<p><a href="/components/hero">View Hero Documentation →</a></p>

<h3 id="bento-cardhtml">bento-card.html</h3>

<p>Individual feature card for use in bento grids.</p>

<p><a href="/components/bento-grid">View Bento Grid Documentation →</a></p>

<h3 id="pricing-cardhtml">pricing-card.html</h3>

<p>Individual pricing tier card.</p>

<p><a href="/components/pricing">View Pricing Documentation →</a></p>

<h3 id="ctahtml">cta.html</h3>

<p>Call-to-action section with title, description, and buttons.</p>

<p><a href="/components/cta">View CTA Documentation →</a></p>

<hr />

<h2 id="component-sections">Component Sections</h2>

<p>Most components are organized into sections. Use this pattern:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"features"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"section-number"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">&gt;</span>Why Choose Us<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"section-desc"</span><span class="nt">&gt;</span>Our key features explained.<span class="nt">&lt;/p&gt;</span>
        
        <span class="c">&lt;!-- Component content here --&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<h3 id="section-classes">Section Classes</h3>

<table>
  <thead>
    <tr>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">section</code></td>
      <td>Standard section (automatic with <code class="language-plaintext highlighter-rouge">&lt;section&gt;</code> tag)</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">section-gray</code></td>
      <td>Gray background section</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">section-number</code></td>
      <td>Small uppercase label above title</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">section-title</code></td>
      <td>Large section heading</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">section-desc</code></td>
      <td>Section description text</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="quick-examples">Quick Examples</h2>

<h3 id="feature-section">Feature Section</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"features"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"section-number"</span><span class="nt">&gt;</span>Features<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">&gt;</span>Everything you need<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bento-grid"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bento-card"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bento-icon"</span><span class="nt">&gt;&lt;i</span> <span class="na">class=</span><span class="s">"bi bi-shield-check"</span><span class="nt">&gt;&lt;/i&gt;&lt;/div&gt;</span>
                <span class="nt">&lt;h3&gt;</span>Secure<span class="nt">&lt;/h3&gt;</span>
                <span class="nt">&lt;p&gt;</span>Enterprise-grade security built in.<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
            <span class="c">&lt;!-- More cards... --&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<h3 id="pricing-section">Pricing Section</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"pricing"</span> <span class="na">class=</span><span class="s">"section-gray"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"section-number"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/span&gt;</span>
            <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"section-title"</span><span class="nt">&gt;</span>Simple pricing<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pricing-grid"</span><span class="nt">&gt;</span>
            <span class="c">&lt;!-- Pricing cards... --&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="next-steps">Next Steps</h2>

<p>Explore each component in detail:</p>

<ul>
  <li><a href="/components/hero">Hero Section</a></li>
  <li><a href="/components/bento-grid">Bento Grid</a></li>
  <li><a href="/components/steps">Steps</a></li>
  <li><a href="/components/use-cases">Use Cases</a></li>
  <li><a href="/components/pricing">Pricing Cards</a></li>
  <li><a href="/components/cta">CTA Section</a></li>
</ul>

        </article>
    </main>
</div>

    </main>
</div>

Then use it in your pages:

---
layout: docs
title: Documentation
---

Layout Examples

Landing Page (home)

---
layout: home
title: Product Name - Tagline Here
---



<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content">
                    
                    <div class="hero-tag">New Release</div>
                    
                    
                    <h1>Welcome to <span class='gradient'>Product</span></h1>
                    
                    
                    <p>A brief product description.</p>
                    
                    
                    <div class="hero-actions">
                        
                        <a href="#pricing" class="btn btn-glow btn-lg">
                            Get Started
                        </a>
                        
                        
                    </div>
                    
                    
                </div>
            </div>
            <div class="col-lg-6">
                
            </div>
        </div>
    </div>
</section>


<!-- More sections... -->

Content Page (page)

---
layout: page
title: Privacy Policy
---

## Introduction

This privacy policy explains how we collect and use your data...

## Data Collection

We collect the following information:

- Name and email address
- Usage statistics
- ...