---
title: Separators
description: Separators are structural elements used to differentiate distinct sections of a page.
sass: ./scss/_separators.scss
---

## How to use

### Horizontal separators

``` html_example
<p>Some text above the separator</p>
<div class="horizontal-rule-full-width"></div>
<p>Some text below the separator</p>
```

### Vertical separators

``` html_example
<div class="row">
    <div class="small-4 columns">
        Some text to the left of the separator
    </div>
    <div class="small-4 columns vertical-rule-full-height">
        Some text to the right of the separator
    </div>
</div>
```