docs:layout:component:hr

About

The hr component permits to delimit two sections of content by drawing a horizontal rule (hr).

It's also known sometime as the Divider and has a separator role.

It represents:

a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
or a separator between a groups of items.

Syntax

hr supports both syntax:

Markdown / Wiki

You can add a horizontal rule with four or more dashes.

Input:

----

Output:

Super Set HTML

We supports also the horizontal rule in a super set HTML syntax.

<hr/>

You can style them then as you wish.

Example

Wiki / Markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
----
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Super HTML

As hr is a superset HTML component, you can use all styling attributes such as spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<hr spacing="my-5"/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.