Components

These components demonstrate how to build scalable semantic UI with TailUI.

List

Structured list with leading, content, and trailing slots.

Preview
JD
John Doe
john@example.com
Admin
AS
Alice Smith
alice@example.com
Editor
BW
Bob Wilson
bob@example.com
Viewer
Code
1<div class="ui-list ui-interactive">
2  <div class="ui-list-item">
3    <span class="ui-leading ui-avatar">JD</span>
4    <div class="ui-content">
5      <div class="ui-title">John Doe</div>
6      <div class="ui-subtitle">john@example.com</div>
7    </div>
8    <span class="ui-trailing">Admin</span>
9  </div>
10  <div class="ui-list-item ui-selected">
11    <span class="ui-leading ui-avatar">AS</span>
12    <div class="ui-content">
13      <div class="ui-title">Alice Smith</div>
14      <div class="ui-subtitle">alice@example.com</div>
15    </div>
16    <span class="ui-trailing">Editor</span>
17  </div>
18  <div class="ui-list-item">
19    <span class="ui-leading ui-avatar">BW</span>
20    <div class="ui-content">
21      <div class="ui-title">Bob Wilson</div>
22      <div class="ui-subtitle">bob@example.com</div>
23    </div>
24    <span class="ui-trailing">Viewer</span>
25  </div>
26</div>