@extends('layouts.master') @section('title')Unikit @endsection @section('body-start') @endsection @section('content') @section('breadcrumb') @component('components.breadcrumb') @slot('li_1') UI Kit @endslot @slot('title') Lists @endslot @endcomponent @endsection

Basic Example

List groups are a flexible and powerful component for displaying a series of content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Disabled

Active items

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac

Links and buttons

Uses <a> or <button>s to create actionable list group itemswith hover and active states by adding .list-group-item-action.

Link Link disabled

Flush

Add .list-group-flush to remove some borders and rounded corners.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Vestibulum at eros

Horizontal

Add .list-group-horizontal to change the layout of list group items from vertical

  • Cras justo
  • Dapibus
  • Morbi leo

With badges

Add badges to any list group item to show unread counts, activity.

  • Cras justo odio
    4
  • New Notifications
    New
  • Payment Successfull
    Successfully
  • Payment pending
    Pending
  • Good Morning!
    1

Contextual classes

Use contextual classes to style list items with a stateful background and color.

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
@endsection @section('script') @endsection @section('body-end') @endsection