Category 3up with Images

Use Cases:

Use this pattern to drive users to related content by highlighting relevant articles and pull them deeper into a category; Make sure categories or tags are intentional to demonstrate relevance of the page’s subject matter by displaying recent related articles

Guidelines:

Be mindful of placement on the page. Make sure it’s relevant to the user. For best results, ensure that excerpts are set on all posts and articles that are pulled into this pattern. Keep excerpts brief and to the point, 20 words or fewer is ideal. Use clear, relevant terminology for categories and tags. Ensure that posts and articles are not “Uncategorized.” Make sure to add relevant featured images to posts, as these are the images that will appear in this pattern.

Avoid:

For a standard informational page, landing page, and the like, use only one per page. For a more news-focused page, more than one can be used so long as each usage should support a clear, single category or content goal. 

Accessibility:

Add alt text for all images.

Dependencies:

Content managers should be mindful that it contains images and categories.

Compatibility:

This component is supported by Safari 14.1, Chrome 84, Edge 84, Firefox 63, and later versions of these browsers.

Image Dimensions:

The image is pulled directly from each post’s featured image. The pattern automatically resizes the image to 460 × 303px, which is approximately a 3:2 image ratio. This size was chosen so users can download an image directly from PhotoShelter and upload it without needing to resize it. If content managers choose to download images directly from PhotoShelter without resizing/cropping, they should download the “medium” file size rather than the original or full sized image.