Adidas
App Discovery Section
header LightMuted Image CTA
Email Header Components
Discover header layouts from top brands. Perfect for newsletters, promotional emails, and transactional messages.
33 components
Browse by
Email Header Design Guide
The email header is the first thing subscribers see when they open your message. A well-designed header establishes brand identity, provides navigation, and sets the tone for the rest of the email.
Essential Elements
- Logo placement: Typically left-aligned or centered for brand recognition
- Navigation links: Quick access to key sections (web-view preferred)
- Preheader text: Supporting text that appears after the subject line
- Social links: Optional connections to social media profiles
Design Considerations
Mobile Optimization
Headers must be responsive and readable on small screens. Consider:
- Larger tap targets for mobile (44x44px minimum)
- Simplified navigation for smaller viewports
- Logo sizing that works across devices
Brand Consistency
Your email header should align with your website and app:
- Use consistent logos and brand colors
- Match typography styles when possible
- Maintain visual hierarchy from other channels
Header Layouts
Browse the components above to see different header approaches:
- Simple branding: Logo only, minimal distraction
- Navigation headers: Include key links for easy browsing
- Promotional headers: Feature announcements or offers
- Utility headers: Transaction-focused, clear and functional
Implementation Tips
- Keep it light: Headers should be ~100-150px tall on desktop
- Use web-safe fonts: Fallbacks ensure consistent rendering
- Include alt text: For logo images, always provide descriptive alt text
- Test thoroughly: Verify rendering in dark mode and across email clients
Frequently Asked Questions
What is a header email layout?
A header layout is a structured email design pattern commonly used for organizing content in email marketing. These components provide tested, responsive structures that work across all major email clients.
How do I copy these header components to Figma?
Simply click the "Copy Figma Component" button on any component card, then paste it into your Figma file using Cmd+V (Mac) or Ctrl+V (Windows). The component will be ready to customize immediately.
Are header layouts responsive?
Yes, all header layouts are fully responsive and optimized for desktop, tablet, and mobile email clients including Gmail, Outlook, and Apple Mail.
Can I mix different layout types in one email?
Absolutely! You can combine multiple layout types within a single email design. Mix header layouts with other patterns to create unique, engaging email experiences.