# Component Snippets — copy, paste, replace content

All classes come from `assets/base.css`. Tones: green/blue/purple/pink/orange/yellow/teal.
`ASSETS` below = `~/.codex/skills/friendly-infographic-style/assets`
(use a relative path like `../assets/` when the HTML lives in `templates/`).

## Page skeleton

```html
<!doctype html><html lang="ja"><head><meta charset="utf-8">
<link rel="stylesheet" href="ASSETS/base.css">
<style>
  .canvas { display:flex; flex-direction:column; }
  .grid { flex:1; min-height:0; grid-template-rows: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .rowtile { display:flex; align-items:center; gap:10px; background:#FFFEFA;
             border:2.5px solid var(--line); border-radius:14px; padding:7px 12px; }
  /* per-piece size tuning goes here */
</style></head><body><div class="canvas"> ... </div></body></html>
```

## Card shell (every card looks like this)

```html
<section class="card tone-blue c3">
  <div class="card-head"><span class="num">1</span><h2>見出し</h2>
    <svg class="spark" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2 Q13.5 10.5 22 12 Q13.5 13.5 12 22 Q10.5 13.5 2 12 Q10.5 10.5 12 2 Z" fill="#F5C84C"/></svg>
  </div>
  <p class="lead">一言の説明。<b>強調</b>を1つ。</p>
  <!-- 1–2 rich components, usually with class="grow" -->
  <div class="callout mt-auto"><span class="ico">💡</span><span>締めの<b>ひとこと</b></span></div>
</section>
```

## Lists

```html
<!-- checks (✓ / ✕ / ★) -->
<ul class="checks grow" style="justify-content: space-evenly;">
  <li class="chk"><span><b>要点:</b>説明テキスト</span></li>
  <li class="chk ng"><span>ダメな例</span></li>
  <li class="chk star"><span>おすすめ</span></li>
</ul>

<!-- two-line rowtile (the default list row; one-liners look thin) -->
<div class="rowtile"><span class="ticon bg-blue" style="width:50px;height:50px;flex:0 0 50px;font-size:26px;border-radius:14px;display:grid;place-items:center;">🚰</span>
  <div><b style="font-size:19px;">見出し行</b><br>
  <small style="font-size:15px;color:var(--ink-soft);">補足の一行</small></div></div>

<!-- chk + rowtile combo (bordered check rows) -->
<div class="chk rowtile" style="border-color:#9FC5E8;"><span>本文<br><small style="font-size:15px;">補足</small></span></div>
```

## Icon tiles

```html
<div class="tiles x3 grow">  <!-- x2 / x3 / x4 -->
  <div class="tile"><span class="ticon bg-pink">🎯</span><b>目的</b><small>何を決めたいか</small></div>
  ...
</div>
<!-- horizontal variant: <div class="tile row"> icon left, text right -->
```

## Table

```html
<table class="tbl head-green grow">  <!-- header tone: head-blue/-orange/-teal/-pink -->
  <tr><th>列1</th><th>列2</th></tr>
  <tr><td><span class="pill teal">Haiku</span></td><td>説明<br><small>補足</small></td></tr>
</table>
```

## Flow (horizontal steps + dashed connector)

```html
<div class="flow grow" style="position:relative; align-items:center;">
  <div style="position:absolute; left:6%; right:6%; top:84px; border-top:3px dashed #97D0C3;"></div>
  <div class="fstep" style="z-index:1;">
    <span class="fstage" style="background:var(--teal);">STEP 1</span>
    <span class="ficon bg-teal" style="width:82px;height:82px;font-size:40px;">📝</span>
    <b>たたき台</b><small>まず出してみる</small>
  </div>
  <div class="farrow">→</div>
  <!-- repeat fstep/farrow -->
</div>
<!-- vertical variant: rowtiles + a "↓" div between (see dense-mosaic.html §4) -->
```

## Duo (NG vs OK)

```html
<div class="duo grow">
  <div class="duo-col bad" style="justify-content:space-evenly;">
    <div class="duo-head">✕ 弱い依頼</div>
    <div class="chk ng"><span>いい感じにまとめて</span></div>
  </div>
  <div class="duo-col good" style="justify-content:space-evenly;">
    <div class="duo-head">✓ 強い依頼</div>
    <div class="chk"><span>読者は<b>初心者</b>と決める</span></div>
  </div>
</div>
```

## Donut + legend

```html
<div class="donut-wrap grow">
  <div class="donut" style="--ring: conic-gradient(var(--green) 0 40%, var(--orange) 40% 70%, var(--blue) 70% 90%, var(--purple) 90% 100%); width:180px; height:180px; flex-basis:180px;">
    <span class="donut-label">効く順</span>
  </div>
  <ul class="legend" style="margin:0;padding:0;">
    <li><span class="sw" style="background:var(--green);"></span>目的の明確化<span class="pct">40%</span></li>
  </ul>
</div>
```

## Callout / ribbon / bubble / kv

```html
<div class="callout"><span class="ico">⭐</span><span>基本方針:<b>要点</b></span></div>
<div class="callout pink solid">…</div>  <!-- tones: green/pink/blue; solid = no dash -->
<div class="ribbon orange">常用しない。難所にだけ切る。</div>
<div class="bubble">セリフ風テキスト</div>  <!-- .left/.right = tail position -->
<div class="kv"><span class="k">📑 ラベル</span><span>説明テキスト</span></div>
```

## Score / threshold pair

```html
<div class="row">
  <div class="callout blue solid grow center" style="display:block;">合計<b>8点以上</b><br>候補</div>
  <div class="callout pink solid grow center" style="display:block;">合計<b>12点以上</b><br>推奨</div>
</div>
```

