Divider

The divider is a line that helps structure your layout. It mainly helps to visually separate elements from each other.

Use the hr element to create a horizontal rule where you want to add a divider.
Add flix-divider class name to give it some style.

Bellow you can see an example of a divider being used to split two different, unrelated paragraphs.

Here begins a whole new content.

<p class="flix-text">Bellow you can see an example of a divider being used to split two different, unrelated paragraphs.</p>
<hr class="flix-divider"/>
<p class="flix-text">Here begins a whole new content.</p>

<p class="flix-text">Bellow you can see an example of a divider being used to split two different, unrelated paragraphs.</p>
<hr class="flix-divider"/>
<p class="flix-text">Here begins a whole new content.</p>

Dividers have no initial margin values defined, this is expected behavior. You must define your desired the margin values. We recommend using honeycomb's spacing classes for that. The divider bellow has a small margin:

<hr class="flix-divider flix-space-4-bottom"/>
<hr class="flix-divider flix-space-4-bottom"/>

Divider

Related Components