Divider
Divider components are used to create visual divisions between sections of content, enhancing the organization and readability of the interface.
Lorem Ipsum
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem
Lorem
Lorem
API Reference
| Prop | Type | Default |
|---|---|---|
margin | string | - |
orientation | OrientationTypes | horizontal |
Usage
General Guidelines
Do's
- Use separators to distinguish between related content blocks.
- Ensure separators align with the overall design system of your application.
- Use subtle colors that match the application's color scheme.
- Apply separators to improve readability and organization of content.
- Test separators on different devices and screen sizes to ensure consistency.
- Maintain adequate spacing around separators to avoid a cluttered look.
Don'ts
- Don't overuse separators; too many can clutter the interface.
- Avoid using separators as the only means of organization; complement them with headings and whitespace.
- Don't use highly contrasting or vibrant colors that draw too much attention.
- Avoid incorrect spacing, as it can make separators look out of place.
- Don't use separators where content is naturally separated by other means (e.g., within a paragraph).
Writing Guidelines
When to use
- To separate distinct sections of content on a page.
- To group related items together visually.
- To provide a visual break in long forms or lists.
- To enhance the readability of complex data tables.
- When you need to delineate different areas within a single view.
When not to use
- When content is already clearly separated by other means (e.g., whitespace, headings).
- When it disrupts the visual flow or hierarchy of the page.
- In places where it might confuse users about the relationship between content sections.
- When it adds unnecessary complexity to a simple layout.
Use Case
General Use Cases
- Separating sections such as headers, content blocks, and footers.
- Distinguishing between different groups of form fields.
- Separating items in a long list to improve readability.
- Dividing different sections of a complex table.
- Separating card content from actions within card layouts.
Digital Health Use Cases
- Separating different sections of a patient’s medical history.
- Distinguishing between different days or types of appointments.
- Grouping and separating related fields in patient intake forms.
- Organizing and separating different types of health metrics and data.
- Separating sections of health education materials for better comprehension.