# Layout Patterns

25 slide layouts with CSS structures and animation classes.

## Layout Selection by Use Case

| Layout             | Use Case                      | Animation               |
| ------------------ | ----------------------------- | ----------------------- |
| Title Slide        | Opening/first impression      | `animate-fade-up`       |
| Problem Statement  | Establish pain point          | `animate-stagger`       |
| Solution Overview  | Introduce solution            | `animate-scale`         |
| Feature Grid       | Show capabilities (3-6 cards) | `animate-stagger`       |
| Metrics Dashboard  | Display KPIs (3-4 metrics)    | `animate-stagger-scale` |
| Comparison Table   | Compare options               | `animate-fade-up`       |
| Timeline Flow      | Show progression              | `animate-stagger`       |
| Team Grid          | Introduce people              | `animate-stagger`       |
| Quote Testimonial  | Customer endorsement          | `animate-fade-up`       |
| Two Column Split   | Compare/contrast              | `animate-fade-up`       |
| Big Number Hero    | Single powerful metric        | `animate-count`         |
| Product Screenshot | Show product UI               | `animate-scale`         |
| Pricing Cards      | Present tiers                 | `animate-stagger`       |
| CTA Closing        | Drive action                  | `animate-pulse`         |

## CSS Structures

### Title Slide

```css
.slide-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
```

### Two Column Split

```css
.slide-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .slide-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
```

### Feature Grid (3 columns)

```css
.slide-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .slide-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .slide-features {
    grid-template-columns: 1fr;
  }
}
```

### Metrics Dashboard (4 columns)

```css
.slide-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .slide-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .slide-metrics {
    grid-template-columns: 1fr;
  }
}
```

## Component Variants

### Card Styles

| Style        | CSS Class          | Use For              |
| ------------ | ------------------ | -------------------- |
| Icon Left    | `.card-icon-left`  | Features with icons  |
| Accent Bar   | `.card-accent-bar` | Highlighted features |
| Metric Card  | `.card-metric`     | Numbers/stats        |
| Avatar Card  | `.card-avatar`     | Team members         |
| Pricing Card | `.card-pricing`    | Price tiers          |

### Metric Styles

| Style             | Effect                   |
| ----------------- | ------------------------ |
| `gradient-number` | Gradient text on numbers |
| `oversized`       | Extra large (120px+)     |
| `sparkline`       | Small inline chart       |
| `funnel-numbers`  | Conversion stages        |

## Visual Treatments

| Treatment           | When to Use          |
| ------------------- | -------------------- |
| `gradient-glow`     | Title slides, CTAs   |
| `subtle-border`     | Problem statements   |
| `icon-top`          | Feature grids        |
| `screenshot-shadow` | Product screenshots  |
| `popular-highlight` | Pricing (scale 1.05) |
| `bg-overlay`        | Background images    |
| `contrast-pair`     | Before/after         |
| `logo-grayscale`    | Client logos         |

## Search Commands

```bash
# Find layout for specific use
python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout

# Contextual recommendation
python .claude/skills/design-system/scripts/search-slides.py "traction slide" \
  --context --position 4 --total 10
```

## Layout Decision Flow

```
1. What's the slide goal?
   └─> Search layout-logic.csv

2. What emotion should it trigger?
   └─> Search color-logic.csv

3. What's the content type?
   └─> Search typography.csv

4. Should it break pattern?
   └─> Check position (1/3, 2/3) → Use full-bleed
```