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

element     : 'list'
elementType : 'view'

title       : 'List'
description : 'A list is used to group descriptions of related content'
type        : 'UI View'

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

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

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Content</a>
      <a class="item">Variations</a>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">List</h4>
    <p>A simple 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="example">
    <h4 class="ui header">List</h4>
    <p>A list using all optional content types</p>
    <div class="ui list">
      <div class="item">
        <img class="ui top aligned avatar image" src="/images/demo/avatar2.jpg">
        <div class="content">
          <div class="header">Schnoodle</div>
          Your new dog
          <div class="list">
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Thanks for being my owner</a>
                <div class="description">Im so glad you chose to bring me home from the shelter...</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">What a walk</a>
                <div class="description">Man i am so tired that walk today really was too far...</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Sorry about your old dog</a>
                <div class="description">Is this your address? I'm getting dropped off from the SPCA...</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <img class="ui top aligned avatar image" src="/images/demo/avatar3.jpg">
        <div class="content">
          <div class="header">Ragamuffin</div>
          Your old dog.
          <div class="list">
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Was on a walk today</a>
                <div class="description">Here's a picture of me on the farm with a cow...</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Ruff Ruff</a>
                <div class="description">I know i usually message you in english but i wanted to see how your dog language was progressing...</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Reaching Out</a>
                <div class="description">Hey its your old dog, been a while since you sent me to the farm...</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">
      <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="ignored ui info message">For convenience, a simple bulleted list can also use <code>ul</code> tag.</div>
    <ul class="ui list">
      <li>Cats</li>
      <li>Horses</li>
      <li>Dogs</li>
        <ul>
          <li>Labradoodles</li>
          <li>Shiba Inu</li>
          <li>Mastiff</li>
        </ul>
      </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">
      <div class="item">Getting Started</div>
      <div class="item">Introduction</div>
      <div class="item">Languages
        <div class="list">
          <div class="item">HTML</div>
          <div class="item">Javascript</div>
          <div class="item">CSS</div>
        </div>
      </div>
      <div class="item">Review</div>
    </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>Cats</li>
      <li>Horses</li>
      <li>Dogs</li>
        <ol>
          <li>Labradoodles</li>
          <li>Shiba Inu</li>
          <li>Mastiff</li>
        </ol>
      </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">
      <a class="item">Home</a>
      <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>
        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="another example">
    <div class="ui list">
      <a class="item">
        <i class="help icon"></i>
        <div class="content">
          <div class="header">This is a 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">Floated 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>
    </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">
        <div class="ui avatar image">
          <img src="/images/demo/avatar2.jpg">
        </div>
        <div class="content">
          Twin 1
        </div>
      </div>
      <div class="item">
        <div class="ui avatar image">
          <img src="/images/demo/avatar2.jpg">
        </div>
        <div class="content">
          Twin 2
        </div>
      </div>
      <div class="item">
        <div class="ui avatar image">
          <img src="/images/demo/avatar2.jpg">
        </div>
        <div class="content">
          Twin 3
        </div>
      </div>
      <div class="item">
        <div class="ui avatar image">
          <img src="/images/demo/avatar2.jpg">
        </div>
        <div class="content">
          Twin 4
        </div>
      </div>
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/demo/avatar2.jpg">
        </div>
        <div class="content">
          <div class="header">Twin 5</div>
          <div class="description">Twin 5 has a long description and requires a different vertical align to not look awkwardly aligned</div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Link</h4>
    <p>A list can contain items that link</p>
    <div class="ui list">
      <a class="item">What is a FAQ?</a>
      <a class="item">How does one go about reading answers to questions in a FAQ</a>
      <a class="item">How do you close a web browser?</a>
      <a class="item">What is the most popular FAQ question?</a>
    </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">New York City</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Chicago</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Los Angeles</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">San Francisco</a>
          <div class="description">A lovely city</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 tiny teal ui button">View Listing</div>
        <img class="ui avatar image" src="/images/demo/avatar2.jpg">
        <div class="content">
          <div class="header">New York Dog Fair</div>
        </div>
      </div>
      <div class="item">
        <div class="right floated tiny teal ui button">View Listing</div>
        <img class="ui avatar image" src="/images/demo/avatar3.jpg">
        <div class="content">
          <div class="header">Dog Appreciation Day</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/demo/avatar.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/demo/avatar2.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/demo/avatar3.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 ordered horizontal list">
      <div class="item">New York City</div>
      <div class="item">Chicago</div>
      <div class="item">Los Angeles</div>
      <div class="item">San Francisco</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui horizontal bulleted list">
      <div class="item">
        Apples
      </div>
      <div class="item">
        Pears
      </div>
      <div class="item">
        Oranges
      </div>
      <div class="item">
        Soursop
      </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/demo/avatar.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/demo/avatar2.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/demo/avatar3.jpg">
        <div class="content">
          <div class="header">Paulo</div>
          He's also a dog
        </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/demo/avatar.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/demo/avatar2.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/demo/avatar3.jpg">
        <div class="content">
          <div class="header">Paulo</div>
          He's also a dog
        </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 divided list">
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">New York City</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Chicago</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Los Angeles</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui very relaxed divided list">
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">New York City</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Chicago</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Los Angeles</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui relaxed horizontal divided list">
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">New York City</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Chicago</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Los Angeles</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui very relaxed horizontal divided list">
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">New York City</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Chicago</a>
          <div class="description">A lovely city</div>
        </div>
      </div>
      <div class="item">
        <i class="map marker icon"></i>
        <div class="content">
          <a class="header">Los Angeles</a>
          <div class="description">A lovely city</div>
        </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/demo/avatar.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/demo/avatar2.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/demo/avatar3.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 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/demo/avatar.jpg">
        <div class="content">
          <div class="header">Snickerdoodle</div>
          An excellent companion
        </div>
      </div>
      <div class="item">
        <img class="ui avatar image" src="/images/demo/avatar2.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/demo/avatar3.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 bulleted horizontal list">
      <div class="item">
        Apples
      </div>
      <div class="item">
        Oranges
      </div>
      <div class="item">
        Pinapples
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui tiny bulleted horizontal list">
      <div class="item">
        Apples
      </div>
      <div class="item">
        Oranges
      </div>
      <div class="item">
        Pinapples
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small bulleted horizontal list">
      <div class="item">
        Apples
      </div>
      <div class="item">
        Oranges
      </div>
      <div class="item">
        Pinapples
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large list">
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          Thanks for being my owner
        </div>
      </div>
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          What a walk
        </div>
      </div>
      <div class="item">
        <i class="map icon"></i>
        <div class="content">
          Sorry about your old dog
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui big list">
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          Thanks for being my owner
        </div>
      </div>
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          What a walk
        </div>
      </div>
      <div class="item">
        <i class="map icon"></i>
        <div class="content">
          Sorry about your old dog
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge list">
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          Thanks for being my owner
        </div>
      </div>
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          What a walk
        </div>
      </div>
      <div class="item">
        <i class="map icon"></i>
        <div class="content">
          Sorry about your old dog
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive list">
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          Thanks for being my owner
        </div>
      </div>
      <div class="item">
        <i class="mail outline icon"></i>
        <div class="content">
          What a walk
        </div>
      </div>
      <div class="item">
        <i class="map icon"></i>
        <div class="content">
          Sorry about your old dog
        </div>
      </div>
    </div>
  </div>



</div>