Django List Component

List renders a styled <ul> container with c-lb.list.row for each item. Use it for settings panels, feature lists, or any vertical list that needs consistent spacing and optional dividers.

Basic List

Preview

1

First item
2

Second item
3

Third item

Code

<c-lb.list class="bg-base-100 rounded-box shadow-md">
    <c-lb.list.row>
        <div>1</div>
        <div>First item</div>
    </c-lb.list.row>
    <c-lb.list.row>
        <div>2</div>
        <div>Second item</div>
    </c-lb.list.row>
    <c-lb.list.row>
        <div>3</div>
        <div>Third item</div>
    </c-lb.list.row>
</c-lb.list>

With Images

Preview

Featured products
Classic Sneakers

Comfortable everyday shoes with durable rubber sole.

$89.00
Vintage Watch

Timeless design with leather strap and mineral crystal.

$145.00
Running Shoes

Lightweight and breathable for your daily runs.

$120.00

Code

{% load static %}
<c-lb.list class="bg-base-100 rounded-box shadow-md">
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide uppercase">Featured products</li>
    <c-lb.list.row>
        <img class="size-14 rounded-lg object-cover" src="https://images.unsplash.com/photo-1449505278894-297fdb3edbc1?q=80&w=112&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Classic sneakers" />
        <div>
            <div class="font-semibold">Classic Sneakers</div>
            <div class="text-sm opacity-70">Comfortable everyday shoes with durable rubber sole.</div>
        </div>
        <p class="font-medium">$89.00</p>
    </c-lb.list.row>
    <c-lb.list.row>
        <img class="size-14 rounded-lg object-cover" src="https://images.unsplash.com/photo-1580658001207-ccd9b884191c?q=80&w=112&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Vintage watch" />
        <div>
            <div class="font-semibold">Vintage Watch</div>
            <div class="text-sm opacity-70">Timeless design with leather strap and mineral crystal.</div>
        </div>
        <p class="font-medium">$145.00</p>
    </c-lb.list.row>
    <c-lb.list.row>
        <img class="size-14 rounded-lg object-cover" src="{% static 'lbdocs/img/stock/shoe.jpg' %}" alt="Running shoes" />
        <div>
            <div class="font-semibold">Running Shoes</div>
            <div class="text-sm opacity-70">Lightweight and breathable for your daily runs.</div>
        </div>
        <p class="font-medium">$120.00</p>
    </c-lb.list.row>
</c-lb.list>

API Reference

`c-lb.list`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
as	ul div ol	`ul`	No	HTML tag to use for the list container

Slot Name	Description
default	List content using list.row components

`c-lb.list.row`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
as	li div	`li`	No	HTML tag to use for the row element

Slot Name	Description
default	Row content - multiple children arranged horizontally (second child grows by default)