|
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 Hide
List items start out as a single column with a thumbnail on the left and description on the right, at a specified breakpoint the description text is hidden leaving only the title and cta. The thumbnail images also scale down as the screen size shrinks.
<style>
/* List with Thumbnails & Summary Hide Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] img,
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"] .col p { display: none; }
}
</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 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 id="description" 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 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 id="description" 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 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 id="description" 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>
