Lists

A list presents a group of related information in a scannable format.

List Items

Used to house elements available within a list

HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <i class="fa-regular fa-envelope"></i>
      <strong>Item</strong>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <span class="badge badge-primary">Label</span>
      <strong>Item</strong>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <strong>Item</strong>
    <i class="fa-solid fa-chevron-right"></i>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <strong>Item</strong>
    <a href="#" class="internal-link">Internal Link</a>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <strong>Item</strong>
    <a href="#" class="btn btn-primary">Learn More</a>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
      <strong>Item</strong>
      <span class="badge badge-primary">Label</span>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <i class="fa-regular fa-envelope"></i>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
      </div>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <span class="badge badge-primary">Label</span>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
      </div>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
    </div>
    <i class="fa-solid fa-chevron-right"></i>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
    </div>
    <a href="#" class="internal-link">Internal Link</a>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
    </div>
    <a href="#" class="btn btn-primary">Learn More</a>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
    </div>
    <span class="badge badge-primary">Label</span>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <i class="fa-regular fa-envelope"></i>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
        <small>Supplementary Text</small>
      </div>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div class="list-content-text">
      <span class="badge badge-primary">Label</span>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
        <small>Supplementary Text</small>
      </div>
    </div>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
      <small>Supplementary Text</small>
    </div>
    <i class="fa-solid fa-chevron-right"></i>
  </li>
</ul>
HTML
<ul class="list-content">
  <li>
    <div>
      <strong>Item</strong>
      <span>Secondary Text</span>
      <small>Supplementary Text</small>
    </div>
    <a href="#" class="internal-link">Internal Link</a>
  </li>
</ul>
HTML
  <ul class="list-content">
    <li>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
        <small>Supplementary Text</small>
      </div>
      <a href="#" class="btn btn-primary">Learn More</a>
    </li>
  </ul>
HTML
  <ul class="list-content">
    <li>
      <div>
        <strong>Item</strong>
        <span>Secondary Text</span>
        <small>Supplementary Text</small>
      </div>
      <span class="badge badge-primary">Label</span>
    </li>
  </ul>

Lists

Used to present a group of related information in a scannable format.

Unordered Lists

HTML
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>
    Item 4
    <ul>
      <li>Item 4.1</li>
      <li>Item 4.2</li>
      <li>Item 4.3</li>
      <li>
        Item 4.4
        <ul>
          <li>Item 4.4.1</li>
          <li>Item 4.4.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


Ordered Lists

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
    1. Item 4.1
    2. Item 4.2
    3. Item 4.3
    4. Item 4.4
      1. Item 4.4.1
      2. Item 4.4.2
HTML
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>
    Item 4
    <ol>
      <li>Item 4.1</li>
      <li>Item 4.2</li>
      <li>Item 4.3</li>
      <li>
        Item 4.4
        <ol>
          <li>Item 4.4.1</li>
          <li>Item 4.4.2</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>



Doctor Results List

