ComboStrap UI - HR (Horizontal Rule)

1 - 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.

Since version 1.4

3 - Syntax

hr supports both syntax:

  • html
<hr>
  • and HTML- and XHTML-compatible
<hr/>
hr is a superset HTML component and you can style it as you wish

4 - Example

4.1 - Simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<hr>
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.

4.2 - Advanced

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. 

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.

5 - Documentation / Reference