This chapter is concerned with the patterns you can use for the content inside a container. This is regardless of where that container is on the page, or how it is laid out/aligned relative to other containers.
Inside any given container there are really only seven types of content you need to consider:
- Main titles
- Large images
- Small images
You’ve probably already found something you disgaree with, so here are some notes:
- Of course, designers regularly use more than two title sizes, but I rarely see more than a main title and a subtitle in any given container. If they are in use, they’re often part of the body text. Speaking of which…
- Paragraphs include all body text for the purposes of these patterns. The examples below use a small amount of text, but these patterns work for longer multi-paragraph blocks as well.
- I use the term “subtext” to mean any meta-data, category label, or caption. These are often found on websites above titles, below images, or to categories containers.
- Actions include single buttons, form fields, or anything that the user interacts with. Note that a common pattern is a button with supplementary text immediately above or below it. The patterns below show a simple button, but it represents all of these possibilities.
- I’ve split images into large and small because the two are often used for a different purpose. Large images are most often used as a point of focus—for example a screenshot of an app that the user is meant to look closely at. Smaller images are often used to add flavour or meaning instead. An example of this is illustrations or large icons that are part of a theme but aren’t the centre of attention.
- I use the word “image” but this also includes content like code blocks or other points of interest. These elements might also be interactive, for example when you can see code samples in more one programming language by clicking a button, or move left and right through testimonials. A term like “self-contained media” felt a bit too complicated.
I’ve grouped the patterns below based on the main focus or purpose of the pattern. If you use a large image as the main element, for example, different options open up compared to content without a large image. In most groups there is more than one pattern. This is because depending on where that main element is, other elements shift around to support it better.
In each group the first image shows the pattern will all relevant elements included. As the designer is up to you to take out unnecessary elements from a pattern depending on your needs. I’ve also included examples where elements have been taken out to show you the variety possible.
Finally, note that while these examples are mostly left-aligned, alignment is up to you as a designer. Many of them work centred or right-aligned as well.
Large image last
Large image in the middle
Large image first
Small image first
Small image last
Action with image last
Action with image in the middle
Action with image first
Header and footer patterns →
← Layout patterns
Back to the table of contents