Skip to Content

Four Verticals

Northern Ireland_17
Four Verticals Content Type
This is what the content type looks like

With optional body text here.

Northern Ireland_13
Four Verticals Content Type
This is what the content type looks like

With optional body text here.

Belfast_30
Four Verticals Content Type
This is what the content type looks like

With optional body text here.

Belfast_97
Four Verticals Content Type
This is what the content type looks like

With optional body text here.

The Four Verticals content type is mainly used on homepages and top level sections only, as directional content to highlight information that you want users to be aware of and easily access within your site.  It comprises three equal width columns, each containing an image, a heading, a subheading and a link.

The Two Verticals and Three Verticals content types perform exactly the same function, with two and three columns displayed respectively.

General Guidance

Important note on using the Four Verticals content type:

The Four Verticals content type must only be used on full width content areas of your webpage. Some sites will not have a full width content area, therefore you must not use this content type on those sites. For example, if your site has content in a right column or a left column, you must not use this content type within the main content of the webpage.

You also cannot use the three verticals content type within right/left column content.

Using this content type in an area smaller than full width will severely impact the user experience. You will be asked to remove it from use if it is used in an area smaller than full width.

Our advice: 

Please use the following information to help ensure that you are using the two, three and four verticals content types correctly: 

  • Some of the fields have character limits as defined in the form field guidance below.  Please ensure you are aware of these before planning out content using this content type.

Imagery

  • You should have full permission for any image you intend to use on your website.
  • All images should be the correct dimensions, 535 x 535 pixels (width x height) and optmised for the web.  For users that do not have access to Adobe Photoshop or a similar image editing resource, we would recommend the use of PIXLR, a free online image editing platform.  This platform can be used to resize and optimise images.
  • You are not required to add an Image Alt Text / Description if the image will be decorative only.  Further information is available in the Text Alternatives for Images section of our Accessible Content Guidance.
  • Do not create images with embedded text.  The image will be inaccessible and the text will not scale across mobile and desktop devices.  If an image with text is required, please use an alternative content type to display this information, such as DTP - One Horizontal.

Links

  • To link to a specific section on your website use a Section Link.  The CMS automatically remembers section links, even if you need to move the linked section when restructuring or reorganising content on your website.  
  • To link to a specific piece of content on your website, use a Content Link. As with section links, the CMS will automatically remember the content link, even if the content is moved to another location on your website.
  • When linking to an external website or resource, then use a Web Address.  The full URL of the website or resource is required i.e. https://www.qub.ac.uk.  Please note that the majority of websites published via the CMS are now accessed over HTTPS only. 

Form Field Guidance

Please use the following information to help you use this Content Type effectively:

Two Verticals Form Field Guidance
Field TitleInformationIs it required?
Name This is the name of the content block, only visible to editors of the section.   Yes
Heading Column 1 Add a heading in the first column of the content type.
Maximum characters allowed: 65
Yes
Subheading Column 1 Subheading located below the heading in the first column. 
Maximum characters allowed: 55
Yes
Body Text Column 1 Body text located below the heading in the first column. 
Maximum characters allowed: 160
No
CHOOSE Section Link OR Web Link 1

Use this option to define which link you want to create.  The options are to specify a Section/Content Link or an external Web Link for Column 1

Yes
Section Link for Column 1 For use when Section Link is selected in the field Choose Section Link OR Web Link 1.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text The default sets the link text to the name of the section or block of content you are linking to.  You can leave the default setting as it is OR you can change the link text by unclicking the default tick box and typing your own link text into the Enter custom link text box. Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. No
Web Link for Column 1 For use when Web Address is selected in the field Choose Section Link OR Web Link 1. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Link Column 1 For use when Web Address is selected in the field Choose Section Link OR Web Link 1.  Add the link text you want to display.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. 
Maximum characters allowed: 65
No
Image Column 1  Add your optimised image via the Media Library. Maximum image dimensions are 535 x 535 pixels. Yes
Heading Column 2 Add a heading in the second column of the content type.
Maximum characters allowed: 65
Yes
Subheading Column 2 Subheading located below the heading in the second column. 
Maximum characters allowed: 55
Yes
Body Text Column 2 Body text located below the heading in the second column. 
Maximum characters allowed: 160
No
CHOOSE Section Link OR Web Link 2

