List Group

List helps to combine cards and content playlist.

content

Demo

List group flush

<div class="row-inner mw-1200 col-12">
  <div id="section1-list" class="module list-group list-group-flush">
    <ul class="list-group-wrap title-right">
      <li class="list-group-item clearfix">
        <div class="list-group-item-inner">
          <h4 class="list-group-item-title">
            <a href="#">Advantech Connect Online Partner Conference to Promote  Edge-to-Cloud Partnerships and AIoT Solutions for Smart City Services</a>
          </h4>
        <div class="list-group-item-img">
          <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
        </div>
        <div class="list-group-item-text">
          <p>Advantech is excited to launch its Advantech Connect Online Partner Conference.</p>
          <h5>03/19/2021</h5>
        </div>
      </div>
    </li>
    <li class="list-group-item clearfix">
        <div class="list-group-item-inner">
          <h4 class="list-group-item-title">
            <a href="#">Advantech Launches AIM-75S Industrial-Grade Tablet with Android 10 and Certified for Google Mobile Services</a>
          </h4>
        <div class="list-group-item-img">
          <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
        </div>
        <div class="list-group-item-text">
          <p>Advantech, a leading mobile computing platform provider.</p>
          <h5>03/29/2021</h5>
        </div>
      </div>
    </li>
    <li class="list-group-item clearfix">
        <div class="list-group-item-inner">
          <h4 class="list-group-item-title">
            <a href="#">Advantech’s DLT-V72 Facelift Series VMTs Now Support Android 9 with OTA Updates for Enhanced Device Management</a>
          </h4>
        <div class="list-group-item-img">
          <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
        </div>
        <div class="list-group-item-text">
          <p>Advantech is pleased to announce that its DLT-V72 Facelift series of rugged vehicle-mounted terminals.</p>
          <h5>02/22/2021</h5>
        </div>
      </div>
    </li>
  </ul>
 </div>
</div>

Playlist with card.

Image name

Lorem ipsum dolor sited amet

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Title

<div id="adv-content-video-playlist">
  <div class="row w-100">
    <div class="row-inner col-md-8"> 
      <div class="module adv-card card">
      <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
        <div class="card-wrapper">
          <div class="card-img-wrap">
            <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
          </div>
          <div class="card-body">
            <h3 class="card-info-title">Lorem ipsum dolor sited amet</h3>
            <p class="card-text">...</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row-inner col-md-4 mt-md-3">
      <div class="row w-100 border-blue border-bottom-3">
        <div class="row-inner adv-col-heading">
          <div class="module col-heading">
            <h3>Title</h3>
          </div>
        </div>
      </div>
      <div class="module adv-list-group list-group list-group-flush">
        <ul class="list-group-wrap">
          <li class="list-group-item clearfix">
            <div class="list-group-item-inner">
              <h4 class="list-group-item-title"><a href="#">Lorem ipsum dolor sit amet, consectetu</a></h4>
              <div class="list-group-item-img">
                <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
              </div>
              <div class="list-group-item-text">
                <h5>2018/07/09</h5>
              </div>
            </div>
          </li>
          <li class="list-group-item clearfix">
            <div class="list-group-item-inner">
              <h4 class="list-group-item-title"><a href="#">Lorem ipsum dolor sit amet, consectetu</a></h4>
              <div class="list-group-item-img">
                <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
              </div>
              <div class="list-group-item-text">
                <h5>2018/07/09</h5>
              </div>
            </div>
          </li>
          <li class="list-group-item clearfix">
            <div class="list-group-item-inner">
              <h4 class="list-group-item-title"><a href="#">Lorem ipsum dolor sit amet, consectetu</a></h4>
              <div class="list-group-item-img">
                <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-thumbnail" alt="Image name">
              </div>
              <div class="list-group-item-text">
                <h5>2018/07/09</h5>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/card.css">

content