Divider
Divider Shows a label that's centered between two lines. It can either be
vertical or horizontal.
content
OR
content
Code Example
<Card class="grid flex-grow w-full h-48 bg-base-300 rounded-box place-items-center">
content
</Card>
<Divider vertical>OR</Divider>
<Card class="grid flex-grow w-full h-48 bg-base-300 rounded-box place-items-center">
content
</Card>Components
Divider is a standalone component.
Divider
Divider has two props:
| Prop | Type | Description |
|---|---|---|
vertical | boolean | Sets orientation to vertical default: true |
horizontal | boolean | Sets orientation to horizontal. |
Horizontal
content
OR
content
Code Example
<Card class="grid flex-grow h-48 bg-base-300 rounded-box place-items-center">
content
</Card>
<Divider horizontal>OR</Divider>
<Card class="grid flex-grow h-48 bg-base-300 rounded-box place-items-center">
content
</Card>