logo
v2.6.3

List View

Display a list of items. The list view component mimicks the <ul><li>...</li></ul> tags. The component makes use of two tags to render the list of items. Just like when using a <li></li>, the user is completely in charge of what content goes in there. All the list view component does is draw fine lines between your items. Every top level block element is flexed into its own column. The first top level block element has no left padding so you'll need to factor that into your design when using this component.

  • /assets/images/me.jpeg
    Michael K. Ocansey
    mike@bladewindui.com
  • https://bladewindui.com/vendor/bladewind/images/avatar.png
    Anonymous Jackson
    fake@person.com
  • /assets/images/issah.jpg
    Catherine Gerald
    kate.gee@gmail.com
  • /assets/images/audrey.jpeg
    Audrey Munyiva
    audrey@munyiva.com
        
            <x-bladewind::card>

                <x-bladewind::list-view>

                    <x-bladewind::list-item>

                        <x-bladewind::avatar
                            size="small"
                            image="/path/to/the/image/file" />
                        <div class="ml-3">
                            <div class="text-sm font-medium text-slate-900">
                                Michael K. Ocansey
                            </div>
                            <div class="text-sm text-slate-500 truncate">
                                kabutey@gmail.com
                            </div>
                        </div>

                    </x-bladewind::list-item>

                    <x-bladewind::list-item>
                        <x-bladewind::avatar
                            size="small"
                            image="/path/to/the/image/file"
                        <div class="ml-3">
                            <div class="text-sm font-medium text-slate-900">
                                Michael K. Ocansey
                            </div>
                            <div class="text-sm text-slate-500 truncate">
                                kabutey@gmail.com
                            </div>
                        </div>
                    </x-bladewind::list-item>
                    ...
                </x-bladewind::list-view>

            </x-bladewind::card>
        
    
The <x-bladewind::list-item> component creates a flex container.

By default the list view component sits on a white background. You can remove this by setting the transparent="true" attribute. You can then set a different background colour using the class attribute.

  • /assets/images/me.jpeg
    Michael K. Ocansey
    mike@bladewindui.com
  • https://bladewindui.com/vendor/bladewind/images/avatar.png
    Anonymous Jackson
    fake@person.com
  • /assets/images/issah.jpg
    Catherine Gerald
    kate.gee@gmail.com
  • /assets/images/audrey.jpeg
    Audrey Munyiva
    audrey@munyiva.com
        
            <x-bladewind::list-view transparent="true">

                <x-bladewind::list-item>

                    <x-bladewind::avatar
                        size="small"
                        image="/path/to/the/image/file" />
                    <div class="ml-3">
                        <div class="text-sm font-medium text-slate-900">
                            Michael K. Ocansey
                        </div>
                        <div class="text-sm text-slate-500 truncate">
                            kabutey@gmail.com
                        </div>
                    </div>

                </x-bladewind::list-item>
                ...
            </x-bladewind::list-view>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the List View component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
transparent false Should the background of the component be transparent or placed on a white background.
true false
compact false If set to true, the spacing between the list items are reduced from 16px to 8px.
true false
class blank Any additional css you wish to add.

List View with all attributes defined

        
            <x-bladewind::list-view compact="true" transparent="true" class="bg-yellow-50">

                <x-bladewind::list-item>

                    <x-bladewind::avatar
                        size="small"
                        image="/path/to/the/image/file" />
                    <div class="ml-3">
                        <div class="text-sm font-medium text-slate-900">
                            Michael K. Ocansey
                        </div>
                        <div class="text-sm text-slate-500 truncate">
                            kabutey@gmail.com
                        </div>
                    </div>

                </x-bladewind::list-item>
                ...
            </x-bladewind::list-view>
        
    
The source file for this component is available in resources > views > components > bladewind > list-view.blade.php and resources > views > components > bladewind > list-item.blade.php