This is what the 4 cards layout options look like:

The 4 Cards content type is mainly used on homepages and top level sections, as directional content to highlight information that you want users to be aware of and easily access within your site.  It comprises four columns, each containing a title, an image, optional text and a link. Each card has four possible layout options, however, please ensure that a consistent approach is taken with the layout of the cards.

Product Enhancement - June 2021: This content type now supports an empty columns, to enhance your content layout options, should users require this facility. This means that you don't have to use all of the available cards in the content type. The first card MUST be used but the rest are optional. This is useful if you have multiple rows of cards but one row - usually the last row - doesn't need the full set of cards. 

• General Guidance
• Accessibility Guidance
• Form Field Guidance

General Guidance

Please use the following information to help ensure that you are using this content type correctly: 

This content type has four layout options:

• Foundation - 4 Cards
• Foundation - 4 Cards - Title on Image
• Foundation - 4 Cards - No Text
• Foundation - 4 Cards - No Text, Title on Image
• Optional 3 Columns / Cards

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.

Important note on using the 4 Cards content type:

The 4 Cards 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 4 Cards 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: Where you require 4 Cards but do not have a full width content area, we recommend you use two sets of 2 Cards.

Imagery

• You should have full permission for any image you intend to use on your website.
• All images should be the correct dimensions, 800 x 533 pixels (width x height) and optimised 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 must use the correct naming convention for image filenames, as follows: 
  • Use only lowercase letters (a to z), numerals (0-9) and hyphens (-);
  • Do not use spaces. Instead, use hyphens to separate words.
  • Do not use special characters (e.g., £, %, &, á) or underscores.
• The following resource explains how to optimise an image for use on the web.
• 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.  This content type enables you to add a title onto an image in an accessible way. 

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. 

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.

Form Field Guidance

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