---
title: Two Cols Header
description: Two columns with spanning header
---

# Two Cols Header Layout

Two columns with a header that spans both columns.

## Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `logo` | boolean | `true` | Show/hide logo |
| `textAlignment` | string | `'center'` | Content vertical alignment (`'top'`, `'center'`, `'bottom'`) |
| `ratio` | string | `'50%'` | Width of the left column (e.g., `'70%'` gives 70% left, 30% right) |

## Slots

| Slot | Description |
|------|-------------|
| default | Header content (spans full width, above columns) |
| `left` | Left column content |
| `right` | Right column content |
| `top` | Left-aligned text above both columns (below header) |
| `top-center` | Center-aligned text above both columns (below header) |
| `bottom` | Left-aligned text below both columns |
| `bottom-center` | Center-aligned text below both columns |

## Basic Example

```markdown
---
layout: two-cols-header
---

# Deployment Comparison

::left::

## Manual Process
- SSH into servers
- Copy files manually
- Restart services
- Hope for the best
- Rollback is hard

::right::

## Automated CI/CD
- Git push triggers pipeline
- Automated tests
- Container builds
- Zero-downtime deploy
- Easy rollback
```

## Custom Ratio Example

```markdown
---
layout: two-cols-header
ratio: "30%"
---

# Sidebar Layout

::left::

## Navigation
- Item 1
- Item 2

::right::

## Main Content (70%)

The right column gets the remaining space.
```