Data modules
Content modules are collapsible containers that display a structured set of data rows — coverages, claims summaries, financial details — inside a consistent shell with a labeled header, data slot rows, and an optional footer CTA.
Overview & specs
Modules fill the width of their parent container. Use them in right rail panels (340px), main content areas (variable), and detail drawers. They carry a standard elevation shadow to lift them off the page surface.
Component anatomy
Collapsed & expanded
Modules are expanded by default. Users can collapse them to reduce visual noise when a data area is not immediately relevant. The header always remains visible.
Expanded
GL Coverage Summary
Collapsed
GL Coverage Summary
Benefits module example
Benefits modules list individual coverage line items with their limit, deductible, and status. Each row carries a status indicator aligned to the right.
Employee Benefits Summary
Claims data module example
Claims modules surface financial summaries and open item counts. Currency values are right-aligned and use the brand green for key totals.
Claims Financial Summary
Usage guidance
- Keep module titles short (2–4 words) — describe the data set, not the action.
- Right-align numeric values; left-align labels.
- Make modules collapsible whenever they contain more than 6 rows.
- Use the footer for secondary CTAs only — never primary actions.
- Don't nest modules inside modules.
- Don't exceed 10 rows without pagination or a "show more" pattern.
- Don't put form inputs inside a display module — use a form layout instead.
- Don't use ad hoc spacing — always use the token values.
Design tokens
| Token | Value | Usage |
|---|---|---|
--radius-md | 8px | Module corner radius |
--shadow-100 | Module Standard | Module box-shadow |
--color-border-subtle | gray-200 | Header/row/footer dividers |
--color-bg-subtle | gray-50 | Module footer background |
--fs-body-sm | 14px | Module title and row content |
--ws-green-01 | #319B42 | Key value highlight color |