Types
List
A list groups related content
Bulleted
A list can mark items with a bullet
- Gaining Access
- Inviting Friends
- Benefits
- Use Anywhere
- Rebates
- Discounts
- Warranty
Ordered
A list can be ordered numerically
- Signing Up
- User Benefits
- User Types
- Admin
- Power User
- Regular User
- Deleting Your Account
- Signing Up
- User Benefits
- User Types
- Admin
- Power User
- Regular User
- Deleting Your Account
Content
Item
A list item can contain a set of items
Icon
A list item can contain an icon
Image
A list item can contain an image
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/rachel.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/lindsay.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/matthew.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/jenny.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/veronika.jpg)
Header
A list item can contain a header
Description
A list item can contain a description
Variations
Horizontal
A list can be formatted to have items appear horizontally
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/tom.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/matt.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/tom.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/stevie.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/jenny.jpg)
Inverted
A list can be inverted to appear on a dark background
Selection
A selection list formats list items as possible choices
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
Animated
A list can animate to set the current item apart from the list
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
Relaxed
A list can relax its padding to provide more negative space
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/stevie.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/elliot.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/stevie.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/elliot.jpg)
Celled
A list can divide its items into cells
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
Size
A list can vary in size
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/helen.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/christian.jpg)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar/small/daniel.jpg)
Content Variations
Vertically Aligned
An element inside a list can be vertically aligned
![](https://cdn.statically.io/img/semantic-ui.com/images/wireframe/square-image.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/wireframe/square-image.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/wireframe/square-image.png)
Floated
An list, or an element inside a list can be floated left or right
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/lena.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/lindsay.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/mark.png)
![](https://cdn.statically.io/img/semantic-ui.com/images/avatar2/small/molly.png)