You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
835 lines
27 KiB
835 lines
27 KiB
---
|
|
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>
|