Display user information

Display user contact information and related data using containers with clear visual hierarchy.

When to use

Use this pattern when:

  • Showing user profile or contact information
  • Displaying assigned advisor or representative details
  • Presenting upcoming dates or deadlines in a structured format
  • Creating summary views of user-related data

Considerations

  • Use containers to group related information
  • Apply consistent typography for labels and values
  • Use the accent="thick" variant for important information sections
  • Include actions (like “Add to calendar”) when relevant
  • Use tables with striped rows for date lists to improve scanability
View old example docs