Components

List group

Basic example

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

Small

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

Active items

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

Disabled items

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

Links and buttons

Links

Cras justo odioDapibus ac facilisis inMorbi leo risus

Buttons

Ripple

Cras justo odioDapibus ac facilisis inMorbi leo risus

No borders

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

Numbered

  1. Cras justo odio
  2. Dapibus ac facilisis in
  3. Morbi leo risus

Numbered list group with custom content

  1. SubheadingCras justo odio
    14
  2. SubheadingDapibus ac facilisis in
    14
  3. SubheadingMorbi leo risus
    14

Horizontal

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

Contextual classes

  • A simple default list group item
  • 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

Action

  • A simple default list group item
  • 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

Badges

  • Cras justo odio
    14
  • Dapibus ac facilisis in
    2
  • Morbi leo risus
    1

Custom content

  • John Doe
    john.doe@gmail.com
    Active
  • Alex Rayalex.ray@gmail.com
    Onboarding
  • Kate Huningtonkate.hunington@gmail.com
    Awaiting

Checkboxes

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

Checkboxes with label

JavaScript Behavior

HomeProfileMessagesSettings

Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi, dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste assumenda aliquam.

Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi, dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste assumenda aliquam.

Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi, dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste assumenda aliquam.

Et perspiciatis facilis labore natus at necessitatibus. Sequi earum qui illum reiciendis? Excepturi, dicta consequuntur, voluptas aspernatur, quis laboriosam exercitationem quasi officia tempore iste assumenda aliquam.

Additional examples

Images

  • John Doe
    john.doe@gmail.com
    Active
  • Alex Rayalex.ray@gmail.com
    Onboarding
  • Kate Huningtonkate.hunington@gmail.com
    Awaiting

Headings

Marketing Team
  • John Doe
    john.doe@gmail.com
    Active
  • Alex Rayalex.ray@gmail.com
    Onboarding
  • Kate Huningtonkate.hunington@gmail.com
    Awaiting
Design Team
  • John Doe
    john.doe@gmail.com
    Active
  • Alex Rayalex.ray@gmail.com
    Onboarding
  • Kate Huningtonkate.hunington@gmail.com
    Awaiting

Action buttons

  • John Doe
    john.doe@gmail.com
  • Alex Rayalex.ray@gmail.com
  • Kate Huningtonkate.hunington@gmail.com

CTA

  • Our company starts its operations

    11 March 2020

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit necessitatibus adipisci, ad alias, voluptate pariatur officia repellendus repellat inventore fugit perferendis totam dolor voluptas et corrupti distinctio maxime corporis optio?

  • First customer

    19 March 2020

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit necessitatibus adipisci, ad alias, voluptate pariatur officia repellendus repellat inventore fugit perferendis totam dolor voluptas et corrupti distinctio maxime corporis optio?

  • Our team exceeds 10 people

    24 June 2020

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit necessitatibus adipisci, ad alias, voluptate pariatur officia repellendus repellat inventore fugit perferendis totam dolor voluptas et corrupti distinctio maxime corporis optio?

Grid list

John Doe
john.doe@gmail.com
Alex Ray
alex.ray@gmail.com
Kate Hunington
kate.hunington@gmail.com
John Doe
john.doe@gmail.com
Alex Ray
alex.ray@gmail.com
Kate Hunington
kate.hunington@gmail.com

Complex grid list

John Doe
john.doe@gmail.com
Active
Alex Ray
alex.ray@gmail.com
Onboarding
Kate Hunington
kate.hunington@gmail.com
Awaiting

Project Footer

Project Title

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.