Semantic UI icon logoUI Docs

Getting Started
Guidelines
OverviewDesign Principles
Styles
OverviewDesign tokensColorTypographyIconography
Components
ButtonContainerCardDividerInputGridList
Support

List

Ordered items

Types

List

A list groups related content

Apples
Pears
Oranges
Example
Example
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
Example
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
Example

Bulleted

A list can mark items with a bullet

Gaining Access
Inviting Friends
Benefits
Link to somewhere
Rebates
Discounts
Warranty
Example

For convenience, a simple bulleted list can also use ul tag.

  • Gaining Access
  • Inviting Friends
  • Benefits
    • Use Anywhere
    • Rebates
    • Discounts
  • Warranty
Example

Ordered

A list can be ordered numerically

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
Example

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
Example

Link

A list can be specially formatted for navigation links

Example

Content

Item

A list item can contain a set of items

1
2
3
Example

Icon

A list item can contain an icons

Image

A list item can contain an image

Due to issues with intrinsic aspect ratio in flexbox img should use a container element.

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
Example

Link

A list can contain links

Header
Click a link in our description.
Learn More
Learn more about this site on our FAQ page.
Example

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
Example

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

Variations

Horizontal

A list can be formatted to have items appear horizontally

Tom
Top Contributor
Christian Rocha
Admin
Matt
Top Rated User
Example
Steve Jobes
50 Points
Stevie Feliciano
44 Points
Jenny Hess
11 Points
Example

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
Example

Selection

A selection list formats list items as possible choices

Helen
Christian
Daniel
Example

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
Example

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

Divided

A list can show divisions between content

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
Example
Cats
Horses
Dogs
Labradoodles
Shiba Inu
Mastiff
Example
About Us
Contact
Support
Example

Size

A list can vary in size

Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example
Helen
Christian
Daniel
Example

Content Variations

Vertically Aligned

An element inside a list can be vertically aligned

Top Aligned
Middle
Bottom
Example

Floated

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

Add
Lena
Add
Lindsay
Add
Mark
Add
Molly
Example
Example