Menu
List
UI Docs
Getting Started New in 2.4
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Advertisement Card Comment Feed Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition
Behaviors
API Form Validation Visibility

List
A list is used to group related content

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

List

Types
ListBulletedOrderedLink
Content
ItemIconImageLinkHeaderDescription
Variations
HorizontalInvertedSelectionAnimatedRelaxedDividedCelledSize
Content Variations
Vertically AlignedFloated

Types

List

A list groups related content

Apples
Pears
Oranges
Semantic UI
New York, NY
jack@semantic-ui.com
semantic-ui.com
Semantic-Org/Semantic-UI
Updated 10 mins ago
Semantic-Org/Semantic-UI-Docs
Updated 22 mins ago
Semantic-Org/Semantic-UI-Meteor
Updated 34 mins ago
src
Source files for project
site
Your site's theme
themes
Packaged theme files
default
Default packaged theme
my_theme
Packaged themes are also available in this folder
theme.config
Config file for setting packaged themes
dist
Compiled CSS and JS files
components
Individual component CSS and JS
semantic.json
Contains build settings for gulp

Bulleted

A list can mark items with a bullet

Gaining Access
Inviting Friends
Benefits
Link to somewhere
Rebates
Discounts
Warranty
For convenience, a simple bulleted list can also use ul tag.
  • Gaining Access
  • Inviting Friends
  • Benefits
    • Use Anywhere
    • Rebates
    • Discounts
  • Warranty
About Us Sitemap Contact

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
You can also manually specify a value for an ordered list using data-value on a div, or value on an li
  1. Signing Up
  2. User Benefits
  3. User Types
    1. Admin
    2. Power User
    3. Regular User
  4. Deleting Your Account

Link

A list can be specially formatted for navigation links

Home
About Jobs Team

Content

Item

A list item can contain a set of items

1
2
3

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 top aligned. To have an icon top aligned try this example.
Inline Text

Image

A list item can contain an image

Rachel
Last seen watching Arrested Development just now.
Lindsay
Last seen watching Bob's Burgers 10 hours ago.
Matthew
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? Who is our user? Where is our office located?
Header
Click a link in our description.
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

Krolewskie 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.

Variations

Horizontal

A list can be formatted to have items appear 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

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 text content will reflow when hovered.
Helen
Christian
Daniel

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

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

Size

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

Content Variations

Vertically Aligned

An element inside a list can be vertically aligned

Top Aligned
Middle
Bottom

Floated

An list, or an element inside a list can be floated left or right

Add
Lena
Add
Lindsay
Add
Mark
Add
Molly
© GitHub, Inc.
Terms Privacy Contact
About Us Jobs

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
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