Layout
Divider
Separates areas without adding weight.
Examples
Gradient
Subtle
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Line | 1px gradient or subtle | Required |
Specifications
| Styles | Gradient (fades into the background) · Subtle (crisp line) |
|---|---|
| Width | Fill parent |
Interaction
| Key | Result |
|---|---|
| None | Not focusable |
| Trigger | Response |
|---|---|
| None | Static |
Accessibility
role · separator
1.3.1Info and Relationships1.4.11Non-text Contrast
| Requirement | How Rig meets it |
|---|---|
| Semantics | <hr> for a thematic break; a decorative rule can be CSS only |
| Contrast | A divider that carries meaning must reach 3:1 |
| Spacing | Do not use it instead of whitespace or headings |
Usage
| Do | Don’t |
|---|---|
| Use sparingly | Do not use dividers between every list item if spacing is enough |