mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
f2e182dedf
Co-authored-by: Mustafa Ateş Uzun <mustafauzun0@gmail.com> Co-authored-by: Aditi Deshpande <aditideshpande2908@gmail.com> Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
64 lines
2.3 KiB
Plaintext
64 lines
2.3 KiB
Plaintext
---
|
|
title: Divider
|
|
description: Dividers help organize 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.
|
|
bootstrapLink: components/dropdowns/#dividers
|
|
---
|
|
|
|
## 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.
|
|
|
|
```html code example
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
|
</p>
|
|
<div class="hr-text">See also</div>
|
|
<p>
|
|
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
|
</p>
|
|
```
|
|
|
|
## 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.
|
|
|
|
```html code example height="380px"
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
|
</p>
|
|
<div class="hr-text hr-text-left">Left divider</div>
|
|
<p>
|
|
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
|
</p>
|
|
<div class="hr-text">Centered divider</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
|
</p>
|
|
<div class="hr-text hr-text-right">Right divider</div>
|
|
<p>
|
|
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
|
</p>
|
|
```
|
|
|
|
## Divider color
|
|
|
|
Customize the color of dividers to make them go well with your design. Click [here](colors) to see the list of available colors.
|
|
|
|
```html code example height="380px"
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
|
</p>
|
|
<div class="hr-text text-green">Green divider</div>
|
|
<p>
|
|
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
|
</p>
|
|
<div class="hr-text text-red">Red divider</div>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
|
|
</p>
|
|
<div class="hr-text text-primary">Primary divider</div>
|
|
<p>
|
|
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
|
|
</p>
|
|
```
|