A closeup of a bee collecting nectar from an orange flower
​ Photo by Ray Hennessy. Unsplash.
Showcase pages

Key links

Aute Lorem veniam nulla amet

Nulla laborum voluptate ex do magna nisi et excepteur.

Aute Lorem veniam nulla amet

Nulla laborum voluptate ex do magna nisi et excepteur.

Aute Lorem veniam nulla amet

Nulla laborum voluptate ex do magna nisi et excepteur.

Aute Lorem veniam nulla amet

Nulla laborum voluptate ex do magna nisi et excepteur.

Showcase pages

Showcase pages use mainly images to highlight a range of promotional material. They typically have relatively little text, and link to other pages to provide more detail.

This page lists different types of blocks possible on showcase pages in different combinations. It isn't a representative example of an actual showcase page, which typically would be quite short.


Find out more in our digital guidelines

Content panel with side menu. Up to 10 items in the menu.

The idea for these text content panels is to give some background to the story you're trying to tell with the showcase page.

The text could reflect the image panel below, or it could be about some separate thing.

The main thing is to communicate an overall story to users as they scroll down the page.

Featured primary link
man with hat and brightly coloured flowers against a yellow background

Call-to-action heading

Call-to-action standfirst

Call-to-action

This is a text panel with an optional lighter button.

You may find sometimes that the darker primary button is visually too strong.

Lighter button
legs standing on a tennis court

A heading for your panel

Editorial panels are really useful ways of providing some imagery along with text.

The main focus in an editorial panel is the text.

However the image you use can add real visual weight and interest to the panel.

Try to use images which don't necessarily have a very strong subject. Something slightly abstract is a great choice.

Text panel heading

A side menu in a text panel doesn't need a heading.


woman with hair blowing in the wind, carrying a yellow bag over her right shoulder

A heading for your text

Editorial panels can have the text left or right aligned. The text box can be blue, gold, or grey.

Aliquip tempor Lorem ipsum exercitation occaecat exercitation est. Reprehenderit irure nostrud aliquip fugiat culpa quis nulla. Non officia labore esse elit mollit veniam id est fugiat culpa nostrud eu elit officia. Nostrud exercitation cillum culpa dolor id aliqua amet culpa consequat aute magna occaecat nisi sint aute consequat consectetur.

Velit fugiat tempor labore reprehenderit officia irure veniam sint. Mollit adipisicing proident tempor sunt cillum commodo ex duis incididunt ullamco sit ut aute velit labore consequat.

Text panel heading

But in this case the side menu does have a heading.

Featured link
woman leaning on a book, looking off-camera

A heading for your text

Editorial panels can have different overlay colours. In this example the overlay is grey.

They can also be positioned left or right. In this example it's ro the right, because the main focus of the image is to the left.

Featured links

man standing in front of a block of flats

A featured link

Featured links are intended to promote links to other content in a prominent and visually arresting way.
woman standing in front of a block of flats

Another featured link

Try to keep your text both descriptive and to the point. People want a quick summary.

An image panel

Standard image panels let you display an optional 'topic block'. In this case it doesn't link to anything, it just provides some context.

woman smiling with eyes shut

Story heading

More information about this story

Highlighted links

band playing under multicoloured lights

A featured link

Featured links provide a nice visual way for linking to other resources.
brightly coloured straws

A second featured link

You should only use images if you have some really impressive images to show off.
a drawer full of pencils

A third featured link

Don't just fill these panels out with boring or unimaginative images because you feel you need an image.
a pile of logs in front of snow covered trees

A fourth featured link

The images should add something to the page as a whole, and make the user curious.
a woman staring down and off-camera, in front of a brick wall

A fifth featured link

Use images consistently to provide an overall 'feel' for the panel.
legs standing on the sideline of a tennis court

A sixth featured link

Please try to stick to our brand, and always think about your intended audience.

Image panel

A topic block in an image panel can appear on the right to make sure it doesn't block out an important part of the image.

a hillside of trees in the mist

Story heading

More information about the story

Highlighted links

