The Updated Profile Card component allows you to display a person’s information in a structured, card-style format. You can customize the layout (either horizontal or vertical) and select which details to include. This component also offers styling options, including background color, text alignment, size, box shadow, border, and spacing adjustments to match your design needs. Use this component when you want to feature a concise, visually appealing profile for team members, speakers, or contacts on a webpage.
Example
Content Options
Full, Vertical
Full, Horizontal
Heading & Contact, Vertical
Heading & Contact, Horizontal
Simple, Vertical
Simple, Horizontal
Layout and Styling Options
Background Colors
Text Alignment
Size
Style Options
Bottom Margin
the end
Top Margin
the end
Usage
Do
- Choose the card layout (horizontal or vertical) that best fits the section’s design and available space.
- Select the appropriate content option based on the information’s relevance to the audience.
- Keep the card layout consistent across similar sections for a polished, professional look.
- Align the card in a way that complements surrounding content and maintains visual balance on the page.
- When adding multiple cards, consider spacing between them to keep the design clean and easy to navigate.
- Place the card in sections where concise, structured information about a person is useful, such as team or speaker pages.
Don't
- Avoid using this component for lengthy biographies or detailed descriptions; it’s designed for concise information.
- Don’t place profile cards in sections with heavy text or unrelated content; keep them in areas where they can stand out.
- Don't stack too many profile cards in a small area, as this can make the page feel crowded.
- Avoid mixing this component with other similar-looking components in the same section to prevent visual clutter.
- Avoid frequently switching between vertical and horizontal layouts on the same page to maintain visual consistency.
- Don’t rely on the card component as the main way to convey critical information, as it’s intended for quick reference only.
- Avoid placing the card against a background color that clashes with the component’s styling, as this reduces readability.
Accessibility
- Image alt text should be added automatically without the page author needing to do anything.