Lists

The List Row component helps group overview information. The information presented should be scannable and actionable.

Typography lists such as bulleted and numbered can be found in the Typography section.

List Row: How to Use

1
2
3
4
5
6
7
8
span="2"
3
4
span="3"
8
start="3" span="2"
span="2"
7
8
<tk-list class="demo">
  <tk-list-columns slot="columns">
    <tk-list-column column-title="Pre"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row>
    <tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
    <div class="demo-body" slot="row-body">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button #2</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

<tk-list class="demo">
  <tk-list-columns slot="columns">
    <tk-list-column column-title="Pre"></tk-list-column>
    <tk-list-column column-title="span 2" span="2"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="span 3" span="3"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row>
    <tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
    <div class="demo-body" slot="row-body">
      <div span="2">span="2"</div>
      <div>3</div>
      <div>4</div>
      <div span="3">span="3"</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button #2</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

<tk-list class="demo">
  <tk-list-columns slot="columns">
    <tk-list-column column-title="Pre"></tk-list-column>
    <tk-list-column column-title="start 3, span 2" span="2" start="3"></tk-list-column>
    <tk-list-column column-title="span 2" span="2"></tk-list-column>
    <tk-list-column column-title="start 8" start="8"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row>
    <tk-icon class="demo-pre" slot="row-icon" name="idea" size="large" muted></tk-icon>
    <div class="demo-body" slot="row-body">
      <div start="3" span="2">start="3" span="2"</div>
      <div span="2">span="2"</div>
      <div>7</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button #2</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

Description

The List Row component has three areas for content: pre-row-body, row-body, and row-actions.

Pre-Row Body

The pre-row-body is a slotted element, so it will always appear first in the row (even if placed differently in the markup). It is made up of two elements: row-icon and row-selector.

Row Body

The row-body can be split into 8 columns. The default for each element is to span 1 column. To control how many columns an element spans, use span="x". To offset an element, add start="x".

Row Actions

The row-actions is a slotted element, so it will always appear last in the row (even if placed differently in the markup). Most likely, you’ll want to use our tk-dropdown here.

Column Headers

Column headers can also accept span and start.

List Row: No Pre

1
2
3
4
5
6
7
8
span="4"
span="3"
8
span="2"
start="5" span="3"
8
<tk-list class="demo">
  <tk-list-columns slot="columns" pre-row-body="false">
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row pre-row-body="false">
    <div class="demo-body" slot="row-body">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Button #2</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

<tk-list class="demo">
  <tk-list-columns slot="columns" pre-row-body="false">
    <tk-list-column column-title="span 4" span="4"></tk-list-column>
    <tk-list-column column-title="span 3" span="3"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row pre-row-body="false">
    <div class="demo-body" slot="row-body">
      <div span="4">span="4"</div>
      <div span="3">span="3"</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Add Elixir</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Add Potion</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

<tk-list class="demo">
  <tk-list-columns slot="columns" pre-row-body="false">
    <tk-list-column column-title="span 2" span="2"></tk-list-column>
    <tk-list-column column-title="start 5, span 3" start="5" span="3"></tk-list-column>
    <tk-list-column column-title="Body"></tk-list-column>
    <tk-list-column column-title="Actions"></tk-list-column>
  </tk-list-columns>

   <tk-list-row pre-row-body="false">
    <div class="demo-body" slot="row-body">
      <div span="2">span="2"</div>
      <div start="5" span="3">start="5" span="3"</div>
      <div>8</div>
    </div>
    <tk-dropdown class="demo-actions" slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Add Elixir</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Add Potion</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

Description

In situations where you don’t have a row-selector or row-icon, you can set pre-row-body="false". Note: you’ll want to add this to both the columns + row.

List Row: Columns + Icon

Most people found this course to be enjoyable.

May 27, 1993

