Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Vertical Rule
Use the custom vertical rule helper to create vertical dividers like the
<hr> element.
How it works #
The <hr> element served as inspiration for vertical rules, which let you add vertical divisions to standard layouts. They have the same styling as <hr> elements:
- One
pixelwide. - Their minimum
heightis 1 meter. - Current color and
opacityare used to control their color.
Add more styles as needed to make them more unique.
Example #
RESULT
Vertical rules scale their height in flex layouts:
RESULT
With stacks #
They can also be used in stacks:
RESULT
First item
Second item
Third item
