# xpl-divider

Allows for easy separation and titling of sections within forms or other content.

### Design Tokens

Tokens used by this component from `@xplortech/apollo-foundation`.

**Color**
- `--xpl-border-default` — divider line color
- `--xpl-text-default` — label text color

**Spacing**
- `--xpl-space-{0,4,16}` — padding / margin

**Typography**
- `--xpl-font-size-body` — base label font size
- Tier typography extends the shared type scale from `typography.css`: tier 3 → `.xpl-text-title-3`, tier 2 → `.xpl-text-title-4`, tier 1 → `.xpl-text-title-5`

**Border**
- `--xpl-border-small` — line width (1px)

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                                                                                                                             | Type     | Default     |
| -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
| `tier`   | `tier`    | The tier should be an integer between 0 and 3. Tier 0 dividers do not display text, and 1-3 increase in size with each increasing tier. | `number` | `undefined` |


## Dependencies

### Used by

 - [xpl-list-item](../xpl-list/xpl-list-item)
 - [xpl-slideout](../xpl-slideout)

### Graph
```mermaid
graph TD;
  xpl-list-item --> xpl-divider
  xpl-slideout --> xpl-divider
  style xpl-divider fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*