Skip to content
Twentyfirst UIHalo

Email Preview

Admin · EmailPreview

How a mail will look in the inbox and when opened, on desktop and phone.

Props: fromName, from, subject, preheader, html (rendered in a sandboxed iframe, no scripts) or children, device / onDevice ("desktop" | "mobile"), checks ({status, label}).

  • The body sits on paper and stays white in dark mode, like most mail clients.
N
NorthwindYour order is on its way — Delivery starts within the hour
Links workUnsubscribe linkSubject is 46 characters, may cut on phones

Props

EmailPreview

PropTypeNotes
from?string
fromName?string
subject?string
preheader?string
html?string
children?ReactNode
device?"desktop" | "mobile"
onDevice?(d: string) => void
checks?{ status: Status; label: ReactNode }[]
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.