Lists

The list row component helps group overview information. The information presented should be scannable and actionable.

List Row

Test Title
<div class="list-row-container">
  <div class="list-row list-row-container__item">
    <div class="row-selector mr-sm-3x">
      <label for="my_checkbox" class="sr-only">Screen reader text</label>
      <input id="my_checkbox" type="checkbox" class="row-selector__checkbox input-checkbox input-checkbox--large">
      <a href="" class="t-base link--default ml-2x">Test Title</a>
    </div>
    <tk-dropdown trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Archive</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </div>
</div>

Description

The list row contains overview information. The information presented should be scannable and actionable.

Do

  • Ensure there is enough visual separation between list row components
  • Ensure the actions are clearly visible

Don't

  • Nest list rows within each other

List Row

Harry Potter (Film Series)

British-American film series based on the Harry Potter novels by author J. K. Rowling.

Harry Potter and the Philosopher's Stone (2001)

Harry Potter is an orphaned boy brought up by his unkind Muggle (non-magical) aunt and uncle. At the age of eleven, half-giant Rubeus Hagrid informs him that he is actually a wizard and that his parents were murdered by an evil wizard named Lord Voldemort.

Harry Potter and the Chamber of Secrets (2002)

Harry, Ron, and Hermione return to Hogwarts for their second year, which proves to be more challenging than the last. The Chamber of Secrets has been opened, leaving students and ghosts petrified by an unleashed monster.

<div class="list-row-container">
  <div class="list-row-container__header">
    <h2 class="t-medium">Harry Potter (Film Series)</h2>
    <p>British-American film series based on the Harry Potter novels by author J. K. Rowling.</p>
  </div>

  <div class="list-row list-row-container__item">
    <div class="list-row__description">
      <div class="list-row__group">
        <div class="list-row__icon">
          <tk-stamp icon="info--filled"></tk-stamp>
        </div>
        <div class="list-row__info">
          <h3 class="t-medium mb-1x">Harry Potter and the Philosopher's Stone (2001)</h3>
          <p class="t-ghost">Harry Potter is an orphaned boy brought up by his unkind Muggle (non-magical) aunt and uncle. At the age of eleven, half-giant Rubeus Hagrid informs him that he is actually a wizard and that his parents were murdered by an evil wizard named Lord Voldemort.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="list-row list-row-container__item">
    <div class="list-row__description">
      <div class="list-row__group">
        <div class="list-row__icon">
          <tk-stamp icon="info--filled"></tk-stamp>
        </div>
        <div class="list-row__info">
          <h3 class="t-medium mb-1x">Harry Potter and the Chamber of Secrets (2002)</h3>
          <p class="t-ghost">Harry, Ron, and Hermione return to Hogwarts for their second year, which proves to be more challenging than the last. The Chamber of Secrets has been opened, leaving students and ghosts petrified by an unleashed monster.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Description

This pattern can be found on the Labs + Integrations views.