Menu

List
A list is used to group related content

Download

Types

List

A list groups related content

Apples
Pears
Oranges
Semantic UI
New York, NY
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

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

Content

Item

A list item can contain a set of items

1
2
3

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

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

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

Dimmer Message
Dimmer sub-header