---
name: Rule
route: /components/common/rule
edit: false
---

import { Playground, Props } from 'docz'
import Rule from './rule'

# Rule

<Playground style={{fontFamily: 'monospace'}}>
  <code>
    --ds-border-rule: 0.0625rem solid var(--ds-color-london-85);<br />
    --ds-border-rule--emphasised: 0.0625rem solid var(--ds-color-london-5);<br />
    --ds-border-rule--inverse: 0.0625rem solid var(--ds-color-london-35);<br />
    --ds-border-rule--inverse-emphasised: 0.0625rem solid var(--ds-color-london-100);<br />
    --ds-border-rule--heavy: 0.25rem solid var(--ds-color-london-5);<br />
    --ds-border-rule--inverse-heavy: 0.25rem solid var(--ds-color-london-100);<br />
    --ds-border-rule--accent: 0.25rem solid var(--ds-color-economist-red);
  </code>
</Playground>

## Rule
### Description
For all standard usage. Horizontal placement.

<Playground style={{ margin: '-2em', padding: '2em' }}>
  <Rule />
</Playground>

<hr />

## Rule (inverse)
### Description
For all standard usage. Horizontal placement.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <Rule inverse />
</Playground>

<hr />

## Rule (emphasised)
### Description
For indicating importance. Horizontal placement.

<Playground style={{ margin: '-2em', padding: '2em' }}>
  <Rule rule='emphasised' />
</Playground>

<hr />

## Rule (inverse, emphasised)
### Description
For indicating importance. Horizontal placement.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <Rule inverse rule='emphasised' />
</Playground>

<hr />

## Rule (heavy)
### Description
For indicating highest importance. Horizontal placement.

<Playground style={{ margin: '-2em', padding: '2em' }}>
  <Rule rule='heavy' />
</Playground>

<hr />

## Rule (inverse, heavy)
### Description
For indicating highest importance. Horizontal placement.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <Rule inverse rule='heavy' />
</Playground>

<hr />

## Rule (accent)
### Description
A visual cue for landmarks.

<Playground style={{ margin: '-2em', padding: '2em' }}>
  <Rule rule='accent' />
</Playground>

<hr />

## Rule (inverse, accent)
### Description
A visual cue for landmarks.

<Playground style={{ backgroundColor: '#333', margin: '-2em', padding: '2em' }}>
  <Rule inverse rule='accent' />
</Playground>