Usage
The divider component is used to create a simple visual separation between elements.
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.
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.