Email preview text

이메일 미리보기 문구

Use the line beside the subject to add information the subject leaves out.

···
html
<div class="inbox"><div class="inbox-top"><span>INBOX</span><span>TODAY</span></div><div class="mail"><div class="sender">Atlas Notes <i>9:41</i></div><b>Your weekly board is ready</b><p class="preview duplicate">Your weekly board is ready...</p><p class="preview useful">Three follow-ups need a decision before Friday.</p></div><div class="inbox-note"><span>REPEATS SUBJECT</span><span>ADDS A REASON TO OPEN</span></div></div>
css
.inbox{width:88%;max-width:640px;font-family:sans-serif}.inbox-top,.inbox-note{display:flex;justify-content:space-between;font:900 clamp(10px,1.6vmin,12px) sans-serif;letter-spacing:.08em;color:var(--muted)}.mail{position:relative;box-sizing:border-box;margin:clamp(8px,2vmin,17px) 0;padding:clamp(10px,2.4vmin,22px);height:clamp(110px,25vmin,180px);border:1px solid var(--line);border-left:5px solid var(--accent);background:var(--surface)}.sender{font:800 clamp(11px,2vmin,15px) sans-serif}.sender i{float:right;font-style:normal;color:var(--muted)}.mail b{display:block;margin:.55em 0;font:900 clamp(13px,3vmin,24px)/1.12 sans-serif}.preview{position:absolute;left:clamp(10px,2.4vmin,22px);right:clamp(10px,2.4vmin,22px);bottom:clamp(10px,2.4vmin,22px);margin:0;font:700 clamp(11px,2.2vmin,16px)/1.16 sans-serif;color:var(--muted)}.duplicate{animation:duplicate 5s infinite}.useful{color:var(--fg);animation:useful 5s infinite}.inbox-note span:last-child{color:var(--accent)}@keyframes duplicate{0%,25%{opacity:1}40%,85%{opacity:0}100%{opacity:1}}@keyframes useful{0%,25%{opacity:0}40%,85%{opacity:1}100%{opacity:0}}@media(min-width:700px){body > *{transform:scale(1.4)}.lines p,.branches div,.cards div{cursor:pointer}}@media(min-width:700px){
  .creator-scene small,.creator-scene .meter,
  .journey .track,.journey .panels small,.journey .panels p,
  .disclosure .ad small,.disclosure .labels span,
  .comment-mining .comments span,.comment-mining .extract small,.comment-mining .extract i,
  .inbox .inbox-top,.inbox .inbox-note,.inbox .sender,.inbox .preview,
  .hierarchy small,.hierarchy span,
  .tone .constant,.tone .tone-track,.tone .tone-messages small,.tone .tone-messages p,
  .naming .ylabel,.naming .xlabel,.naming .point,.naming .choice{font-size:12px}
}

Email preview text is the supporting line beside or below a subject in an inbox. Adding a concrete detail or benefit helps readers know what to expect, while repeating the subject wastes the available space.

The demo swaps a duplicate preheader for a complementary one in a fictional inbox row. Display length varies by mail app, so put important words first and keep the promise consistent with the message.

When to use

Draft it alongside the subject line for newsletters and campaign emails.

Open as page ↗