mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
71 lines
3.3 KiB
Plaintext
71 lines
3.3 KiB
Plaintext
---
|
|
title: Divider
|
|
summary: A divider is a horizontal line between blocks of content, with an optional text label on the left, in the center or on the right.
|
|
description: Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.
|
|
source: core/scss/ui/_type.scss
|
|
classnames:
|
|
component:
|
|
- class: hr
|
|
desc: Applied to the hr element
|
|
part:
|
|
- class: hr-text
|
|
desc: Divider with a label; the text sits in a child element
|
|
modifier:
|
|
- class: hr-text-spaceless
|
|
desc: Removes the vertical margin
|
|
direction:
|
|
- class: hr-text-start
|
|
desc: Moves the label to the leading edge
|
|
- class: hr-text-end
|
|
desc: Moves the label to the trailing edge
|
|
color:
|
|
- class: text-{color}
|
|
desc: Any base color for a labelled divider
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Default markup
|
|
|
|
The `.hr-text` element draws a line with a label in the middle. For a line without text, use a plain `hr`.
|
|
|
|
<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>
|
|
</Example>
|
|
|
|
## Text position
|
|
|
|
Add `.hr-text-start` or `.hr-text-end` to move the label to the start or the end of the line. Without them it's centered.
|
|
|
|
<Example>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
|
|
<div class="hr-text hr-text-start">Start 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-end">End divider</div>
|
|
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
|
|
</Example>
|
|
|
|
## Divider color
|
|
|
|
A `text-*` class from the [color palette](/ui/base/colors) colors the divider.
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- A divider that separates sections is decoration, so `hr` with no extra markup is enough - browsers already expose it as a separator.
|
|
- When the divider carries a label, keep the label as text. Do not fake it with a `::before`, since generated content is not reliably read.
|
|
- A vertical divider between inline items is decoration too. Use `aria-hidden="true"` if you build it from a `span` rather than an `hr`.
|
|
- Do not use a divider to group form fields. Use a `fieldset` with a `legend`, which is what actually creates the group.
|