Head
Defines email metadata and styling configuration. Should be used once per email template to set up the subject line, preview text, fonts, breakpoints, and styles.
<Head
subject="Welcome to Our Service"
preview="Start your journey with us"
breakpoint={480}
fonts={[
{
name: 'Open Sans',
href: 'https://fonts.googleapis.com/css2?family=Open+Sans'
}
]}
/>
Prop | Type | Default | Unit | Description |
---|---|---|---|---|
subject | string | - | - | Email subject line (required) |
preview | string | - | - | Preview text shown in email clients |
breakpoint | string | - | px | Width at which mobile layout triggers |
fonts | {name: string, href: string}[] | - | - | Custom fonts to include in the email |
styles | Styles | - | - | Style definitions (see types below) |
Style Types:
- global: Applied to all components in the email
- component: Applied to specific SailKit components (like 'text', 'button', etc.)
- class: Custom CSS classes that can be referenced by components via their class prop
Example with styles:
<Head
subject="Welcome"
styles={[
{
type: 'global',
value: `font-family="Arial, sans-serif"`
},
{
type: 'component',
component: 'text',
value: `color="#333333"`
},
{
type: 'class',
value: '.header { font-size: 24px; }',
inline: true
}
]}
/>
The Head component must be a direct child of the Html component and should appear before the Body component.