The Module component is a panel container component that supports a grid responsive system. It can be nested within any container, allowing developers to flexibly layout and arrange content to adapt to different screen sizes and devices.
Basic#
Types#
Modules are divided into two types: basic and ghost.
- Basic: The header and content are styled together.
- Ghost: The header and content are separate, with only the content styled.
Elements#
Modules consist of a header area and a content area.
- Header Area: The left side displays the main content summary (title, subtitle, etc.), and the right side displays common actions.
- Content Area: Used for components or embedded containers like Modules, Forms, Tables, etc.
Header#
The header elements include the title, tooltip, badge, collapse button, subtitle, and action area.
- Title (required)
- Toggletip
- Badge
- Collapse
- Subtitle
- Actions
Grid#
Supports a grid system based on 12 columns. Configure the number of columns with the size attribute; defaults to 12 (full width) if not set.
Nesting#
Modules support nesting to express complex content hierarchies.
- Primary Module: Placed directly in the root or layout container.
- Nested Module: A Module placed within another Module.
In theory, modules can be nested indefinitely, but overly complex structures can confuse users rather than help them. We do not recommend unlimited nesting and have visually limited differences beyond the second level.
Usage#
When to Use#
- When a page has multiple main objects, use Modules to encapsulate content and differentiate between objects.
- When grid layout is needed.
When Not to Use#
- If the page has only one main and one Module, place the Module's content directly under the main.