# Blog Frontend Layouts

**Last Updated:** 2026-01-09

Documentation of layouts and structures for each blog page type, including component structure and responsive patterns.

## Overview

This document details the layout structure for each blog page type, including component organization, responsive breakpoints, and structural patterns.

## Layout Structure by Page Type

### 1. Blog Index Layout (`/insights/`)

**Structure**:

```
Header (Site Navigation)
├── Hero Section (if present)
├── Category Filters/Navigation
├── Main Content Area
│   ├── Post Grid/List
│   │   ├── Post Card 1
│   │   ├── Post Card 2
│   │   └── ...
│   └── Pagination
└── Footer
```

**Components**:

- **Post Cards**: 8 post previews per page
- **Pagination**: Page navigation
- **Category Navigation**: Filter tabs/links

**Content Metrics**:

- H1: 1 heading
- H3: 17 headings (post titles)
- Images: 16 images
- Links: 42 links

**Responsive Patterns**:

- Grid layout for post cards
- Responsive column count
- Mobile-friendly navigation

### 2. Category Archive Layout

**Structure** (Same for Lexikon, Ratgeber, Inside Ordio):

```
Header (Site Navigation)
├── Category Header
├── Main Content Area
│   ├── Post Grid/List
│   │   ├── Post Card 1
│   │   ├── Post Card 2
│   │   └── ...
│   └── Pagination
└── Footer
```

**Lexikon Archive**:

- H1: 1 heading
- H3: 22 headings (post titles)
- Images: 0 images
- Links: 73 links

**Ratgeber Archive**:

- H1: 1 heading
- H2: 2 headings
- H3: 37 headings (post titles)
- Images: 37 images
- Links: 76 links

**Inside Ordio Archive**:

- H1: 1 heading
- H3: 6 headings (post titles)
- Images: 0 images
- Links: 14 links

**Components**:

- **Post Cards**: Variable count per category
- **Pagination**: Page navigation
- **Category Header**: Category title and description

### 3. Single Post Layout

**Structure**:

```
Header (Site Navigation)
├── Breadcrumbs (if enabled)
├── Post Header
│   ├── Featured Image
│   ├── Title (H1)
│   ├── Publication Date
│   └── Author (if displayed)
├── Main Content Area
│   ├── Post Content
│   │   ├── H2-H6 headings
│   │   ├── Paragraphs
│   │   ├── Images
│   │   └── Links
│   └── Post Metadata
├── Related Posts Section
│   ├── Related Post 1
│   ├── Related Post 2
│   └── ...
├── Social Sharing (if enabled)
└── Footer
```

**Content Metrics**:

- H1: 1 heading (post title)
- H2: 4 headings
- H3: 4 headings
- Images: 9 images
- Links: 18 links

**Components**:

- **Post Header**: Title, date, featured image
- **Post Content**: Main article content
- **Related Posts**: 14 related post cards
- **Pagination**: Previous/Next post navigation

**Main Content Classes**:

- `max-w-7xl` - Max width container
- `mx-auto` - Centered
- `px-4 sm:px-6` - Responsive padding
- `text-gray` - Text color
- `antialiased` - Font smoothing

## Component Structure

### Post Card Component

**Structure**:

```
Post Card
├── Featured Image
├── Category Badge
├── Title (Link)
├── Excerpt/Preview
├── Publication Date
└── Read More Link
```

**Variations**:

- **Index Page**: Grid layout, multiple cards
- **Category Archive**: Category-specific cards
- **Related Posts**: Smaller card format

### Pagination Component

**Structure**:

```
Pagination
├── Previous Link (if not first page)
├── Page Numbers
│   ├── Page 1
│   ├── Page 2
│   └── ...
└── Next Link (if not last page)
```

### Navigation Component

**Structure**:

```
Navigation
├── Main Navigation (Header)
│   ├── Home Link
│   ├── Blog Link
│   └── Category Links
└── Category Filters (Blog Pages)
    ├── All Posts
    ├── Lexikon
    ├── Ratgeber
    └── Inside Ordio
```

## Responsive Breakpoints

Based on Tailwind CSS classes observed:

- **Mobile**: `px-4` (16px padding)
- **Small**: `sm:px-6` (24px padding at 640px+)
- **Container**: `max-w-7xl` (1280px max width)

**Responsive Patterns**:

- Grid columns adjust by screen size
- Navigation collapses on mobile
- Images scale responsively
- Text sizes adjust for readability

## WordPress Template Hierarchy

**Detected Patterns**:

1. **Index Template**: `index.php` or `home.php`

   - Used for `/insights/`

2. **Category Template**: `category-{slug}.php` or `archive.php`

   - Used for category archives
   - Can be customized per category

3. **Single Post Template**: `single.php` or `single-{post-type}.php`
   - Used for individual posts
   - Can be customized per post type

## Migration Considerations

### Layout Requirements

1. **Index Layout**

   - Post grid/list component
   - Category filters
   - Pagination
   - Responsive design

2. **Category Archive Layout**

   - Reuse index layout with category filter
   - Category-specific header
   - Same post grid component

3. **Single Post Layout**
   - Post header component
   - Content area component
   - Related posts component
   - Navigation components

### Component Reusability

**Reusable Components**:

- Post Card (used across all page types)
- Pagination (used on index and archives)
- Navigation (used site-wide)
- Breadcrumbs (used on single posts)

**Page-Specific Components**:

- Post Header (single posts only)
- Related Posts (single posts only)
- Category Filters (index/archives only)

## Data Files

- **Frontend Structure**: `docs/data/blog-frontend-structure.json`
- **Post Metadata**: `docs/data/blog-posts-metadata.json`

## Related Documentation

- [Frontend Page Types](FRONTEND_PAGE_TYPES.md) - Page type inventory
- [Frontend Components](FRONTEND_COMPONENTS.md) - Component inventory
- [Frontend Navigation](FRONTEND_NAVIGATION.md) - Navigation structure
- [Migration Template Requirements](MIGRATION_TEMPLATE_REQUIREMENTS.md) - Template specifications