Context

Title of Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.

Read More »
Title of Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.

Read More »
Title of Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.

Read More »

List With Thumbnails & Summary Stack

List items start out as a single column with a thumbnail on the left and description on the right, at a specified breakpoint the summary stacks below the thumbnail. The thumbnail images also scale down as the screen size shrinks.

            
                        <style>
	/* List with Thumbnails & Summary Stacked Pattern CSS */
	@media only screen and (max-width: 599px) {
        td[class="pattern"] table { width: 100%; }
        td[class="pattern"] img {
            width: 100%;
            height: auto !important;
        }
        td[class="pattern"] .col td {
            width: 70%;
            padding-right: 0 !important;
        }
        td[class="pattern"] .col td:first-child {
            width: 30%;
        }
	}
    @media only screen and (max-width: 450px) {
        td[class="pattern"] img { width: 160px; margin: 0 auto; }
        td[class="pattern"] .col td,
        td[class="pattern"] .col td:first-child {
            width: 100%;
            display: block;
            text-align: center;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        td[class="pattern"] td.description {
            padding: 10px 18px 20px 18px !important;
        }
        td[class="pattern"] td.description strong {
            font-size: 20px;
        }
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="pattern" width="600">
            <table cellpadding="0" cellspacing="0">
                <tr class="row">
                    <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="left" valign="top">
                                    <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
                                </td>
                                <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
                                    <strong style="line-height: 30px !important;">Title of Content</strong>
                                    <p style="padding-bottom: 10px; font-size: 14px;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
                                    </p>
                                    <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr class="row">
                    <td class="col" valign="top" width="600" style="padding-bottom: 20px;">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="left" valign="top">
                                    <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
                                </td>
                                <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
                                    <strong style="line-height: 30px !important;">Title of Content</strong>
                                    <p style="padding-bottom: 10px; font-size: 14px;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
                                    </p>
                                    <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr class="row">
                    <td class="col" valign="top" width="600">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="left" valign="top">
                                    <img src="http://placehold.it/160x160/333333&text=Thumbnail" alt="" style="display: block; border: 0;" />
                                </td>
                                <td class="description" align="left" valign="middle" style="font-family: arial,sans-serif; font-size: 16px; color: #333; padding: 0 16px;">
                                    <strong style="line-height: 30px !important;">Title of Content</strong>
                                    <p style="padding-bottom: 10px; font-size: 14px;">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at nibh nulla, sed vestibulum mauris. Maecenas et justo et massa adipiscing pretium. Aliquam erat volutpat.
                                    </p>
                                    <a href="#" style="display: block; text-decoration: none; font-weight: bold;">Read More »</a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>