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'
    }
  ]}
/>
PropTypeDefaultUnitDescription
subjectstring--Email subject line (required)
previewstring--Preview text shown in email clients
breakpointstring-pxWidth at which mobile layout triggers
fonts{name: string, href: string}[]--Custom fonts to include in the email
stylesStyles--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.