Your September invoice is ready — Due on the 30th, payable online.
just nowDue on the 30th, payable online.
<InboxPreview
sender="Acme"
subject="Your September invoice is ready"
preheader="Due on the 30th, payable online."
/>The sender, the subject and the preheader decide whether the email is opened at all, and they are written in a form that gives no idea of how much of them survives. This puts them where they land.
Deliberately our own chrome rather than a replica of Gmail's or Mail's. What transfers between clients is the reading order and where each line is cut; the shade of blue does not, and a replica goes stale the week the client it copies is redesigned.
Both at once, not a toggle
The phone is where the subject runs out — around forty characters, against a desktop row's hundred. A device switch hides exactly the view the author most needs, so both are on screen.
Your September invoice is ready, and so is the yearly summary — Everything you were billed for since January, one line per project, payable online until the 30th.
just nowEverything you were billed for since January, one line per project, payable online until the 30th.
An empty subject reads as a placeholder rather than as a blank row, and an empty preheader simply leaves the room to the client, which fills it with the start of the body.
Copy
Every string is a label, English by default, overridable one key at a time.
Votre facture de septembre est prête — À régler avant le 30, en ligne.
à l'instantÀ régler avant le 30, en ligne.
API
| Prop | Type | Default | |
|---|---|---|---|
sender | string | required | The name a recipient sees, not the address: that is what a list shows. |
subject | string | required | |
className | string | — | |
labels | Partial<InboxPreviewLabels> | — | Copy; English by default, one key per string on screen. |
preheader | string | "" | The grey line that trails the subject. Empty is a real state — the client then fills the room with the start of the body. |
Plus the DOM props of the element it renders. Source: inbox-preview/components/inbox-preview.tsx.