|
|
---layout : 'default'css : 'list'
element : 'list'elementType : 'element'
title : 'List'description : 'A list is used to group descriptions of 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>
|
