Design Atlas
한국어
▣ Presentation & slides

Section Divider

섹션 디바이더

The transition slide that marks a new chapter in a talk — it has to look clearly different from a content slide, or no one notices the chapter changed.

Also known as: Chapter slideSection break slide
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <p class="hdr" id="hdr"></p>
  <ul class="bl"><li id="b1"></li><li id="b2"></li><li id="b3"></li></ul>
  <div class="divwrap">
    <span class="num">02</span>
    <span class="ttl" id="ttl"></span>
  </div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:8vmin}
.badge{position:absolute;top:4%;right:4%;z-index:3;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:#0f172a;background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.9)}
.hdr{margin:0 0 6% 0;font:700 clamp(11px,2.6vmin,14px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.bl{margin:0;padding-left:1.1em}
.bl li{font:500 clamp(9px,2.2vmin,12px)/1.5 -apple-system,sans-serif;color:var(--muted)}
.divwrap{display:none}
.slide.good{background:linear-gradient(135deg,var(--accent),var(--accent-3));padding:0}
.slide.good .hdr,.slide.good .bl{display:none}
.slide.good .divwrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%}
.slide.good .num{font:900 clamp(20px,7vmin,40px)/1 -apple-system,sans-serif;color:rgba(255,255,255,.55)}
.slide.good .ttl{font:800 clamp(14px,3.8vmin,22px)/1.2 -apple-system,sans-serif;color:#fff}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 구분 안 됨', '✓ 확실한 전환'], hdr: '2부. 시장 분석', b: ['경쟁사 현황', '고객 세그먼트', '가격 전략'], ttl: '시장 분석' },
  en: { badge: ['✕ Looks the same', '✓ Clear break'], hdr: 'Part 2. Market Analysis', b: ['Competitor landscape', 'Customer segments', 'Pricing strategy'], ttl: 'Market Analysis' },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('hdr').textContent = t.hdr; el('ttl').textContent = t.ttl;
  el('b1').textContent = t.b[0]; el('b2').textContent = t.b[1]; el('b3').textContent = t.b[2];
}
render();
setInterval(() => { n++; render(); }, 2200);

Attention keeps dropping in any talk longer than 30 minutes. A section divider signals, visually, "take a breath here, a new topic starts now" — inverting the color scheme or filling the background is what separates it from a content slide.

The demo's ✕ still hangs a bullet list under the header "Part 2. Market Analysis," so it looks just like the content slide before it. The ✓ fills the background solid, leaving only a huge section number and a short title — unmistakably a new chapter.

Checklist: does color or layout alone tell you the chapter changed, does the text stay to a section number plus a short title, are dividers not so frequent that they lose their weight.

When to use

Use one at the start of each chapter when a talk is split into roughly three to five sections.