---json
{
    "page_id": "q8dp6jiim2o0b2mgdx8nb"
}
---
====== ComboStrap UI - HR (Horizontal Rule) ======


===== 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.
<webcode name="Default" frameborder="0">
  * Input:
<code dw>
----
</code>
  * Output:
</webcode>

==== Super Set HTML ====
We supports also the horizontal rule in a [[docs:marki|super set HTML syntax]].

<code html>
<hr/>
</code>

You can [[docs:styling:styling|style]] them then as you wish.

===== Example =====
====  Wiki /  Markdown ====

<webcode name="markdown" frameborder=0 >
<code dw>
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.
</code>
</webcode>
==== Super HTML ====

As ''hr'' is a [[docs:marki|superset HTML component]], you can use all [[docs:styling:styling|styling attributes]] such as [[docs:styling:spacing|spacing]]
<webcode name="Default" >
<code dw>
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.
</code>
</webcode>