Use this option to define which link you want to create.  The options are to specify a Section/Content Link or an external Web Link for Column 2

Yes
Section Link for Column 2 For use when Section Link is selected in the field Choose Section Link OR Web Link 2.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text The default sets the link text to the name of the section or block of content you are linking to.  You can leave the default setting as it is OR you can change the link text by unclicking the default tick box and typing your own link text into the Enter custom link text box. Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. No
Web Link for Column 2 For use when Web Address is selected in the field Choose Section Link OR Web Link 2. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Link Column 2 For use when Web Address is selected in the field Choose Section Link OR Web Link 2.  Add the link text you want to display.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. 
Maximum characters allowed: 65
No
Image Column 2  Add your optimised image via the Media Library. Maximum image dimensions are 535 x 535 pixels. Yes
Heading Column 3 Add a heading in the third column of the content type.
Maximum characters allowed: 65
Yes
Subheading Column 3 Subheading located below the heading in the third column. 
Maximum characters allowed: 55
Yes
Body Text Column 3 Body text located below the heading in the third column. 
Maximum characters allowed: 160
No
CHOOSE Section Link OR Web Link 3

Use this option to define which link you want to create.  The options are to specify a Section/Content Link or an external Web Link for Column 3

Yes
Section Link for Column 3 For use when Section Link is selected in the field Choose Section Link OR Web Link 1.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text The default sets the link text to the name of the section or block of content you are linking to.  You can leave the default setting as it is OR you can change the link text by unclicking the default tick box and typing your own link text into the Enter custom link text box. Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. No
Web Link for Column 13 For use when Web Address is selected in the field Choose Section Link OR Web Link 3. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Link Column 3 For use when Web Address is selected in the field Choose Section Link OR Web Link 3.  Add the link text you want to display.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. 
Maximum characters allowed: 65
No
Image Column 3  Add your optimised image via the Media Library. Maximum image dimensions are 535 x 535 pixels. Yes
Heading Column 4 Add a heading in the forth column of the content type.
Maximum characters allowed: 65
Yes
Subheading Column 4 Subheading located below the heading in the forth column. 
Maximum characters allowed: 55
Yes
Body Text Column 4 Body text located below the heading in the forth column. 
Maximum characters allowed: 160
No
CHOOSE Section Link OR Web Link 4

Use this option to define which link you want to create.  The options are to specify a Section/Content Link or an external Web Link for Column 4

Yes
Section Link for Column 4 For use when Section Link is selected in the field Choose Section Link OR Web Link 4.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text The default sets the link text to the name of the section or block of content you are linking to.  You can leave the default setting as it is OR you can change the link text by unclicking the default tick box and typing your own link text into the Enter custom link text box. Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. No
Web Link for Column 4 For use when Web Address is selected in the field Choose Section Link OR Web Link 4. Type in the full URL of the external website ensuring the correct protocol prefix is included (http:// and https://). Where possible, it is recommended that you use https for security. No
Text for Web Link Column 4 For use when Web Address is selected in the field Choose Section Link OR Web Link 4.  Add the link text you want to display.  Please make sure the text is descriptive and is not generic as outlined in the accessibility guidance above. 
Maximum characters allowed: 65
No
Image Column 4  Add your optimised image via the Media Library. Maximum image dimensions are 535 x 535 pixels. Yes

Accessibility Guidance

Please use the following guidance to help make sure your content adheres to accessibility regulations:

  • Do not add HTML elements such as span, div, h1 or otherwise to any of the form elements to change the structure of the content type.  Either you will be asked to remove it, or it will be removed by the Web Support Team.  
  • Do not add any CSS styling or selectors to any of the form elements to change the display of the content added to the content type.  Either you will be asked to remove it, or it will be removed by the Web Support Team.
  • Do not create images with embedded text.
  • Do not add image Alt Text / Description to your image if it is decorative.  Further information is available in the Text Alternatives for Images section of our Accessible Content Guidance.
  • Do make sure that the link text used is as descriptive as possible.  Do not use generic link text such as 'Click Here' and 'Read More'.  Further information and examples are available in the Using Links Effectively section of our Accessible Content Guidance.