Menu
Menu
UI Element: List
9 of 14
Button Divider Flag Header Icon Image Input Label List Loader Rail Reveal Segment Step

List

A list is used to group related content

Definition Type
Design
Code
Summary
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone List
Download ZIP View GitHub

Package Managers

Types

List

A list groups related content

Apples
Pears
Oranges
Daniel Louise
Friends since 1992
Hey man
Hey man so I forgot to send you an invite to my party, but it's this saturday...
What a day
Man i am so tired that walk today really was too far...
How does polar bear
Have you ever wondered? How polar bear know what apple is...
Steve Jobes
Work acquaintance from Apple
Inspirational!
Check out this amazing TED video that I did a couple months ago...
Ruff Ruff
Have you ever tried animal meditation? Today I spent 30 minutes as a dog...
Reaching Out
Hey there's a new role at Apple you might be great for...

Bulleted

A list can mark items with a bullet

Gaining Access Inviting Friends
Benefits
Use Anywhere Rebates Discounts
Warranty
For convenience, a simple bulleted list can also use ul tag.
  • Gaining Access
  • Inviting Friends
  • Benefits
    • Use Anywhere
    • Rebates
    • Discounts
  • Warranty

Ordered

A list can be ordered numerically

Getting Started Introduction
Languages
HTML Javascript CSS
Review
An ordered list can also use the ol tag
  1. Signing Up
  2. User Benefits
  3. User Types
    1. Admin
    2. Power User
    3. Regular User
  4. Deleting Your Account

Link

A link list is specially formatted for page links

Home
About Jobs Team

Content

Icon

A list item can contain an icon

Floated Icon
This text will always have a left margin to make sure it sits alongside your icon
Icon Alignment
Floated icons are, by default, middle aligned. To have an icon top aligned try this example.
 An icon immediately inside an item sits inline this content will sit under the icon if there is a line break

Image

A list item can contain an image

Daniel Louise
Last seen watching Arrested Development just now.
Stevie Feliciano
Last seen watching Bob's Burgers 10 hours ago.
Elliot Fu
Last seen watching The Godfather Part 2 yesterday.
Jenny Hess
Last seen watching Twin Peaks 3 days ago.
Veronika Ossi
Has not watched anything recently

Link

A list can contain links

What is a FAQ?
Learn More
Learn more about this site on our FAQ page.

Header

A list item can contain a header

New York City
A lovely city
Chicago
Also quite a lovely city
Los Angeles
Sometimes can be a lovely city
San Francisco
What a lovely city

Description

A list item can contain a description

Krowlewskie Jadlo
An excellent polish restaurant, quick delivery and hearty, filling meals.
Xian Famous Foods
A taste of Shaanxi's delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.
Sapporo Haru
Greenpoint's best choice for quick and delicious sushi.
Enid's
At night a bar, during the day a delicious brunch spot.

Floated Content

Any element inside a list can be floated left or right

Add
Justen Kitsune
Add
Joe Henderson

Variations

Horizontal List

A list can be formatted horizontally

Tom
Top Contributor
Christian Rocha
Admin
Matt
Top Rated User
Steve Jobes
50 Points
Stevie Feliciano
44 Points
Jenny Hess
11 Points
Terms and Conditions Privacy Policy Contact Us
Copyright 2014 Semantic UI

Inverted

A list can be inverted to appear on a dark background

Snickerdoodle
An excellent companion
Poodle
A poodle, its pretty basic
Paulo
He's also a dog

Selection

A selection list formats list items as possible choices

Helen
Christian
Daniel

Animated

A list can animate to set the current item apart from the list

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.
Helen
Christian
Daniel

Vertical Alignment

A list can specify vertical alignment for content or images

Top Aligned
Middle

Relaxed

A list can relax its padding to provide more negative space

Daniel Louise
Last seen watching Arrested Development just now.
Stevie Feliciano
Last seen watching Bob's Burgers 10 hours ago.
Elliot Fu
Last seen watching The Godfather Part 2 yesterday.
Daniel Louise
Stevie Feliciano
Elliot Fu
Daniel Louise
Last seen watching Arrested Development just now.
Stevie Feliciano
Last seen watching Bob's Burgers 10 hours ago.
Elliot Fu
Last seen watching The Godfather Part 2 yesterday.
Daniel Louise
Stevie Feliciano
Elliot Fu

Divided

A list can show divisions between content

Daniel Louise
Stevie Feliciano
Elliot Fu
Cats
Horses
Dogs
Labradoodles
Shiba Inu
Mastiff
Horses Again
About Us
Contact
Support

Celled

A list can divide its items into cells

Snickerdoodle
An excellent companion
Poodle
A poodle, its pretty basic
Paulo
He's also a dog
Cats
Horses
Dogs
Labradoodles
Shiba Inu
Mastiff
About Us
Contact
Support

Sizes

A list can vary in size

Helen
Christian
Daniel
Helen
Christian
Daniel
Helen
Christian
Daniel
Helen
Christian
Daniel
Helen
Christian
Daniel
Helen
Christian
Daniel
Helen
Christian
Daniel

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header