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.
818 lines
24 KiB
818 lines
24 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/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>
|