Content pillar

콘텐츠 핵심 주제

Branch specific audience questions from a core area of expertise.

···
html
<div class="pillar"><div class="hub">CORE<br>TOPIC</div><div class="spokes"><div>WHY?</div><div>HOW?</div><div>EXAMPLE</div><div>COMPARE</div></div></div>
css
.pillar{width:min(86%,680px);display:flex;align-items:center;gap:clamp(18px,6vmin,70px);font:900 clamp(11px,max(3vmin,1vw),22px) sans-serif}.hub{flex:0 0 30%;aspect-ratio:1;display:grid;place-items:center;text-align:center;background:var(--accent);color:white;border-radius:50%;box-shadow:0 0 0 8px var(--accent-2);z-index:1}.spokes{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,3vmin,28px);position:relative}.spokes:before{content:'';position:absolute;left:-15%;top:50%;width:18%;border-top:3px solid var(--accent)}.spokes div{border:2px solid var(--fg);padding:clamp(6px,2vmin,20px) 2px;text-align:center;background:var(--surface);font-size:clamp(10px,max(2vmin,1vw),16px);animation:branch 4s infinite}.spokes div:nth-child(2){animation-delay:.5s}.spokes div:nth-child(3){animation-delay:1s}.spokes div:nth-child(4){animation-delay:1.5s}@keyframes branch{0%,12%{opacity:.2;transform:translateX(-20px)}35%,85%{opacity:1;transform:none}100%{opacity:.2}}

A content pillar is a central subject a brand can explain consistently. Supporting pieces answer distinct questions while connecting back to that subject.

A broad topic alone creates a loose collection. Define clear boundaries and pathways so readers can move to their next question without repetition.

When to use

Use it when planning a long series or untangling overlapping articles.

Open as page ↗