The Contact Card component provides a simple way to display contact information for a person, including an avatar, name, title, phone numbers, and email addresses. It is designed to make key contact details easily accessible at a glance, helping users quickly identify and connect with the person featured. This component is ideal for use in directories, team pages, or any area where users may need to locate and contact individuals efficiently.
Example
Content Options
Name & Title
Name with Title
Name without Title
This component accepts multiple email addresses.
Phone
This component accepts multiple phone numbers, however the extension and type fields don't appear to working at the moment.
801-555-5555
801-555-5555
801-555-5555
Avatar
No Avatar
Layout and Styling Options
The Contact Card component includes an option to show or hide the avatar, controlled by separate “YES” and “NO” toggles. One toggle must be on to display the card; if both are off, the card won’t appear. We recognize this setup is confusing and plan to simplify it in the future.
Bottom Margin
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large
the end
Top Margin
Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large
the end
Usage
Do
- Use high-quality, professional photos for avatars to ensure clarity and consistency.
- Keep titles concise to avoid crowding the card.
- Include only essential contact details to maintain a clean and readable layout.
- Double-check all contact details for accuracy before publishing.
- Use this component primarily in team directories, staff lists, or contact pages.
- Regularly review and update the information displayed to keep it current and relevant.
Don't
- Refrain from using informal or unprofessional photos, as they can make the card look inconsistent or unpolished.
- Don’t add multiple phone numbers or email addresses unless necessary.
- Avoid placing the Contact Card in areas where users don’t expect contact information, like within unrelated content sections.
- Avoid repetitive information if multiple cards are displayed together (e.g., repeating department names if already shown on the page).
Accessibility
- Ensure that you provide suitable alt text for avatars. Alt text for avatars enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.