Email components
Write content in ordinary HTML and use email components only where a client needs table layout, button fallbacks, or required alt text.
Import Email, Section, Columns, Column, Button, Spacer, Divider, Image and Link
from @samva/markup/email.
Write content in ordinary HTML: headings, paragraphs, lists, links, and tables. Components exist only where an email client needs something HTML cannot say on its own:
| Component | Why it exists |
|---|---|
Email | The document shell: <head>, reset styles, dark-mode meta, and the preheader slot |
Section | A full-width band, emitted as a table so Outlook keeps it |
Columns, Column | Side-by-side layout as table cells, stacking on mobile |
Button | A link styled as a button, with an Outlook fallback shape |
Image | Required alt, fixed dimensions, and a dark-mode source |
Spacer, Divider | Vertical rhythm and rules that survive clients that strip margins |
Link | A text link that opens outside the client |
The brand components BrandLogo and BrandFooter come from samva:brand; see
Brands.
- A
Buttonneeds a string label and aheightfor the classic Outlook fallback. Without them the check warns withbutton-outlook-fallback. - Scripts, event handlers, and unsafe URL schemes are rejected. Strings are escaped text, never markup.
- General flex and grid layouts are not converted to email tables. Use
Columnsfor side-by-side content. subjectandpreheaderlive on theemailchannel of the definition.<Email>does not take apreheader.
See Authoring in TSX for a complete template.