Lists

  • First item
  • Second item
  • Third item
CODE
html 
<ul class="list-group">
  <li class="list-group-item active">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Color options

  • Success
  • Primary
  • Danger
CODE
html 
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
</ul>
First item Second item Third item
CODE
html 
<div class="list-group">
  <a href="javascript:" class="list-group-item list-group-item-action">First item</a>
  <a href="javascript:" class="list-group-item list-group-item-action">Second item</a>
  <a href="javascript:" class="list-group-item list-group-item-action">Third item</a>
</div>

With Ripple

Ripple effect requires Javascript. Click to view Javascript.
Learn more about Ripple.
First item Second item Third item
  • Danger
  • Warning
  • Success
CODE
html 
<div class="list-group">
  <a href="javascript:" class="list-group-item list-group-item-action">
    <span class="ripple-surface"></span>First item
  </a>
  <a href="javascript:" class="list-group-item list-group-item-action">
    <span class="ripple-surface"></span>Second item
  </a>
  <a href="javascript:" class="list-group-item list-group-item-action">
    <span class="ripple-surface"></span>Third item
  </a>
</div>
html 
<ul class="list-group">
  <li class="list-group-item list-group-item-danger">
    <span class="ripple-surface"></span>Danger
  </li>  
  <li class="list-group-item list-group-item-warning">
    <span class="ripple-surface"></span>Warning
  </li>
  <li class="list-group-item list-group-item-success">
    <span class="ripple-surface"></span>Success
  </li>
</ul>

With Checkbox

CODE
html 
<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label stretched-link" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label stretched-link" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label stretched-link" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

With Radio

CODE
html 
<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label stretched-link" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label stretched-link" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item list-group-item-action">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label stretched-link" for="thirdRadio">Third radio</label>
  </li>
</ul>

With Icon

  • Love It
  • Like It
  • Hate It
CODE
html 
<ul class="list-group">
  <li class="list-group-item d-flex gap-3">
    <i class="bi bi-heart-fill"></i>
    Love It
  </li>
  <li class="list-group-item d-flex gap-3">
    <i class="bi bi-hand-thumbs-up-fill"></i>
    Like It
  </li>
  <li class="list-group-item d-flex gap-3">
    <i class="bi bi-hand-thumbs-down-fill"></i>
    Hate It
  </li>
</ul>

With secondary text

  • Line item Secondary text
  • Line item Secondary text
  • Line item Secondary text
CODE
html 
<ul class="list-group">
  <li class="list-group-item">
    Line item
    <small class="d-block text-muted">Secondary text</small>
  </li>
  <li class="list-group-item">
    Line item
    <small class="d-block text-muted">Secondary text</small>
  </li>
  <li class="list-group-item">
    Line item
    <small class="d-block text-muted">Secondary text</small>
  </li>
</ul>

With Icon and secondary text

  • Landscape 29 Aug 2018
  • Wildlife 18 Aug 2018
  • Fashion 22 Aug 2018
CODE
html 
<ul class="list-group">
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span>
      Landscape
      <small class="d-block text-muted">29 Aug 2018</small>
    </span>
  </li>
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span>
      Wildlife
      <small class="d-block text-muted">18 Aug 2018</small>
    </span>
  </li>
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span>
      Fashion
      <small class="d-block text-muted">22 Aug 2018</small>
    </span>
  </li>
</ul>

With Icons, secondary text and divider

  • Landscape 29 Aug 2018
  • Wildlife 18 Aug 2018
  • Fashion 22 Aug 2018
  • 4K 21 Aug 2018
  • HD 15 Aug 2018
CODE
html 
<ul class="list-group">
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span class="flex-grow-1">
      Landscape
      <small class="d-block text-muted">29 Aug 2018</small>
    </span>
    <i class="bi bi-info-circle-fill"></i>
  </li>
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span class="flex-grow-1">
      Wildlife
      <small class="d-block text-muted">18 Aug 2018</small>
    </span>
    <i class="bi bi-info-circle-fill"></i>
  </li>
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span class="flex-grow-1">
      Fashion
      <small class="d-block text-muted">22 Aug 2018</small>
    </span>
    <i class="bi bi-info-circle-fill"></i>
  </li>

  <li class="list-group-item list-divider"></li>

  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span class="flex-grow-1">
      4K
      <small class="d-block text-muted">21 Aug 2018</small>
    </span>
    <i class="bi bi-info-circle-fill"></i>
  </li>
  <li class="list-group-item d-flex align-items-center gap-3">
    <i class="bi bi-folder-fill"></i>
    <span class="flex-grow-1">
      HD
      <small class="d-block text-muted">15 Aug 2018</small>
    </span>
    <i class="bi bi-info-circle-fill"></i>
  </li>
</ul>

Javascript for ripple

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new mdc.ripple.MDCRipple(s)
})
Material Style Logo
Theme Builder
Personalize Material Style to reflect your product's brand identity.