2.4 KiB
title, description, bootstrap-link, done
| title | description | bootstrap-link | done |
|---|---|---|---|
| Divider | Dividers help organise content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. | components/dropdowns/#dividers | true |
Default markup
Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
{% capture code %}
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% include ui/hr.html text="See also" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% endcapture %} {% include example.html code=code %}Text position
You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
{% capture code %}
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% include ui/hr.html text="Left divider" position="left" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% include ui/hr.html text="Centered divider" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% include ui/hr.html text="Right divider" position="right" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% endcapture %} {% include example.html code=code %}Divider color
Customise the colour of dividers to make them go well with your design. Click [here]({% docs_url colors %}) to see the list of available colours.
{% capture code %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
{% include ui/hr.html text="Green divider" color="green" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% include ui/hr.html text="Red divider" color="red" %}Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
{% endcapture %} {% include example.html code=code %}