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.
Related
Anatomy
Contact card
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)