Skip to main content
Search

Contact card

The contact card allows contact details for a specific person to be displayed within the context of other page content.

Contact cards can be used individually within pages or as a collection of cards using the card holder. This is useful for contact us or team pages.

The data displayed in these cards is taken from a person profile.

Anatomy

Contact card

contact-card.svg

Specification

  • Image - W 70px - H 70px (optional)
  • Name (required)
  • Job title (required)
  • Contact details (optional)
  • Biography (optional)
 

Usage guidelines

Do's

  • Contact cards should represent an individual person only
  • Cards can allow for a static or animated image - Image type will depend on device used and/or availability
  • Phone numbers must be formatted for display using the E-123 standard:
    • International +XX XXXX XXXXX
    • National XXXXX XXXXX
  • for the 'tel:' link the number must be in the E-164 standard:
    • +XXXXXXXXXXX

Dont's

  • Contact details should not be included within content independently of the contact cards
  • Cards using animated images must not be used when there are multiple cards together on a single page
  • Contact cards that are used in a card holder must have an equal number of contact fields used
  • Use Contact cards full width to the page this can cause a large amount of page space to be wasted. Cards should always be used in a card holder unless they're in the right column of an article

Behaviour

  • Rollover state for contact card should engage on hover
  • Default image type should be a static headshot
  • Contact details should use the correct link protocol (mailto, tel)