Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

List Group

Group elements together

Tag: x-turbine-ui-list-group 
<x-turbine-ui-list-group>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="brand"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="primary"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="secondary"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="success"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="warning"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>
 
<x-turbine-ui-list-group
    variant="danger"
>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>">Home</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>">About</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>">Contact</x-turbine-ui-nav-link>
    <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>">Blog</x-turbine-nav-ui-link>
</x-turbine-ui-list-group>

Attributes

Name Type Options Description
accent boolean Adds an accent
border boolean Adds a border
divide boolean Adds a divide between elements
hollow boolean Removes background colour
ring boolean Adds a ring
rounded boolean Adds a rounded corner
shadow boolean Adds a shadow
variant string A variant is like a colour palette
Theme