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.

        
            <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>
        
    

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.

• 
  Michael K. Ocansey

  mike@bladewindui.com
• 
  Anonymous Jackson

  fake@person.com
• 
  Catherine Gerald

  kate.gee@gmail.com
• 
  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.

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>