#StandWithUkraine

StructuredInfo

Open in Storybook Open in Figma

StructuredInfo is a highly flexible component for displaying a group of related information associated with contacts or products. You can find real-world examples in the StructuredInfo examples.

Loading demo…

Basic StructuredInfo

StructuredInfo is typically composed of multiple StructuredInfoItem elements. They represent a single labelled value or piece of information, such as a name, balance, product attribute, or status indicator.

Loading demo…
Rules For Accessibility
  • Use the label prop to provide semantic meaning for screen readers, especially when the children alone might not be descriptive enough.