## Hero step band (low-density workhorse — hero-poster.html §1)

```html
<div class="rowtile" style="gap:22px; padding:12px 20px; border-color:#9FC5E8; background:var(--blue-pale);">
  <span class="ficon bg-blue" style="width:104px;height:104px;font-size:52px;flex:0 0 104px;border-radius:999px;display:grid;place-items:center;border:4px solid #fff;box-shadow:var(--shadow);">💧</span>
  <div class="grow">
    <div style="font-size:30px;font-weight:900;"><span class="pill" style="font-size:16px;vertical-align:6px;margin-right:8px;">STEP 1</span>水を1杯のむ</div>
    <div style="font-size:18px;font-weight:700;color:var(--ink-soft);margin-top:3px;">説明の一行</div>
    <span class="pill ghost" style="font-size:14.5px;margin-top:7px;display:inline-block;">🛏️ 小さなコツ</span>
  </div>
  <img src="ASSETS/characters/chick.svg" style="width:76px;flex:0 0 76px;align-self:flex-end;">
  <div style="font-size:62px;font-weight:900;color:rgba(91,155,213,0.35);">1</div>
</div>
```

## Characters

```html
<img class="char" src="ASSETS/characters/shiba-cheer.svg" style="width:150px;">
<img class="char char-peek" src="ASSETS/characters/cat-peek.svg" style="width:116px; right:16px;">  <!-- inside a card -->
<!-- header: <img class="char char-left" ...>  banner: align-self:flex-end; margin-bottom:-8px -->
```

## Boxless-zone grammar (see templates/zoned-poster.html)

```html
<!-- zone: color wash + dashed outline (REQUIRED: unoutlined washes merge into one
     giant flat blob for the density audit). data-zone feeds the layout gate. -->
<section class="zone outlined" data-zone="journey" style="background: var(--yellow-pale);">
  <h2 class="tab" style="background: var(--teal);">🚏 セクション名</h2>
  ...
</section>
<style>
  .zone { position: relative; border-radius: 38px; padding: 24px 28px; }
  .zone.outlined { border: 3px dashed rgba(107,74,47,0.28); }
  h2.tab { display:inline-block; margin:0 0 12px; padding:7px 26px; font-size:36px;
           font-weight:900; color:#fff; border-radius:16px 16px 16px 5px;
           box-shadow:var(--shadow); }  /* keep tab ribbons upright — a tilt hurts JP legibility */
</style>

<!-- journey station: circle + flag number + text + bubble + watermark numeral -->
<div class="station">
  <span class="st-circle bg-blue"><span class="st-flag" style="background:var(--blue);">1</span>📍</span>
  <div class="grow">
    <div class="st-title">見出し</div>
    <div class="st-desc">2行の説明<br>2行目</div>
    <span class="pill ghost">🛋️ コツ</span>
  </div>
  <div class="bubble">ひとこと補足</div>
  <div class="st-num" style="color: rgba(91,155,213,0.30);">1</div>
</div>
<!-- dashed path behind stations: absolute SVG, stroke-dasharray="2 14" -->

<!-- left-aligned editorial header -->
<header class="head2"><div class="tbar"></div>
  <div style="flex:1;"><h1>タイトル</h1><div class="sub">サブ</div>
    <div class="tagrow"><span class="pill teal">📚 タグ</span></div></div>
  <div><!-- character cluster --></div>
</header>

<!-- paw-print trail (footer filler) -->
<svg width="84" height="70" viewBox="0 0 90 70"><g fill="#B99A73" opacity="0.6"><ellipse cx="14" cy="16" rx="7" ry="5.5"/><circle cx="7" cy="7" r="2.6"/><circle cx="14" cy="4.5" r="2.6"/><circle cx="21" cy="7" r="2.6"/><ellipse cx="52" cy="40" rx="7" ry="5.5"/><circle cx="45" cy="31" r="2.6"/><circle cx="52" cy="28.5" r="2.6"/><circle cx="59" cy="31" r="2.6"/><ellipse cx="24" cy="60" rx="7" ry="5.5"/><circle cx="17" cy="51" r="2.6"/><circle cx="24" cy="48.5" r="2.6"/><circle cx="31" cy="51" r="2.6"/></g></svg>
```

## Decorations (inline SVG)

```html
<!-- 4-point sparkle: colors #F5C84C #F2A65A #E8737F #9B7EDE #55B4A0 -->
<svg class="spark" width="26" height="26" viewBox="0 0 24 24"><path d="M12 2 Q13.5 10.5 22 12 Q13.5 13.5 12 22 Q10.5 13.5 2 12 Q10.5 10.5 12 2 Z" fill="#F5C84C"/></svg>
<!-- heart -->
<svg width="26" height="24" viewBox="0 0 24 22"><path d="M12 4 c-3.5 -5 -11 -1 -8 5 l8 9 8 -9 c3 -6 -4.5 -10 -8 -5 Z" fill="#F2A0A8"/></svg>
<!-- squiggle line (amber; green: #A8CE96) -->
<svg width="130" height="13" viewBox="0 0 130 13"><path d="M4 8 q9 -6 18 0 t18 0 t18 0 t18 0 t18 0 t18 0" stroke="#E8B04B" stroke-width="4" fill="none" stroke-linecap="round"/></svg>
<!-- watermark numeral (inside tinted band tiles) -->
<div style="font-size:62px;font-weight:900;color:rgba(91,155,213,0.35);">1</div>
```
Position decorations with `style="position:absolute; left:…; top:…"` inside the
header/banner (both are `position:relative`).
