---
layout      : 'default'
css         : 'list'

element     : 'list'
elementType : 'element'

title       : 'List'
description : 'A list is used to group related content'
type        : 'UI Element'

themes      : ['Default']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/list.less" />

<%- @partial('header') %>
<div class="main container">

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">List</h4>
    <p>A list</p>
    <div class="ui list">
      <div class="item">Apples</div>
      <div class="item">Pears</div>
      <div class="item">Oranges</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui list">
      <div class="item">
        <img class="ui top aligned avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <div class="header">Daniel Louise</div>
          Friends since 1992
          <div class="list">
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">Hey man</a>
                <div class="description">Hey man so I forgot to send you an invite to my party, but its this saturday...</div>
              </div>
            </div>
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">What a day</a>
                <div class="description">Man i am so tired that walk today really was too far...</div>
              </div>
            </div>
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">How does polar bear</a>
                <div class="description">Have you ever wondered? How polar bear know what apple is...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <img class="ui top aligned avatar image" src="/images/avatar/small/steve.jpg">
        <div class="content">
          <div class="header">Steve Jobes</div>
          Work acquaintance from Apple
          <div class="list">
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">Inspirational!</a>
                <div class="description">Check out this amazing TED video that I did a couple months ago...</div>
              </div>
            </div>
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">Ruff Ruff</a>
                <div class="description">Have you ever tried animal meditation? Today I spent 30 minutes as a dog...</div>
              </div>
            </div>
            <div class="item">
              <i class="top aligned right triangle icon"></i>
              <div class="content">
                <a class="header">Reaching Out</a>
                <div class="description">Hey there's a new role at Apple you might be great for...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Bulleted</h4>
    <p>A list can mark items with a bullet</p>
    <div class="ui bulleted list">
      <a class="item">Gaining Access</a>
      <a class="item">Inviting Friends</a>
      <div class="item">
        <a>Benefits</a>
        <div class="list">
          <a class="item">Use Anywhere</a>
          <a class="item">Rebates</a>
          <a class="item">Discounts</a>
        </div>
      </div>
      <a class="item">Warranty</a>
    </div>
  </div>
  <div class="another example">
    <div class="ignored ui info message">For convenience, a simple bulleted list can also use <code>ul</code> tag.</div>
    <ul class="ui list">
      <li>Gaining Access</li>
      <li>Inviting Friends</li>
      <li>Benefits</li>
        <ul>
          <li>Use Anywhere</li>
          <li>Rebates</li>
          <li>Discounts</li>
        </ul>
      </li>
      <li>Warranty</li>
    </ul>
  </div>

  <div class="example">
    <h4 class="ui header">Ordered</h4>
    <p>A list can be ordered numerically</p>
    <div class="ui ordered list">
      <a class="item">Getting Started</a>
      <a class="item">Introduction</a>
      <div class="item">
        <a>Languages</a>
        <div class="list">
          <a class="item">HTML</a>
          <a class="item">Javascript</a>
          <a class="item">CSS</a>
        </div>
      </div>
      <a class="item">Review</a>
    </div>
  </div>
  <div class="another example">
    <div class="ignored ui info message">An ordered list can also use the <code>ol</code> tag</div>
    <ol class="ui list">
      <li>Signing Up</li>
      <li>User Benefits</li>
      <li>User Types
        <ol>
          <li>Admin</li>
          <li>Power User</li>
          <li>Regular User</li>
        </ol>
      </li>
      <li>Deleting Your Account</li>
    </ol>
  </div>

  <div class="example">
    <h4 class="ui header">Link</h4>
    <p>A link list is specially formatted for page links</p>
    <div class="ui link list">
      <div class="active item">Home</div>
      <a class="item">About</a>
      <a class="item">Jobs</a>
      <a class="item">Team</a>
    </div>
  </div>

  <h2 class="ui dividing header">Content</h2>

  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>A list item can contain an icon</p>
    <div class="ui list">
      <a class="item">
        <i class="help icon"></i>
        <div class="content">
          <div class="header">Floated Icon</div>
          <div class="description">This text will always have a left margin to make sure it sits alongside your icon</div>
        </div>
      </a>
      <a class="item">
        <i class="top aligned right triangle icon"></i>
        <div class="content">
          <div class="header">Icon Alignment</div>
          <div class="description">Floated icons are, by default, middle aligned. To have an icon top aligned try this example.</div>
        </div>
      </a>
      <a class="item">
        <i class="help icon"></i>
        An icon immediately inside an item sits inline this content will sit under the icon if there is a line break
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Image</h4>
    <p>A list item can contain an image</p>
    <div class="ui list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
        <div class="content">
          <a class="header">Jenny Hess</a>
          <div class="description">Last seen watching <a><b>Twin Peaks</b></a> 3 days ago.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/veronika.jpg">
        <div class="content">
          <a class="header">Veronika Ossi</a>
          <div class="description">Has not watched anything recently</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Link</h4>
    <p>A list can contain links</p>
    <div class="ui list">
      <a class="item">What is a FAQ?</a>
      <div class="item">
        <a class="header">Learn More</a>
        <div class="description">
          Learn more about this site on <a>our FAQ page</a>.
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Header</h4>
    <p>A list item can contain a header</p>
    <div class="ui list">
      <div class="item">
        <div class="header">New York City</div>
        A lovely city
      </div>
      <div class="item">
        <div class="header">Chicago</div>
        Also quite a lovely city
      </div>
      <div class="item">
        <div class="header">Los Angeles</div>
        Sometimes can be a lovely city
      </div>
      <div class="item">
        <div class="header">San Francisco</div>
        What a lovely city
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Description</h4>
    <p>A list item can contain a description</p>
    <div class="ui divided list">
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Krowlewskie Jadlo</a>
          <div class="description">An excellent polish restaurant, quick delivery and hearty, filling meals.</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Xian Famous Foods</a>
          <div class="description">A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Sapporo Haru</a>
          <div class="description">Greenpoint's best choice for quick and delicious sushi.</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Enid's</a>
          <div class="description">At night a bar, during the day a delicious brunch spot.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Content</h4>
    <p>Any element inside a list can be floated left or right</p>
    <div class="ui divided list">
      <div class="item">
        <div class="right floated compact ui button">Add</div>
        <img class="ui avatar image" src="/images/avatar/small/justen.jpg">
        <div class="content">
          <div class="header">Justen Kitsune</div>
        </div>
      </div>
      <div class="item">
        <div class="right floated compact ui button">Add</div>
        <img class="ui avatar image" src="/images/avatar/small/joe.jpg">
        <div class="content">
          <div class="header">Joe Henderson</div>
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>


  <div class="example">
    <h4 class="ui header">Horizontal List</h4>
    <p>A list can be formatted horizontally</p>
    <div class="ui horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
        <div class="content">
          <div class="header">Tom</div>
          Top Contributor
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <div class="header">Christian Rocha</div>
          Admin
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/matt.jpg">
        <div class="content">
          <div class="header">Matt</div>
          Top Rated User
        </div>
      </div>
    </div>
  </div>

  <div class="another example">
    <div class="ui ordered horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/tom.jpg">
        <div class="content">
          <div class="header">Steve Jobes</div>
          50 Points
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <div class="header">Stevie Feliciano</div>
          44 Points
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/jenny.jpg">
        <div class="content">
          <div class="header">Jenny Hess</div>
          11 Points
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui horizontal bulleted link list">
      <a class="item">
        Terms and Conditions
      </a>
      <a class="item">
        Privacy Policy
      </a>
      <a class="item">
        Contact Us
      </a>
      <div class="item">
        Copyright 2014 Semantic UI
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A list can be inverted to appear on a dark background</p>
    <div class="ui inverted segment">
      <div class="ui inverted relaxed divided list">
        <div class="item">
          <div class="content">
            <div class="header">Snickerdoodle</div>
            An excellent companion
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="header">Poodle</div>
            A poodle, its pretty basic
          </div>
        </div>
        <div class="item">
          <div class="content">
            <div class="header">Paulo</div>
            He's also a dog
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Selection</h4>
    <p>A selection list formats list items as possible choices</p>
    <div class="ui selection list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <div class="header">Helen</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <div class="header">Christian</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <div class="header">Daniel</div>
        </div>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Animated</h4>
    <p>A list can animate to set the current item apart from the list</p>
    <div class="ui info message">
      Be sure content can fit on one line when using the animated variation, otherwise the content will create a new line break as the animated content adjusts to its new size.
    </div>
    <div class="ui animated list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <div class="header">Helen</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <div class="header">Christian</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <div class="header">Daniel</div>
        </div>
      </div>
  </div>

  <div class="example">
    <h4 class="ui header">Relaxed</h4>
    <p>A list can relax its padding to provide more negative space</p>

    <div class="ui relaxed list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui relaxed horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui very relaxed list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
          <div class="description">Last seen watching <a><b>Arrested Development</b></a> just now.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
          <div class="description">Last seen watching <a><b>Bob's Burgers</b></a> 10 hours ago.</div>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
          <div class="description">Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui very relaxed horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Divided</h4>
    <p>A list can show divisions between content</p>
    <div class="ui divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel Louise</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/stevie.jpg">
        <div class="content">
          <a class="header">Stevie Feliciano</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/elliot.jpg">
        <div class="content">
          <a class="header">Elliot Fu</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui divided ordered list">
      <div class="item">Cats</div>
      <div class="item">Horses</div>
      <div class="item">Dogs
        <div class="list">
          <div class="item">Labradoodles</div>
          <div class="item">Shiba Inu</div>
          <div class="item">Mastiff</div>
        </div>
      </div>
      <div class="item">Horses Again</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui divided horizontal list">
      <div class="item">About Us</div>
      <div class="item">Contact</div>
      <div class="item">Support</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Celled</h4>
    <p>A list can divide its items into cells</p>
    <div class="ui celled list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <div class="header">Poodle</div>
          A poodle, its pretty basic
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <div class="header">Paulo</div>
          He's also a dog
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui celled ordered list">
      <div class="item">Cats</div>
      <div class="item">Horses</div>
      <div class="item">Dogs
        <div class="list">
          <div class="item">Labradoodles</div>
          <div class="item">Shiba Inu</div>
          <div class="item">Mastiff</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui celled horizontal list">
      <div class="item">About Us</div>
      <div class="item">Contact</div>
      <div class="item">Support</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>A list can vary in size</p>
    <div class="ui mini horizontal divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui tiny horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small horizontal list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large horizontal divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui big horizontal divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge horizontal divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive horizontal divided list">
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
        <div class="content">
          <a class="header">Helen</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
        <div class="content">
          <a class="header">Christian</a>
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/avatar/small/daniel.jpg">
        <div class="content">
          <a class="header">Daniel</a>
        </div>
      </div>
    </div>
  </div>
</div>


</div>