Skip to Content

Foundation - 2 Cards

This is what the 2 cards layout options look like:

Foundation - 2 Cards - No Text
path leading to McClay Lbrary from Lanyon
Card One Heading
Graduate school interior, first floor break area
Card Two Heading
Foundation - 2 Cards - No Text, Title on Image
Close up of Lanyon building main entrance in sunshine
Card One Heading
Card One Heading
Still E05
Card Two Heading
Card Two Heading
One Column Example
path leading to McClay Lbrary from Lanyon
One Card Example
One Card Example

The 2 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 two 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 column, and empty columns for Foundation - 3 and 4 Cards, 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

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

This content type has four layout options:

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, 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.

Form Field Guidance

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

Foundation - 2 Cards Form Field Guidance
Field Title Information Is it required?
Name This is the name of the content block, only visible to editors of the section.   Yes
Cards Title Add a title to the content type. The title will appear above both cards, aligned to the left.
Maximum characters allowed: 80		 No
Embed Card Titles on Image Tick Yes if you want the Card Headings to be located on both images, in the bottom left corner. No
Card 1 Image Add your optimised image via the Media Library. Maximum image dimensions are 800 x 533 pixels. Yes
Card 1 Heading Add a heading to the first card in the left column of the content type.
Maximum characters allowed: 80 		 Yes
Card 1 Text Used for the main text located below the first card in the left column of the content type. Please note heading tags will be removed.
Maximum characters allowed: 5000 		 No
CHOOSE Section Link OR Web Address for Card 1 Use this option to define which link you want to create.  The options are to specify a Section/Content Link OR an External Link. Yes
Section Link for Card 1 For use when Section Link is selected in the field Choose Section Link OR Web Address for Card 1.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text Normally, the default sets the link text to the name of the section or block of content you are linking to.  In this content type, leave the default setting as it is because the link text will be the Card 1 Heading. No
Web Address for Card 1 For use when Web Address is selected in the field Choose Section Link OR Web Address for Card 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
Card 2 Image Add your optimised image via the Media Library. Maximum image dimensions are 800 x 533 pixels. No
Card 2 Heading

Add a heading to the second card in the right column of the content type.
Maximum characters allowed: 80

Note: Leaving this empty will mean this card is not displayed.

 No
Card 2 Text Used for the main text located below the second card in the right column of the content type. Please note heading tags will be removed.
Maximum characters allowed: 5000		 No
CHOOSE Section Link OR Web Address for Card 2 Use this option to define which link you want to create.  The options are to specify a Section/Content Link OR an External Link. No
Section Link for Card 2 For use when Section Link is selected in the field Choose Section Link OR Web Address for Card 2.  Click on the appropriate button option and select the correct section or content link.   No
Use default link text Normally, the default sets the link text to the name of the section or block of content you are linking to.  In this content type, leave the default setting as it is because the link text will be the Card 2 Heading. No
Web Address for Card 2 For use when Web Address is selected in the field Choose Section Link OR Web Address for Card 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
Margin Bottom  This setting determines the amount of space between the 2 Cards content type and the next block of content on the page.  The default margin setting is No Margin.  You can leave the default setting as it is or you can increase the amount of space by selecting Margin Bottom 1, 2 or 3 from the dropdown list.  No 
Close Menu - Off Canvas