`, `<style>`, `<Font>`, and other head elements. Styles generated by `hono/css` and `<Tailwind>` are normalized into this element automatically. ## `<Body>` Outer body wrapper. Accepts all standard `<body>` attributes. ```tsx <Body style={{ backgroundColor: '#f6f9fc' }}> <Text>Hello</Text> </Body> ``` ## `<Preview>` Renders hidden preview text that appears in email client inbox previews. Keep it under 200 characters and place it immediately inside `<Body>`. ```tsx <Html> <Body> <Preview>Your receipt is ready.</Preview> ... </Body> </Html> ```

import { Badge } from '@astrojs/starlight/components' These components establish the core structure of an HTML email. They are imported from `hono-email`: ```tsx import { Html, Head, Body, Preview } from 'hono-email' ``` --- ## `` Root email document wrapper. Accepts all standard `` attributes. ```tsx Hello ``` ## `` Container for ``, `<style>`, `<Font>`, and other head elements. Styles generated by `hono/css` and `<Tailwind>` are normalized into this element automatically. ## `<Body>` Outer body wrapper. Accepts all standard `<body>` attributes. ```tsx <Body style={{ backgroundColor: '#f6f9fc' }}> <Text>Hello</Text> </Body> ``` ## `<Preview>` Renders hidden preview text that appears in email client inbox previews. Keep it under 200 characters and place it immediately inside `<Body>`. ```tsx <Html> <Body> <Preview>Your receipt is ready.</Preview> ... </Body> </Html> ```