The 3 column colour block is used to promote and emphasise a single area on your page using blocks which show as a row of three on a desktop screen and as three single items stacked vertically on a mobile. The block acts as one link and Images can be added to each block to illustrate the information you are promoting.

If you have more than one area on a page which you want to draw your users attention to, you can have more than one group of blocks on any one page.

Like other similar content types, the 3 column colour block can have either a dark or light theme applied.

Here is a live example with the dark theme applied

Take a look at how it works and then 'give it a try' by following the instructions below.

Here is a live example with light theme activated

Take a look at how it works and then 'give it a try' by following the instructions below.

Instructions

1. In the site structure, navigate to the section (page) you want the content to appear on.

2. Click the blue Actions button and select Create content.

3. Select a 3 column colour block content type from the list (Find out how to add a content type to a section).

4. A form with a number of fields will appear. Each of these fields relates to a particular component of your 3 column colour block, fill in the form, example below:

Note: You have to enter information for columns 1, 2 and 3.

Field title What should I do? Is it compulsory?
Name* Name the block and give it a concise description e.g. 3colourblock-training. Yes
Block Title*

The Block title will show as default unless specified not to (see next option). This block is for screenreaders (accessibility). The first two column block on this page as the block title activated.

Yes
Show block title Unticking this box hides the block title from anyone but screenreaders. No
New Column 1 (or 2 or 3) Image

Click Select media to choose a image from the Media Library or to upload a new image. An image of 3000 pixels (wide) by 2000 pixels (high) is required for this content type. Please view the guidance on adding and selecting images in the Media Library.

If you add an image you must add an 'Alt text' describing what is contained in the image. This is an accessibility requirement.

No
Column1 (or 2 or 3) Title* Insert a title for this column. Yes
Column 1 (or 2 or 3) Content* Insert the content you want to show in this column. Yes 
Column 1 (or 2 or 3) Link Text Insert the text to show for the link in this block. No
Column 1 (or 2 or 3) Internal Link

If the link is internal (Internal means from one t4 section/page to another t4 section/page), click the Add section link and choose the section/page from the complete list of sections in t4. OR

No
Column 1 (or 2 or 3) External Link

If the link is external (External means any page not in t4, either within the College or elsewhere) type or paste the entire URL including http:// or https:// e.g. https://www.bbc.co.uk/.

OR

No
Column 1 (or 2 or 3) Media Library Link Add a document (pdf, Word, Powerpoint etc.,) from the Media Library No
Use the light theme? Yes Tick to remove dark theme from the column blocks and replace with the light theme (light grey). This will apply to all three columns. No

5. Click Save and approve to save 

Save and approve option