@extends('layouts.app') @section('styles') {{-- Style Here --}} @vite(['resources/scss/light/assets/components/list-group.scss']) @vite(['resources/scss/dark/assets/components/list-group.scss']) @endsection @section('content')
Basic Active Links Icons Images Badges Checkbox Tabbed Interfaces

Basic

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group ">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

Active

Add .active to a .list-group-item to indicate the current active selection.

  • An item
  • An active item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group ">
<li class="list-group-item">An item</li>
<li class="list-group-item active">An active item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>

Icons

  • Messages

    4 New Messages

  • Locations

    25 New Travel Locations

  • Flexible

    Customization Flexibility

<!-- Icons -->
<ul class="list-group list-group-icons-meta">
<li class="list-group-item ">
<div class="media">
<div class="d-flex me-3">
<svg> ... </svg>
</div>
<div class="media-body">
<h6 class="tx-inverse">Messages</h6>
<p class="mg-b-0">4 New Messages</p>
</div>
</div>
</li>
<li class="list-group-item  active">
<div class="media">
<div class="d-flex me-3">
<svg> ... </svg>
</div>
<div class="media-body">
<h6 class="tx-inverse">Locations</h6>
<p class="mg-b-0">25 New Travel Locations</p>
</div>
</div>
</li>
<li class="list-group-item ">
<div class="media">
<div class="d-flex me-3">
<svg> ... </svg>
</div>
<div class="media-body">
<h6 class="tx-inverse">Flexible</h6>
<p class="mg-b-0">Customization Flexibility</p>
</div>
</div>
</li>
</ul>

Images

  • avatar
    Luke Ivory

    Project Lead

  • avatar
    Sonia Shaw

    Web Designer

  • avatar
    Dale Butler

    Developer

<!-- Images -->
<ul class="list-group list-group-media">
<li class="list-group-item ">
<div class="media">
<div class="me-3">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-1.jpeg')}}" class="img-fluid rounded-circle">
</div>
<div class="media-body">
<h6 class="tx-inverse">Luke Ivory</h6>
<p class="mg-b-0">Project Lead</p>
</div>
</div>
</li>
<li class="list-group-item  active">
<div class="media">
<div class="me-3">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-2.jpeg')}}" class="img-fluid rounded-circle">
</div>
<div class="media-body">
<h6 class="tx-inverse">Sonia Shaw</h6>
<p class="mg-b-0">Web Designer</p>
</div>
</div>
</li>
<li class="list-group-item  ">
<div class="media">
<div class="me-3">
<img alt="avatar" src="{{Vite::asset('resources/images/profile-3.jpeg')}}" class="img-fluid rounded-circle">
</div>
<div class="media-body">
<h6 class="tx-inverse">Dale Butler</h6>
<p class="mg-b-0">Developer</p>
</div>
</div>
</li>
</ul>

Badges

  • A list item 14
  • A second list item 2
  • A third list item 1 
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

Checkbox

<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>

Tabbed Interfaces

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
@endsection @section('scripts') {{-- Scripts Here --}} @endsection