Divider

<div class="max-w-sm grid gap-4 p-6 rounded-large bg-background ring ring-default-900/10">
    <div class="flex gap-4">
        <LumexAvatar Name="Rachel Green" Class="shrink-0" />
        <div class="space-y-1">
            <h4 class="font-semibold text-small">Coffee Catch-up?</h4>
            <p class="text-small 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">
        <LumexAvatar Name="Sarah Salvatore" Class="shrink-0" />
        <div class="space-y-1">
            <h4 class="font-semibold text-small">Welcome to the Team!</h4>
            <p class="text-small text-foreground-500 line-clamp-2">
                Hey Sarah,
                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>

@using LumexUI.Shared.Icons

<div class="flex h-8 px-2 py-1 space-x-2 items-center bg-background ring ring-default-900/10 rounded-sm">
    <AlignLeftIcon Size="20" />
    <AlignCenterIcon Size="20" />
    <AlignRightIcon Size="20" />
    <LumexDivider Orientation="@Orientation.Vertical" />
    <BoldIcon Size="20" />
</div>

<ul class="flex h-10 p-1 space-x-4 items-center">
    <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-opacity-divider: 50%" />
    <li class="font-medium text-danger">Breaking News</li>
</ul>