Cards

Use the card component to display one or more related items, such as news stories, events and locations on campus.

Using the card component

The card component can be used as a single item, in rows of two or in rows of three. A card component can have the following fields:

  • card title (mandatory for all)
  • call to action button (mandatory for all)
  • description (optional)
  • location (optional)
  • date and, if required, time (optional)
  • contact email address (optional)
  • image (optional) – images should be 745px by 468px.

Which fields to use

  • A group of cards that just use a description (and nothing else except the card title, CTA and optional image) can be used as an alternative to nav blocks (particularly where a page might need variation), bringing together a consistent group of content types like research stories or student stories. Since the descriptions for nav blocks in Drupal won’t be editable (as they will pull from the standfirst on the linked page), the card is a good alternative if you do need to provide a different description for any reason. 
  • The date field is useful for news and other stories, or anything with a deadline (such as scholarship applications). The date label can be manually edited to say, for example, ‘published’ or ‘deadline’, depending on the use case.
  • The location field can present locations like restaurants or other facilities on campus. The location label must not be edited. The field for location can be populated using either plain text, but can also be hyperlinked with map links or more details.
  • Using both the date and the location field together can work well for student recruitment events and any other events (online or offline) that don't already exist on Broadcast – such as Open Days, Visit Days and campus tours.
  • The contact email address can be added if needed. This should be the only link text used on a card. Any other links should be used in the CTA button.

Consistency is key. When you’re using multiple cards together, ensure they are for same type of content (e.g. a group of events or a group of research stories) and use the same fields. If one has an image/description/date/location, they all should. This prevents a mis-match of cards grouped together (e.g. an event card next to a research story card). You can also use an appropriate heading level above a group of cards to set context as needed (e.g. ‘Undergraduate recruitment events’ or ‘Explore our research stories’).

Broadcast feeds

Broadcast news and event feeds are still in use across the site. The cards on these feeds are automatically generated as part of the Broadcast system. Don’t use the cards on this page as alternatives to Broadcast feeds, unless you are grouping together news or events from separate feeds – in which case you will manually link from each event card to its respective Broadcast news or event item using the card’s CTA.

Card customiser

Use the card customiser below to change the layout and fields of a card before copying the html code (which can be found underneath the cards below).

Layout

Optional features

Result