<tk-list>
  <tk-list-columns light slot="columns">
    <tk-list-column column-title="Type"></tk-list-column>
    <tk-list-column column-title="Subject" span="3"></tk-list-column>
    <tk-list-column column-title="Review" start="5" span="3"></tk-list-column>
    <tk-list-column column-title="Start Date"></tk-list-column>
  </tk-list-columns>

   <tk-list-row>
    <tk-icon slot="row-icon" name="idea" size="large" muted></tk-icon>
    <div slot="row-body">
      <div span="3">
        <h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
        <p class="t-small">N.E.W.T. requirement</p>
      </div>
      <p start="5" span="3">Most people found this course to be <strong>enjoyable</strong>.</p>
      <p>May 27, 1993</p>
    </div>
  </tk-list-row>
</tk-list>

Description

The List Row component allows content inside of the row-body slot to span up to 8 columns.

List Row: Columns, Selector, Icon

Enrolled

Prof. Hagrid

May 27, 1993

<tk-list>
  <tk-list-columns slot="columns">
    <tk-list-column column-title="Type"></tk-list-column>
    <tk-list-column column-title="Subject" span="5"></tk-list-column>
    <tk-list-column column-title="Status"></tk-list-column>
    <tk-list-column column-title="Instructor"></tk-list-column>
    <tk-list-column column-title="Start Date"></tk-list-column>
  </tk-list-columns>

  <tk-list-row>
    <tk-row-selector slot="row-selector" size="medium"></tk-row-selector>
    <tk-icon class="sm-hide" slot="row-icon" name="usability" muted size="large"></tk-icon>
    <div slot="row-body">
      <div span="5">
        <h2><a class="row-title" href="#">COURSE 3300: Care of Magical Creatures</a></h2>
        <p class="t-small">N.E.W.T. requirement</p>
      </div>
      <tk-indicator type="approved">Enrolled</tk-indicator>
      <p>Prof. Hagrid</p>
      <p>May 27, 1993</p>
    </div>
    <tk-dropdown slot="row-actions" trigger-type="action">
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Drop Course</button>
      </tk-dropdown-item>
      <tk-dropdown-item>
        <button class="dropdown__link" type="button">Email Professor</button>
      </tk-dropdown-item>
    </tk-dropdown>
  </tk-list-row>
</tk-list>

Description

The List Row component listens for the select event to fire. It then updates with the appropriate styles and aria attributes.

List Row + Header

Available Subjects

Enrollment approval is at the Professor's discretion and will be allotted to students considered to be in good standing.

Care of Magical Creatures

Learn how to properly care for the wizarding world's most enchanting creatures with a world-renowned expert. In this course you'll gain experience with flobberworms, dragons, hippogriffs, nifflers…and so many more.

<tk-list flush>
  <tk-list-header>
    <h2 slot="list-title">Available Subjects</h2>
    <p slot="list-subtitle">Enrollment approval is at the Professor's discretion and will be allotted to students considered to be in good standing.</p>
    <button class="btn t-link ml-auto" type="button">Contact</button>
  </tk-list-header>

  <tk-list-row>
    <tk-stamp slot="row-icon" icon="info--filled"></tk-stamp>
    <div slot="row-body">
      <div span="8">
        <h2>Care of Magical Creatures</h2>
        <p>Learn how to properly care for the wizarding world's most enchanting creatures with a world-renowned expert. In this course you'll gain experience with flobberworms, dragons, hippogriffs, nifflers…and so many more.</p>
      </div>
    </div>
  </tk-list-row>
</tk-list>

Description

This pattern can be found on the Labs + Integrations views. To output rows that are stacked without margin, add flush to tk-list.

Props: tk-list

Property Type Default Description
flush boolean false Removes margin and adds border between tk-list-row elements.

Props: tk-list-row

Property Type Default Description
compact boolean false Decreases the padding of the List Row.
preRowBody boolean true Allots space for the preRowBody before the row-body content.
isSelected boolean true Selection state of the List Row.

Props: tk-list-header

Property Type Default Description
compact boolean false Decreases the padding of the List Header.

Props: tk-list-column

Property Type Default Description
title string The List Column label.

Props: tk-list-columns

Property Type Default Description
light boolean false Sets the List Column text to light.

Do

  • Ensure the actions are clearly visible

Don't

  • Use light columns on a light background
  • Nest List Rows within each other