Module
A Module is a container that holds content about one subject. Its contents can be visible at all times, or expand and collapse as individual modules or a group of modules.
Static Module Props
Expandable Module Props
Usage guidelines
- Grouping and organizing content to keep the page clean and digestible.
- Displaying additional related content about a particular subject.
- Enabling users to reveal or hide additional content as necessary (with Expandable variant).
- In a layout that conveys a clear sense of information hierarchy. Use SegmentedControl instead.
- When long content can’t be displayed all at once, and scrolling is necessary.
- When there is insufficient content to condense, as collapsing can increase cognitive load and interaction cost. Consider the static variant of Module.
- When the content is crucial to read in full. Consider the static variant instead.
Static
A Module is a container that can hold any content, and can optionally have a title
that describes the content inside. The default, static Module is used to display information that should always be visible.
Static - Icon
An Icon can be provided to be placed before the title
.
It is recommended that icons be used sparingly to convey additional information, and instead should simply reinforce information in the title. Be sure to provide an iconAccessibilityLabel
.
An IconButton can be provided to be placed after the title
for a supplemental Call To Action (CTA).
Static - Badge
Badge text can be provided, which will be displayed after the title
. Note that if no title text is provided, the badge will not be displayed.
Static - Error
When using type
as "error"
, be sure to provide an iconAccessibilityLabel
.
Expandable
Modules can also allow for expanding and collapsing content. The title
is required and always present. The collapsed state shows optional summary
content, while the expanded state shows any content desired.
Expandable - Group
Multiple expandable items can be stacked together into a Module group. However, only one Module will be expanded at any time.
Expandable - Icon, Badge and IconButton
An Icon can be provided to be placed before the title
.
It is recommended that icons be used sparingly to convey additional information, and instead should simply reinforce information in the title. Be sure to provide an iconAccessibilityLabel
.
Badge text can also be provided, which will be displayed after the title
.
An IconButton can be provided to be placed after the title
for a supplemental Call To Action (CTA).
Expandable - Error
When using type
as "error"
, be sure to provide an iconAccessibilityLabel
.