Responsive Email Patterns

A collection of patterns and modules for responsive emails. <a href="http://responsiveemailpatterns.com/">Responsive Email Patterns Website</a>

Based on Brad Frost's 'This is Responsive' <a href="http://bradfrost.github.com/this-is-responsive/patterns.html">Responsive Patterns</a>.

Layout

<ul> <li>Column Drop</li> <li>2 equal-width columns</li> <li>2 equal-width columns V2</li> <li>3 equal-width columns</li> <li>Shrink Wrap</li> <li>Main Column with Sidebar</li> <li>Image Surround</li> <li>Layout Shifter</li> <li>Source Order Shift</li> </ul>

Navigation

<ul> <li>Top Links</li> <li>Stacked Split Links</li> <li>Drop Below</li> <li>Footer Anchor</li> <li>Reduce</li> <li>Reduce 2</li> <li>Hide Everything</li> <li>Stacked Top Links</li> <li>Stacked Top Links 4-Up</li> </ul>

Lists

<ul> <li>List with Thumbnails</li> <li>List with Thumbnails V2</li> <li>List with Thumbnails &amp; Summary Stack</li> <li>List with Thumbnails &amp; Summary Hide</li> </ul>

Grid Blocks

<ul> <li>With Title Sections</li> <li>Double-Wide v1</li> <li>Double-Wide v2</li> <li>Double-Wide v3</li> </ul>

Media

<ul> <li>Basic Fluid Image</li> <li>Image Center Crop</li> <li>Image Vertical Crop</li> <li>Image Right Crop</li> <li>Image Left Crop</li> <li>Description Overlay Bottom</li> <li>Image Grid</li> <li>Fuid Video</li> </ul>

Accordion

<ul> <li>Show More</li> <li>Full to Accordion</li> </ul>