Divider

Separates two sections. Without children it renders a plain <hr class="hr">; with children, a labeled rule (hr-text).

<p>Billing address</p>
<twig:Tabler:Divider />
<p>Shipping address</p>
<twig:Tabler:Divider>Or</twig:Tabler:Divider>
<p class="mb-0">Pick up in store</p>

<p>Billing address</p>
<hr class="hr" />
<p>Shipping address</p>
<div class="hr-text">Or</div>
<p class="mb-0">Pick up in store</p>

Positions

position aligns the label: start, center (the default) or end.

<twig:Tabler:Divider position="start">Start</twig:Tabler:Divider>
<twig:Tabler:Divider>Center</twig:Tabler:Divider>
<twig:Tabler:Divider position="end">End</twig:Tabler:Divider>

<div class="hr-text hr-text-start">Start</div>
<div class="hr-text">Center</div>
<div class="hr-text hr-text-end">End</div>

Variants

variant colors the label (text-{variant}):

{% for variant in ['primary', 'success', 'danger', 'warning'] %}
    <twig:Tabler:Divider variant="{{ variant }}">{{ variant|capitalize }}</twig:Tabler:Divider>
{% endfor %}

<div class="hr-text text-primary">Primary</div>
<div class="hr-text text-success">Success</div>
<div class="hr-text text-danger">Danger</div>
<div class="hr-text text-warning">Warning</div>

Spaceless

spaceless replaces the vertical margin of a labeled divider with a small negative one (hr-text-spaceless), for a label between rows that already have padding, such as list items:

<div class="list-group list-group-flush">
    <div class="list-group-item">Invoice INV-0144 sent to Initech</div>
    <div class="list-group-item">Payment of €480.00 received</div>
    <twig:Tabler:Divider spaceless="{{ true }}">Yesterday</twig:Tabler:Divider>
    <div class="list-group-item">Customer Globex updated</div>
    <div class="list-group-item">Invoice INV-0143 sent to Globex</div>
</div>

<div class="list-group list-group-flush">
    <div class="list-group-item">Invoice INV-0144 sent to Initech</div>
    <div class="list-group-item">Payment of €480.00 received</div>
    <div class="hr-text hr-text-spaceless">Yesterday</div>
    <div class="list-group-item">Customer Globex updated</div>
    <div class="list-group-item">Invoice INV-0143 sent to Globex</div>
</div>

position, variant and spaceless only apply to a labeled divider: the plain <hr> ignores them.

Props

Prop	Type	Default	Description
`position`	string	`'center'`	`start` `center` `end`: label alignment
`variant`	string?	`null`	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light`
`spaceless`	bool	`false`	No vertical margin around the label (`hr-text-spaceless`)

Other attributes go to the root <div class="hr-text"> or <hr class="hr">.

Blocks

Block	Default
`content`	Empty: the children, the label. Empty or blank renders an `<hr>`