First multiple link

You can choose to have a 'multiple link' block.

Second multiple link

These let you have featured links but without forcing you to use an image.

Third multiple link

Much of the time your users will just want a nice simple list of key links.

Fourth multiple link

Not using poor images is far better than using poor images.

Fifth multiple link

You can have lots of links like this in a grid. Again think about your users and how much information they might want to process in one go.

Sixth multiple link

So keep the number to a sensible limit, such as 8.

Featured story

woman in front of a block of flats

Story with no topic block

Description of the story

Highlighted links

Link heading

Four titles

In a row

Have more impact

Featured story

sea on sand

A left-aligned title

This panel has some optional links below it

This is a link This is a second link This is a third link This is a fourth link

Quotation

Qui nulla aliquip officia pariatur esse id et aute officia in esse adipisicing est ea duis labore pariatur.

Videos

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.

Social media quote

Quotation

smiling man

Qui nulla aliquip officia pariatur esse id et aute officia in esse adipisicing est ea duis labore pariatur.

Dolor non ipsum laboris

Aute commodo sunt laboris elit voluptate consequat proident sint nisi voluptate ea aliquip nulla excepteur exercitation ex.
man in front of a block of flats

Story heading

Story standfirst

Social media quote

Featured news

pile of logs

Featured story heading

Nulla commodo occaecat

Read more
man in front of block of flats

Featured story heading

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate.

Read more
woman in front of brick wall

Featured story heading

Nulla commodo occaecat.

Read more
bee on orange flowers

Featured story heading

Nulla commodo occaecat.

Read more
woman with yellow bag

Featured story heading

Nulla commodo occaecat.

Read more

Social media quote

Featured stories

legs standing on a tennis court

Story heading

Story standfirst

woman in front of a block of flats

Story heading

Story standfirst

Impact statement

Enim ex dolor ea sunt nostrud mollit cupidatat nostrud fugiat excepteur qui consectetur minim consectetur fugiat ullamco veniam.

Highlighted links

Heading

Heading

Heading

Heading

Heading

desert scene

Tour heading

Tour standfirst

View our tour

Highlighted links

forest scene

Heading

rock

Heading

Dolor non ipsum laboris

Aute commodo sunt laboris elit voluptate consequat proident sint nisi voluptate ea aliquip nulla excepteur exercitation ex.
woman with yellow bag

Story heading

Story standfirst

Highlighted links

Quis est sint enim aliquip fugiat

Quis est sint enim aliquip fugiat

Quis est sint enim aliquip fugiat

Quis est sint enim aliquip fugiat

Featured story

smiling woman with eyes shut

Story heading

Story standfirst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies. Donec et tortor scelerisque, semper quam vitae, dictum nibh.

Dolor non ipsum laboris

Aute commodo sunt laboris elit voluptate consequat proident sint nisi voluptate ea aliquip nulla excepteur exercitation ex.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies. Donec et tortor scelerisque, semper quam vitae, dictum nibh.

Map

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies. Donec et tortor scelerisque, semper quam vitae, dictum nibh.

Featured links

man in front of block of flats

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.
woman with yellow bag

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies. Donec et tortor scelerisque, semper quam vitae, dictum nibh.

Highlighted links

woman in front of brick wall

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.
woman with yellow bag

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.
man against yellow wall

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.
autumn wood

Quis est sint enim aliquip fugiat

Nulla commodo occaecat sint anim aute qui in exercitation veniam esse fugiat quis ad voluptate irure commodo nisi.

Highlighted links

Heading

Heading

Latest news

Filter

Affiliate logos panel

You can add some affiliate logos, with a short title for each. Each logo can link to a website.

test

A link to an affiliate

 test

Another link to an affiliate

Events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet sapien eget neque hendrerit, eget vulputate nisi ultricies. Donec et tortor scelerisque, semper quam vitae, dictum nibh.

Image gallery

man against yellow wall river running through a wood desert scene autumn wood woman with yellow bag woman in front of flats sea on sand woman leaning on a book