Newsletter content

뉴스레터 콘텐츠

Sequence each issue so readers can follow it to the end.

···
html
<div class="mail"><div class="subject">ISSUE 08 <span>OPEN</span></div><div class="section">01&nbsp; THE IDEA</div><div class="section">02&nbsp; THE EVIDENCE</div><div class="section">03&nbsp; TRY THIS</div><div class="read"></div></div>
css
.mail{position:relative;width:min(73%,410px);height:clamp(135px,59vmin,300px);background:var(--surface);border:2px solid var(--fg);box-shadow:8px 8px 0 var(--accent-2);padding:clamp(8px,3vmin,24px);font:900 clamp(10px,max(2.2vmin,1vw),17px) sans-serif}.subject{border-bottom:3px solid var(--fg);padding-bottom:clamp(7px,2vmin,15px);display:flex;justify-content:space-between}.subject span{color:var(--accent)}.section{height:23%;border-bottom:1px solid var(--line);display:flex;align-items:center;opacity:.4;animation:reading 4s infinite}.section:nth-child(3){animation-delay:1s}.section:nth-child(4){animation-delay:2s}.read{height:5px;background:var(--accent);width:0;animation:progress 4s infinite}@keyframes reading{0%,10%{opacity:.4}30%,75%{opacity:1}100%{opacity:.4}}@keyframes progress{0%{width:0}80%{width:100%}100%{width:0}}

A newsletter is a recurring editorial product for subscribers. The subject and opening earn attention, while the sections carry one central promise.

A long link collection can fragment the reading path. Give each issue a clear question, a useful answer, and a considered next step.

When to use

Use it to sustain a regular relationship and develop a direct distribution channel.

Open as page ↗