Ashley & Co
Product Pricing and Links
three column Light Image CTA
Three-Column Components
Discover three-column layouts from top brands. Perfect for newsletters, promotional emails, and transactional messages.
2 components
Browse by
Three-Column Email Design Guide
Three-column layouts allow you to showcase multiple products, features, or content pieces side by side, maximizing the use of horizontal space on desktop while maintaining mobile compatibility through responsive stacking.
Essential Elements
- Balanced content: Equal visual weight across all three columns
- Consistent spacing: Uniform gutters between columns for harmony
- Responsive stacking: Graceful collapse to single column on mobile
- Clear hierarchy: Each column has a distinct focus or offering
Design Considerations
Mobile Optimization
Three-column layouts must adapt for smaller screens:
- Stack columns vertically on mobile (3 columns become 1)
- Reorder content if priority differs on mobile
- Maintain adequate spacing between stacked items
- Ensure images and CTAs remain prominent when stacked
Content Balance
Your three-column email should present information evenly:
- Keep similar content lengths across columns
- Use consistent image aspect ratios
- Align CTAs at the same vertical position
- Maintain equal visual weight in each column
Three-Column Types
Browse the components above to see different approaches:
- Product showcases: Display three products with images and pricing
- Feature highlights: Present three key benefits or features
- Content teasers: Three article or blog post previews
- Category navigation: Guide users to three main sections
- Social proof: Showcase three testimonials or reviews
Implementation Tips
- Use table-based layouts: Most reliable across email clients
- Set column widths: Typically 180-200px per column in 600px email
- Include responsive breakpoints: Stack at around 480px viewport
- Test in Outlook: Desktop Outlook can be tricky with multi-column
- Keep content concise: Limited horizontal space requires brevity
Frequently Asked Questions
What is a three column email layout?
A three column 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 three column 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 three column layouts responsive?
Yes, all three column 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 three column layouts with other patterns to create unique, engaging email experiences.