Prism Docs

Divider

A horizontal or vertical line for partitioning content.

Basic Usage

Dividers are used to separate content blocks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<prism-divider></prism-divider>

With Text

Dividers can contain text, positioned left, right, or center.

<prism-divider text="Text"></prism-divider>
<prism-divider orientation="left" text="Left Text"></prism-divider>
<prism-divider orientation="right" text="Right Text"></prism-divider>

With Template

Dividers can use TemplateRef for complex content like icons.

<!-- Template Ref -->
<ng-template #iconContent>
    <prism-icon name="star-fill" class="text-warning-500"></prism-icon>
</ng-template>
<prism-divider [text]="iconContent"></prism-divider>

<!-- Complex Template -->
<ng-template #customContent>
    <div class="flex items-center gap-2 text-primary-600 font-medium">
        <prism-icon name="flashlight-fill"></prism-icon>
        <span>Power Up</span>
    </div>
</ng-template>
<prism-divider [text]="customContent" [dashed]="true"></prism-divider>

Vertical

A vertical divider can be used between inline elements.

Link 1Link 2Link 3
<span>Link 1</span>
<prism-divider type="vertical"></prism-divider>
<span>Link 2</span>

API Data

NameTypeDefaultDescription
type'horizontal' | 'vertical''horizontal'The orientation of the divider.
orientation'left' | 'right' | 'center''center'The position of the text.
dashedbooleanfalseWhether the divider is dashed.
textstring | TemplateRef<unknown>nullText or content to display within the divider line.
dashedbooleanfalseWhether the divider is dashed.