|
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>
