# List A list groups related content ### Examples: ```example Apples Pears Oranges ``` ```example Semantic UI New York, NY test@test.com ``` ```example const ListIconComponent = (props) => ;
Semantic-Org/Semantic-UI
Updated 10 mis ago
Semantic-Org/Semantic-UI-Docs
Updated 22 mins ago ``` ```example
src
Source files for project
site
Your site's name
Themes
Theme sfolder
Folder
Another folder ``` ## Types ### Bulleted ```example Gaining access Inviting Friends
Benefits
Test 1 Test 2 ``` ### Ordered ```example Gaining access Inviting Friends
Benefits
Test 1 Test 2 ``` ### Link list ```example ListItem 1 ListItem 2 ListItem 3 ``` ## Content ### Simple item ```example 1 2 3 ``` ### Item with icon by default image prop is assumed as icon name ```example test
Text
Description Inline text ``` ### Item with image *Note: by default image is assumed as avatar image since it's most common case, you can provide custom image component to override* ```example
Rachel
Test
Text
Description ``` ### Custom Image/Icon component ```example const MyCustomIcon = ({ name }) => ; const MyCustomImage = ({ src }) => ; test
Rachel
Test ``` ### Right floated component ```example MyCustomRightFloatedComponent = () => ; Lena Lena Lena ``` ### Item with header ```example
Test header
test text
Another header
another text ``` ## Variations ### Horizontal list ```example
Tom
Top person
Tom
Top person
Tom
Top person ``` ### Inverted list ```example Test 1 Test 1 Test 1 Test 1 ``` ### Selection list ```example
Tom
Top person
Tom
Top person
Tom
Top person ``` ### Animated list ```example
Tom
Top person
Tom
Top person
Tom
Top person ``` ### Relaxed ```example
Tom
Top person
Tom
Top person
Tom
Top person ``` ```example
header
header
header
 ``` ### Divided ```example
header
header
header
 ``` ### Celled ```example
header
header
header
 ``` ### Size ```example
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
header
```