Skip to main content
T4 Support
  1. T4 Support
  2. Content type directory
  3. Card

Card

Cards and card containers work together to display content in cards, with the option to add descriptions, images and dates. Cards are good content types to use for a landing page or a homepage to signpost to content.

Card example

Here's what three cards with descriptions and images look like. We will cover which background colour to use further down this page.

 

Screenshot of cards displaying on a page

Cards in a three-card container with an image and caption.

Content types needed

To add cards to your page you need the following content types enabled:

  • Cards
  • Card container

Steps

Step one - create your 'cards' folder

  1. In order for your cards to pull through you must create a cards folder. This goes below the section where you want your cards to appear. Make sure you untick 'Show in navigation' when you create this section.
Screenshot showing where the cards subfolder should go

The cards here are built in a child section that lives underneath the Queen Mary in Paris landing page, which is where they are pulled through to and displayed.

Step two - build your cards in the cards folder

  1. Within the cards folder you have created, select 'card' from the list of content types.
  2. Fill out the relevant fields. An image is optional but you must include a description of what to expect from the page being signposted to.
  3. Make sure you add a link to the page you wish the card to link to.
  4. If the page you're linking to is of primary importance, tick the 'blue' colour option. 
  5. If it's of secondary importance, keep it unticked so it stays grey. 
  6. By differentiating this way, you will draw the audience's eye to the content you want them to click on.
  7. Remember to keep the card group number as '1' (the default) if you are building one row of cards. Change this number if you are building multiple card containers.
  8. Save and approve.
Screenshot of fields on card content type

The card group field is towards the bottom of the card content type page. Just below it is the button to save your changes which keeps them in draft.

Step three - building the card container

  1. Select the 'card container' content type on the page where you want the cards to appear. This is the 'parent section' to the 'child section' where your cards folder is.
  2. The card group field must correspond to the correct card group number you have selected on your card content types.
  3. Save changes.
Screenshot showing the card group content type

The card container content type has a drop-down menu where you specify which card group your card belongs to. Remember to save your work.

Step four - publishing your content

Once the 'card container' and 'card' content types are saved and approved then there are two steps to follow.

  1. Publish the cards in the (child) section you created, and then the section itself.
  2. Publish the 'card container' content type (parent section) where you want the cards to appear.

Click on the publish button located at the top of the section.

Publish section screenshot

On the top right-hand side you'll be able to preview your content before it goes life and then publish it once you're happy with it.

Step five - multiple containers

  1. To build multiple card containers repeat the steps above, but label your cards for your second container '2' and your second card container '2' in the relevant fields.

  2. You can build up to five card groups on one page.

  3. A single card container can pull in up to 30 cards.

     

     

Uploading images - important note

Make sure you have the appropriate permissions before publishing an image or video. This includes permission of the copyright holder and, in some cases, the permission of anybody in the image (eg a signed consent form). Find out more about this on our Images page. 

Availability

If you cannot add any of the content types mentioned, email websupport@qmul.ac.uk.

Examples

 

 

Back to top