Blog Patterns

Five distinct blog layouts to break monotony. Each uses the same universal class structure - just change the parent class to completely transform the look.

One Structure, Five Looks

All blog layouts use the same nested classes (.container, .sub-container, .title, .description, .img-container). Change the parent class from .blog-1 to .blog-5 and the entire layout transforms automatically.

Layout Overview

.blog-1

Cards Grid

Default

.blog-2

List / Rows

Horizontal

.blog-3

Magazine

Featured

.blog-4

Masonry

Pinterest

.blog-5

Minimal

Text-only

Blog-1: Cards Grid

3-column responsive grid with image cards. Best for visual blogs with featured images.

HTML Structure
<section class="blog-1">
    <div class="container">
        <h1 class="title">Latest Posts</h1>
        <p class="description">Our recent articles</p>

        <div class="data-container">
            <!-- Repeat for each post -->
            <div class="sub-container">
                <div class="img-container">
                    <img src="..." alt="...">
                </div>
                <div class="content-wrapper">
                    <h3 class="title">Post Title</h3>
                    <p class="description">Excerpt...</p>
                    <div class="meta">
                        <span class="date">Dec 10, 2025</span>
                        <span class="read-time">5 min read</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Features

  • 3-column grid (responsive: 3 → 2 → 1)
  • Card shadows with hover lift effect
  • Image zoom on hover
  • 16:10 aspect ratio for images
  • Truncated excerpts (3 lines max)

Blog-2: List / Rows

Horizontal cards with image on left, content on right. Best for scannable lists.

Usage
<section class="blog-2">
    <div class="container">
        <div class="data-container">
            <div class="sub-container">
                <div class="img-container">...</div>
                <div class="content-wrapper">
                    <div class="meta">Dec 10, 2025</div>
                    <h3 class="title">Post Title</h3>
                    <p class="description">Full excerpt...</p>
                    <a class="cta">Read More →</a>
                </div>
            </div>
        </div>
    </div>
</section>

Features

  • Horizontal layout (image 280px, content flexible)
  • Stacks vertically on mobile
  • More room for longer excerpts
  • Animated arrow on CTA hover
  • Subtle background change on hover

Blog-3: Magazine

Featured post (large) with smaller cards alongside. Best for highlighting top content.

Usage
<section class="blog-3">
    <div class="container">
        <div class="data-container">
            <!-- First item becomes featured (spans 2 rows) -->
            <div class="sub-container">
                <div class="img-container">...</div>
                <div class="content-wrapper">...</div>
                <div class="tags"><span class="tag">Featured</span></div>
            </div>

            <!-- Remaining items are smaller -->
            <div class="sub-container">...</div>
            <div class="sub-container">...</div>
        </div>
    </div>
</section>

Features

  • First post becomes featured (large, spans 2 rows)
  • Featured has full-bleed image with overlay text
  • Secondary posts are compact horizontal cards
  • Tag badge positioned on featured image
  • Great for homepage hero sections

Blog-4: Masonry

Pinterest-style variable height columns. Best for visual variety.

Usage
<section class="blog-4">
    <div class="container">
        <div class="data-container">
            <!-- Cards flow into columns automatically -->
            <div class="sub-container">
                <div class="img-container">
                    <!-- Natural height images -->
                    <img src="tall-image.jpg">
                </div>
                <div class="content-wrapper">...</div>
            </div>
            <!-- More cards... -->
        </div>
    </div>
</section>

Features

  • CSS columns (4 → 3 → 2 → 1 responsive)
  • Natural image heights (no forced aspect ratio)
  • Cards flow into available space
  • Visual interest from varied heights
  • Best when images have different dimensions

Blog-5: Minimal

Text-focused, clean typography. Best for text-heavy blogs, journals, essays.

Usage
<section class="blog-5">
    <div class="container">
        <div class="data-container">
            <div class="sub-container">
                <!-- No img-container needed -->
                <div class="content-wrapper">
                    <div class="meta">
                        <span class="tag">Essay</span>
                        <span class="date">Dec 10, 2025</span>
                    </div>
                    <h3 class="title"><a href="#">Post Title</a></h3>
                    <p class="description">Full excerpt...</p>
                </div>
            </div>
        </div>
    </div>
</section>

Features

  • No images (hidden via CSS)
  • Max-width 700px for optimal reading
  • Larger typography for readability
  • Separator lines between posts
  • Title is the link (no separate CTA)

Modifiers

Add these classes alongside any blog-N class for additional effects.

Modifier Effect Example
.blog-dark Dark theme with gradient background <section class="blog-1 blog-dark">
.blog-no-images Hide all images (convert any layout to text-only) <section class="blog-2 blog-no-images">
.blog-compact Reduced padding and font sizes <section class="blog-1 blog-compact">

Auto-Styling (No Class Needed)

Blog cards are automatically styled when the system detects blog-specific classes like .blog-card-meta or .blog-card-excerpt.

How It Works

The ANTSAND template system automatically adds .blog-card-* classes when rendering blog data. The CSS uses :has() selector to detect these and apply card styling automatically - no parent class required!

Auto-detected Classes
/* These classes trigger auto-styling */
.data-container:has(.blog-card-meta),
.data-container:has(.blog-card-excerpt) {
    /* Card grid layout applied automatically */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

Creating New Variations

Follow this pattern to add new blog layouts (blog-6, blog-7, etc.).

Template for New Layout
// sass_v2/patterns/_blog.scss

// ============================================
// BLOG-6: Your New Layout Name
// Description of what makes it unique
// ============================================
.blog-6 {
    padding: 80px 0;
    background: #fff;

    > .container,
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;

        > .title {
            // Section title styling
        }
    }

    .data-container {
        // Grid/flex layout for cards
    }

    .sub-container {
        // Individual card styling
    }

    .img-container {
        // Image wrapper styling
    }

    .content-wrapper {
        // Text content styling

        .title { }
        .description { }
        .meta { }
        .cta { }
    }
}

Steps to Add a New Layout

  1. Add SCSS to sass_v2/patterns/_blog.scss
  2. Use universal classes (.container, .sub-container, .title, etc.)
  3. Name it .blog-N following the pattern
  4. Run make master && make sync-css-antsand
  5. Update this documentation
  6. Run make test to verify alignment

Blog Data Structure

The blog system uses these fields from api_blog_data.json.

Field Purpose Rendered As
title Post title .title / .data-h3
media_heading Hero/featured image URL .img-container img
notes Full post content Excerpt in .description
readmorenotes Pre-truncated excerpt .blog-card-excerpt
tags Post tags (JSON array) .blog-card-tag
created_at Publication date .blog-card-date
profile.firstname/lastname Author name .blog-card-author-name

File References

File Purpose
sass_v2/patterns/_blog.scss All blog layout styles (blog-1 through blog-5)
common_section_body_modern.volt Renders blog cards, checks for media_heading
blog_detail_modern.volt Single blog post detail page
api_blog_data.json Blog data source