Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<table class="snippet-image-navigation">
<tbody>
<tr class="uthsc-ouc-instructions"><th colspan="2">Image Navigation Directions [do not delete]</th></tr>
<tr class="uthsc-ouc-instructions">
<td colspan="2">Useful for a secondary navigation on the page. Allows for a "showcase" image, and then 4 or 6 smaller images that can be used for navigation purposes.</td>
</tr>
<tr>
<td class="uthsc-ouc-instructions">How many navigation items do you want? 4 or 6. (Default is 4.)</td>
<td>4</td>
</tr>
<tr>
<td class="uthsc-ouc-instructions">Showcase image. The image to be shown to the right of the navigation, and will only be shown on the large (desktop) version. For best results, the width of the showcase image should be 455 to 465 pixels and the height should be 215 pixels.</td>
<td><img src="http://placekitten.com/460/215" alt="" /></td>
</tr>
<tr class="uthsc-ouc-instructions">
<td colspan="2">For best results, the width of the navigation images should be 290 to 300 pixels and the height should be 120 pixels. BE SURE THE NAVIGATION TEXT ARE ONLY ONE OR TWO WORDS!</td>
</tr>
<tr class="uthsc-ouc-instructions">
<td>Image</td>
<td>Text with the link</td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">This is too long</a></td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">Perfect</a></td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">Services</a></td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">Resources</a></td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">Documents</a></td>
</tr>
<tr>
<td><img src="http://placekitten.com/290/120" alt="" /></td>
<td><a href="#">Students</a></td>
</tr>
</tbody>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment