Skip to main content




Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:


  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Articles in this Section

    • Accordion
      Accordion expands vertically-stacked content by clicking on the header.
    • Alert
      Alert gets the end user's attention and highlights important information, errors or warnings on the screen.
    • Blank Slate
      Blank Slate informs end users when they start using the application, complete a task or when there is no data available for display.
    • Card
      Card groups small pieces of information and highlights them on the screen.
    • Card Background
      Card Background groups short pieces of information and highlights them on the screen while providing additional relevance by using a background image.
    • Card Item
      The Card Item widget allows you to list items with multiple content types, such as an image or icon, a title and description, and an action to the right.
    • Card Sectioned
      Card Sectioned groups short pieces of information in sections and highlights them on the screen.
    • Chat Message
      Chat Message displays conversation posts in notifications or chat screens.
    • Flip Content
      Flip Content prioritizes information display, keeping the interface uncluttered.
    • Floating Content
      Floating Content displays a panel that floats over content (like a map or an image), docked to a screen corner or direction.
    • List Item Content
      List Item Content is used to layout content such as icons, text, and actions inside a list in a readable way.
    • Section
      Section separates content into groups, easing visual organization.
    • Section Group
      Use the Section Group UI Pattern to keep the context of the header while progressively viewing more content by scrolling.
    • Tag
      Tag styles small texts in a colored tag format.
    • Tooltip
      Tooltip dynamically displays simple informative content on end user interaction.
    • User Avatar
      User Avatar displays user information in a circular badge.
    • Was this article helpful?