List | UW College of Engineering

Lists organize information into sections that are easy to scan and follow.

Basic unordered list Basic ordered list Flush list List with icons Two-column list with icons

Basic unordered list

Use unordered lists when the order of the items does not matter.

List item 1
List item 2
List item 3

Code


<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Basic ordered list

Use ordered lists when the items need to be in a sepcific order.

List item 1
List item 2
List item 3

Code


<ul class="list-group list-group-flush">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Flush list

Use flush lists when you want a clean and streamlined design without bullet points.

Item 1
Item 2
Item 3

Live example

Code


<div class="list-group">
  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 1</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>
  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 2</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>

  <div class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h2 class="h3 mt-0 mb-1">Heading 3</h2>
      <p class="font-weight-bold">Secondary info</p>
    </div>
    <p class="mt-0 mb-1">List item body text.</p>
  </div>
</div>

List with icons

Construction engineering

Offering about 40% of internships, these range from construction firms to public agencies (such as the City of Seattle and the Washington State Department of Transportation).

Transportation engineering

Offering about 25% of internships, these can be with consultants or public agencies responsible for transportation (such as the City of Seattle).

Environmental engineering

Offering about 10% of internships, most of which are with private consultants, although some are with public entities.

Code

Update the Font Awesome icons as needed.

<style>
  .list-group-item {
    grid-template-columns: 1;
    gap: 1rem;
  }
  .list-group-item i {
    font-size: 3rem;
  }
  .list-group-item :is(h2,h3,h4,h5) {
    font-size: 1.375rem;
  }
  @media screen and (min-width: 768px) {
    .list-group-item {
      grid-template-columns: 6rem minmax(0,1fr);
      gap: 1.25rem;
    }
    .list-group-item i {
      font-size: 4rem;
    }
    .list-group-item :is(h2,h3,h4,h5) {
      font-size: 1.75rem;
    }
  }
</style>

<div class="group list-group block-margin-bottom grid child-bg-transparent grid-cols-1 gap-[2rem] md:gap-15 [&>.list-group-item]:p-0">
  <!-- Item 1 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-hard-hat text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Construction engineering</h3>
      <p>Offering about 40% of internships, these range from construction firms to public agencies (such as the City of Seattle and the Washington State Department of Transportation).</p>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-car-bus text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Transportation engineering</h3>
      <p>Offering about 25% of internships, these can be with consultants or public agencies responsible for transportation (such as the City of Seattle).</p>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="list-group-item direct-child grid items-start">
    <div>
      <i class="fa-sharp fa-solid fa-leaf text-husky-purple justify-self-start md:justify-self-center px-0 py-[0.25rem] lg:p-[0.5rem]"></i>
    </div>
    <div class="pr-0 md:pr-[0.5rem] w-full md:w-[initial] flex-grow">
      <h3>Environmental engineering</h3>
      <p>Offering about 10% of internships, most of which are with private consultants, although some are with public entities.</p>
    </div>
  </div>
</div>

Two-column list with icons

Why UW Engineering

Explore

Code

Update the Font Awesome icons as needed.

<style>
  .list-group {
    column-gap: 2rem;
  }
  .list-group-item {
    grid-template-columns: 1;
    gap: 1rem;
    padding: 0;
  }
  .list-group-item i {
    font-size: 3rem;
  }
  .list-group-item :is(h2,h3,h4,h5) {
    font-size: 1.375rem;
  }
  @media screen and (min-width: 768px) {
    .list-group {
      column-gap: calc(var(--spacing) * 15);
    }
    .list-group-item {
      grid-template-columns: 6rem minmax(0,1fr);
      gap: 1.25rem;
    }
    .list-group-item i {
      font-size: 4rem;
    }
    .list-group-item :is(h2,h3,h4,h5) {
      font-size: 1.75rem;
    }
  }
</style>

<div class="group list-group block-margin-bottom grid child-bg-transparent grid-cols-1 lg:grid-cols-2 gap-[2rem]">

  <!-- Item 1 -->
  <div class="list-group-item direct-child grid grid-cols-1 items-start">
    <div class="grid justify-self-start md:justify-self-center">
      <i class="fa-sharp fa-solid fa-compass text-husky-purple px-0 py-[0.25rem] lg:p-[0.5rem]" aria-hidden="true"></i>
    </div>
    <div class="w-full md:w-[initial] flex-grow">
      <h3>Why UW Engineering</h3>
      <p>Optional, short copy for this item</p>
      <a class="btn is-style-tertiary mb-[0.5rem]!" href="/">Explore</a>
    </div>
  </div>

  <!-- Item 2 -->
  <div class="list-group-item direct-child grid grid-cols-1 grid-cols-[6rem_minmax(0,1fr)] gap-[1rem] md:gap-[1.25rem] items-start">
    <div class="grid justify-self-start md:justify-self-center">
      <i class="fa-sharp fa-solid fa-books text-husky-purple px-0 py-[0.25rem] lg:p-[0.5rem]" aria-hidden="true"></i>
    </div>
    <div class="w-full md:w-[initial] flex-grow">
      <h3>Our departments and degrees</h3>
      <p>Optional, short copy for this second item</p>
      <a class="btn is-style-tertiary mb-[0.5rem]!" href="/">Explore all</a>
    </div>
  </div>

  <!-- Item 3 -->
  <div class="list-group-item direct-child grid grid-cols-1 grid-cols-[6rem_minmax(0,1fr)] gap-[1rem] md:gap-[1.25rem] items-start">
    <div class="grid justify-self-start md:justify-self-center">
      <i class="fa-sharp fa-solid fa-question text-husky-purple px-0 py-[0.25rem] lg:p-[0.5rem]" aria-hidden="true"></i>
    </div>
    <div class="w-full md:w-[initial] flex-grow">
      <h3>Tuition and scholarships</h3>
      <p>Optional, short copy for this third item</p>
      <a class="btn is-style-tertiary mb-[0.5rem]!" href="/">Learn more</a>
    </div>
  </div>

  <!-- Item 4 -->
  <div class="list-group-item direct-child grid grid-cols-1 grid-cols-[6rem_minmax(0,1fr)] gap-[1rem] md:gap-[1.25rem] items-start">
    <div class="grid justify-self-start md:justify-self-center">
      <i class="fa-sharp fa-solid fa-map-location text-husky-purple px-0 py-[0.25rem] lg:p-[0.5rem]" aria-hidden="true"></i>
    </div>
    <div class="w-full md:w-[initial] flex-grow">
      <h3>Contact or visit us</h3>
      <p>Optional, short copy for this fourth item</p>
      <a class="btn is-style-tertiary mb-[0.5rem]!" href="/">Get in touch</a>
    </div>
  </div>

</div>