Components

Divider

The divider component creates a visual separator to structure content in your layout.
Static SSR Source Styles source

Usage

The divider component is used to create a simple visual separation between elements.

RG

Coffee Catch-up?

Hi Rachel, Hope you’re doing well! Are you free for a quick coffee catch-up later this week? It’s been a while, and I’d love to catch up on things.

SC

Welcome to the Team!

Hey Sara, Welcome aboard! We’re excited to have you with us. Let me know if you need anything while settling in. Looking forward to working together! 

<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring-1 ring-black/5 shadow-md">
    <div class="flex gap-4">
        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-violet-200 text-black">
            <span class="font-semibold text-lg">RG</span>
        </div>
        <div class="space-y-1">
            <h4 class="font-semibold">Coffee Catch-up?</h4>
            <p class="text-sm text-foreground-500 line-clamp-2">
                Hi Rachel,
                Hope you’re doing well! Are you free for a quick coffee catch-up later this week?
                It’s been a while, and I’d love to catch up on things.
            </p>
        </div>
    </div>
    <LumexDivider />
    <div class="flex gap-4">
        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-sky-200 text-black">
            <span class="font-semibold text-lg">SC</span>
        </div>
        <div class="space-y-1">
            <h4 class="font-semibold">Welcome to the Team!</h4>
            <p class="text-sm text-foreground-500 line-clamp-2">
                Hey Sara,
                Welcome aboard! We’re excited to have you with us. 
                Let me know if you need anything while settling in. 
                Looking forward to working together!
            </p>
        </div>
    </div>
</div>

Orientation

The divider component supports both horizontal and vertical orientations. You can switch it to vertical when needed to separate content vertically. Use the Orientation parameter. 

<div class="flex h-8 p-1 space-x-2 items-center bg-white ring-1 ring-black/5 rounded shadow-md">
    <LumexIcon Icon="@Icons.Rounded.FormatAlignLeft" />
    <LumexIcon Icon="@Icons.Rounded.FormatAlignCenter" />
    <LumexIcon Icon="@Icons.Rounded.FormatAlignRight" />
    <LumexDivider Orientation="@Orientation.Vertical" />
    <LumexIcon Icon="@Icons.Rounded.FormatBold" />
</div>

Custom Styles

You can customize the divider component by passing any Tailwind CSS classes to the component's Class and/or Style parameters.

  • World
  • Economics
  • Sports
  • Art
  • Breaking News
<ul class="flex h-10 p-1 space-x-4 items-center bg-zinc-50">
    <li>World</li>
    <LumexDivider Orientation="@Orientation.Vertical" />
    <li>Economics</li>
    <LumexDivider Orientation="@Orientation.Vertical" />
    <li>Sports</li>
    <LumexDivider Orientation="@Orientation.Vertical" />
    <li>Art</li>
    <LumexDivider Orientation="@Orientation.Vertical"
                  Class="w-0.5"
                  Style="--lumex-divider: var(--lumex-danger); --lumex-divider-opacity: .5" />
    <li class="font-semibold text-danger">Breaking News</li>
</ul>

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