MDC Templates

Thumbnail Grid

The images below are all based on a 2x3 aspect ratio. An image's width is relative to the widest point of the containing .column when the browser is reduced to a mobile view. For instance, an image can appear to be 400px wide while on the desktop view, however, if that same image, will eventually scale to 620px when on a mobile display, it's recommended to use an image that has a default width of 620px. The same principle stands for images that are 780px.

Copy

<figure class="thumbnail" aria-label="Figure 3 label">
    <a href="#">
        <img src="http://placehold.it/400x267" alt="">
        <figcaption class="caption">
            <h3 class="content-title">3rd Link Figure</h3>
            <p>Integer sagittis eros ut dolor rhoncus, in dignissim turpis feugiat. Donec sodales sapien a urna venenatis pretium.</p>
        </figcaption>
    </a>
</figure>