Content patterns

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:

  1. Main titles
  2. Subtitles
  3. Paragraphs
  4. Subtext
  5. Actions
  6. Large images
  7. Small images

You’ve probably already found something you disgaree with, so here are some notes:

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.

Text only

Example alternatives

Large image last

Example alternatives

Large image in the middle

Example alternatives

Large image first

Example alternatives

Small image first

Example alternatives

Small image last

Example alternatives

Action

Example alternatives

Action with image last

Example alternatives

Action with image in the middle

Example alternatives

Action with image first

Example alternatives

Header and footer patterns → ← Layout patterns Back to the table of contents