--- layout : 'default' css : 'list' element : 'list' elementType : 'element' title : 'List' description : 'A list is used to group related content' type : 'UI Element' themes : ['Default'] --- <%- @partial('header') %>

Types

List

A list

Apples
Pears
Oranges
Daniel Louise
Friends since 1992
Hey man
Hey man so I forgot to send you an invite to my party, but its 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

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

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

Link

A link list is specially formatted for page links

Content

Icon

A list item can contain an icon

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.

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

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

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

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