Patterns

Website Patterns

Here are some ways to block out a page.

Image + Content

And a subheading

For this one, we need a Heading 2 and can optionally have slightly larger text for the 1st short paragraph under it.

The image can be or the left or right, doesn’t matter. Alternate it.

Just a bit of plain text

Blah blah. Just a normal subheading followed by some paragraph text. You can add a light background to the container to alternate it a bit if you like as well.

The classic 3 column layout

It’s amazing how well this works. 3 is the magic number if you can make 3 points about something!

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Info Box

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

The classic 3 column layout

It’s amazing how well this works. 3 is the magic number if you can make 3 points about something!

Thing

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Thing

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Thing

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Etc

This is a cover block

It can be good for a callout in the middle of the page. Breaks things up a bit.

Subheading

With a subtext here and a kind of a list beside. It doesn’t need to be 4 things, as long as it’s an even number.

Thing 1

Paragraph of text. Two or three sentences, maybe. That’s about it.

Thing 2

Paragraph of text. Two or three sentences, maybe. That’s about it.

Thing 3

Paragraph of text. Two or three sentences, maybe. That’s about it.

Thing 4

Paragraph of text. Two or three sentences, maybe. That’s about it.

Make this choice

Use this if you have a before/after, or are looking to contrast 2 options.

Background colour or background images work well here.

Or make this choice

Why?

What people say

A few words

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
– Fred

A short excerpt

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
– Wilma

A bit

Click here to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
– Someone

Scroll to Top