Foundation
Discover the world of Foundation for Emails
Learn more about how to use Foundation for Emails, or dive right in and start coding emails responsively.
Responsive Grid For Any Layout
Do more with a grid designed to work on any device.
A flexible responsive grid
Foundation for Emails uses a 12-column grid for maximum divisibility — you can divide the grid into one, two, three or four columns.
More layout control
Create evenly sized blocks of content great for image galleries or product lists. You choose how many block in a row and the Block Grid fits them; on smaller screens the blocks stack.
Works great on mobile devices
Your layouts stack neatly so your content is accessible on small screens. Things like padding and row width automatically scale to fit on mobile.
Outlook First, Works in Any Clients
Reach your users in all major email clients and devices
Responsive images including retina
Foundation for Emails has a reset on all images to ensure that their max-width never exceeds 100% (aka responsive images).
No more inconsistent results
There’s no need to worry about inconsistent spacing and odd rendering issues with your layouts. Foundation for Emails gives you the guidelines so you can be confident that emails look as expected in testing.
Full width content
Sometimes you’ll want to a full-width row good for your headers, footers, and more. Foundation for Emails helps you accomplish this easily on any device including Outlook with options to center align content.
UI Patterns to Help You Build Faster
We included common patterns you'll need to build your emails more efficiently.
Buttons
Sounds simple enough, but emails buttons typically have poor touch targets. Foundation for Emails comes with big buttons that can be easily clicked or tapped.
Panels
Create nice callouts or header/footer sections with panels.
Sub-grid
Great for headers, social sharing and much more. The Sub-grid helps you create horizontal sections in row that do not stack.
Responsive Inliner
Inline All the Things
Media queries are preserved
Our inliner is customized to work in responsive design. Since some email clients strip the CSS in the head, the media queries are moved into the body for you.
HTML attributes are inserted for you
There’s no need to remember to all the HTML attributes needed to create consistent HTML email layouts.
Inlines only what you need
The Foundation for emails inliner can inline your needed CSS while not messing with other important content like special characters and handlebars.
Templates are a Great Starting Place
No matter what you're building these templates help you get started.
Transactional emails for apps
Deliver a branded, consistent experience across every customer communication.
E-commerce
Craft emails that feature your products or services that get into your customer's email inbox.
Newsletters that get opened
Make sure your message is recieved no matter the device or email client.
