Skip to main content

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 the 'persons' area of EpiServer.

Related

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)