HTML
<ul class="doctor-results-list">
  <li class="doctor-results-list-item">
    <div class="card-doctor">
      <div class="card-doctor-number"><h3>1.</h3></div>
      <div class="card-doctor-personal-info">
        <div class="card-doctor-name">
          <h3>Clark II, Carlos S MD</h3>
          <span class="badge badge-green">
            <i class="fa-regular fa-check"></i>
            Accepting New Patients
          </span>
        </div>
        <div class="card-doctor-specialty">
          <p class="quote font-brand text-teal">Family Practice</p>
        </div>
        <div class="card-doctor-location">
          <p><i class="fa-regular fa-location-dot"></i><a href="https://maps.app.goo.gl/x93rXzkCun3nVbes9" target="_blank">201 Doctors Dr. Dothan (Houston), AL 36301-2949</a></p>
          <p><i class="fa-regular fa-phone"></i><a href="tel:3347946611">(334) 794-6611</a></p>
        </div>
        <a href="mailto:" class="inline-link"><i class="fa-regular fa-envelope text-teal-light"></i> Email a Copy</a>
      </div>
      <div class="card-doctor-skills">
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <i class="fa-regular fa-hospital text-teal-light"></i> Networks: 
          </div>
          <p>Commercial (Open Panel)</p>
        </div>
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.04375 9.04683L6.45625 7.3735L6.475 7.3535C7.5625 6.06016 8.3375 4.5735 8.79375 3.00016H10.625V1.66683H6.25V0.333496H5V1.66683H0.625V2.9935H7.60625C7.1875 4.28016 6.525 5.50016 5.625 6.56683C5.04375 5.88016 4.5625 5.12683 4.18125 4.3335H2.93125C3.3875 5.42016 4.0125 6.44683 4.79375 7.3735L1.6125 10.7202L2.5 11.6668L5.625 8.3335L7.56875 10.4068L8.04375 9.04683ZM11.5625 5.66683H10.3125L7.5 13.6668H8.75L9.45 11.6668H12.4188L13.125 13.6668H14.375L11.5625 5.66683ZM9.925 10.3335L10.9375 7.44683L11.95 10.3335H9.925V10.3335Z" fill="#66C7C3"/>
            </svg>
            Speaks:
          </div>
          <p>
            English
          </p>
        </div>
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <i class="fa-regular fa-route text-teal-light"></i>
            Distance:  
          </div>
          <p>
            0.5 miles
          </p>
        </div>
      </div>
    </div>
  </li>
  <li class="doctor-results-list-item">
    <div class="card-doctor">
      <div class="card-doctor-number"><h3>2.</h3></div>
      <div class="card-doctor-personal-info">
        <div class="card-doctor-name">
          <h3>Gould-Hartline, Lane M CRNP</h3>
          <span class="badge badge-red">
            <i class="fa-solid fa-xmark"></i>
            Not Accepting New Patients
          </span>
        </div>
        <div class="card-doctor-specialty">
          <p class="quote font-brand text-teal">Neurology, Psychiatry</p>
        </div>
        <div class="card-doctor-location">
          <p><i class="fa-regular fa-location-dot"></i><a href="https://maps.app.goo.gl/LwasT4owsxW7nQ4v8" target="_blank">2205 Cahaba Valley Dr Birmingham (Shelby), AL 35242-2602</a></p>
          <p><i class="fa-regular fa-phone"></i><a href="tel:2059681227">(205) 968-1227</a></p>
        </div>
        <a href="mailto:" class="inline-link"><i class="fa-regular fa-envelope text-teal-light"></i> Email a Copy</a>
      </div>
      <div class="card-doctor-skills">
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <i class="fa-regular fa-hospital text-teal-light"></i> Networks: 
          </div>
          <p>Baptist Montgomery</p>
          <p>Employees</p> 
          <p>Commercial (Open Panel)</p>
          <p>Medical West</p>
        </div>
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.04375 9.04683L6.45625 7.3735L6.475 7.3535C7.5625 6.06016 8.3375 4.5735 8.79375 3.00016H10.625V1.66683H6.25V0.333496H5V1.66683H0.625V2.9935H7.60625C7.1875 4.28016 6.525 5.50016 5.625 6.56683C5.04375 5.88016 4.5625 5.12683 4.18125 4.3335H2.93125C3.3875 5.42016 4.0125 6.44683 4.79375 7.3735L1.6125 10.7202L2.5 11.6668L5.625 8.3335L7.56875 10.4068L8.04375 9.04683ZM11.5625 5.66683H10.3125L7.5 13.6668H8.75L9.45 11.6668H12.4188L13.125 13.6668H14.375L11.5625 5.66683ZM9.925 10.3335L10.9375 7.44683L11.95 10.3335H9.925V10.3335Z" fill="#66C7C3"/>
            </svg>
            Speaks:
          </div>
          <p>
            English
          </p>
        </div>
        <div class="card-doctor-skill">
          <div class="card-doctor-skill-label">
            <i class="fa-regular fa-route text-teal-light"></i>
            Distance:  
          </div>
          <p>
            0.5 miles
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>



Benefits List


HTML
<ul class="benefits-list">
  <li class="benefits-list-item">
    <div class="card-benefits">
      <div class="card-benefits-image">
        <img src="img/benefitsList/image.png" alt="">
      </div>
      <div class="card-benefits-desc">
        <div class="card-benefits-text">
          <p class="card-benefits-label small">Benefits</p>
          <h3 class="card-benefits-title">Preventive Care</h3>
          <p>
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
          </p>
        </div>
        <a href="#" class="internal-link">Internal Link</a>
      </div>
    </div>
  </li>
</ul>