Layout options
Information about the kinds of layouts we have available, and what they can be used for
Introduction to layouts
“Layouts” are pre-made templates for different types of content that we can use as building blocks to create an engaging page design. This page shows examples of many of the options there are to choose from.
“Column layout”
The layout this text is sitting in is called “Column layout” and is our most versatile option. It is designed to give you the freedom to write in 1, 2, 3 or 4 columns, as well as using headers and images if you need them. It is not designed to be used for navigational blocks, please see the layout below called “Content box grid” for those.
As you can see, the text here has been split into 3 columns, each with it’s own header image. You can add an optional outline and shadow to the columns like I have here.
The images can be photographs or icons, depending on the theme of the content.
On smaller devices such as mobile phones, the columns stack one on top of another, so that the columns do not become too narrow.
Using "Content box grid"
Below you will see “Content box grid” which is made up of a Heading title and then a series of navigational blocks. These blocks can be presented in 2, 3 or 4 columns, depending on how many blocks are needed. Try to choose the number of columns that leaves as few empty gaps in the final row as possible.
Each block can be added manually, with a manual title, link and image, giving you full control over the description. Alternatively the block can be added by choosing an existing page on the site. If the chosen page has a “featured image”, an image will show, if not then just the title and description will show.
Content box grid
Full width promotional banner
This is an example of a “full width” promotional banner. This means that the colour goes from edge to edge across the screen.
There should always be a title, and some description text to explain the subject. There is the option to include a “call to action” (CTA) button if you would like to link the banner. Either an image or a YouTube video can be displayed on the right side next to the content.
Button exampleSmaller promotional banner
There is also the option to add a “standard” width promotional banner. You can see I have chosen the Somerset Council teal for this version. Different colours can be chosen, but they must have enough contrast with white text to pass the accessibility guidelines.
Button exampleUsing "Latest posts"
Below you will see an example of our “Latest posts” layout. This contains a selection of the most recent news articles, blogs or updates that have been published on your site. There are 3 different layouts to choose from, the example below shows the “featured block and 4 small posts” option.
If your post has a “featured image” it will show on the featured block above the title and description, otherwise the container size for the text will increase to fill the space.
Latest posts
Planning for inclusivity
April 1, 2026Digital performance: How people used Somerset.gov.uk in 2025
March 27, 2026BAU 2025 Review: What we delivered
February 25, 2026Using "Socials"
Below you will see an example of our “Socials” layout. You can choose which platforms to include and link to the page for your service. No customisation is available for this layout.
