---
title: Divider
lang: en-US
---

# Divider

The dividing line that separates the content.

## Basic usage

Divide the text of different paragraphs.

:::demo

divider/basic-usage

:::

## Custom content

You can customize the content on the divider line.

:::demo

divider/custom-content

:::

## dashed line

You can set the style of divider.

:::demo

divider/line-dashed

:::

## Vertical divider

:::demo

divider/vertical-divider

:::

## Divider Attributes

| Attribute        | Description                               | Type   | Accepted Values                                                                   | Default    |
| ---------------- | ----------------------------------------- | ------ | --------------------------------------------------------------------------------- | ---------- |
| direction        | Set divider's direction                   | string | horizontal / vertical                                                             | horizontal |
| border-style     | Set the style of divider                  | string | [CSS/border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | solid      |
| content-position | customize the content on the divider line | String | left / right / center                                                             | center     |