List Styling Examples
Lists can make important information easier to scan. This page shows examples of the available list styles, icons, and color variations for organizing content clearly.
Styled list examples
Choose an icon and color variation that supports the meaning of the content. Keep the style consistent within a section so readers can focus on the information.
[auto_column columns=”4″ responsive=”true”]
[styled_list icon=”ok-sign” variation=”orange”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”remove” variation=”red”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”question-sign” variation=”black”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”star” variation=”copper”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”star-half” variation=”olive”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”chevron-right” variation=”treal”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”folder-close-alt” variation=”mossgreen”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”twitter-sign” variation=”silver”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”arrow-right” variation=”steelblue”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”ok” variation=”pearl”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”map-marker” variation=”hotpink”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[styled_list icon=”comment” variation=”yellow”]
- List item #1
- List item #2
- List item #3
- List item #4
[/styled_list]
[/auto_column]
[button size=”small” link=”/shortcodes/icons/” variation=”green”]Browse Available Icons[/button]
Color variation examples
Color can help distinguish groups of information, but it should not be the only way readers understand meaning. Pair each color with a clear icon and concise list text.
Warm colors
- Red star example
- Orange check example
- Hot pink comment example
- Wheat arrow example
Neutral and cool colors
- Green star example
- Olive check example
- Blue arrow example
- Purple comment example
- Silver plus example
- Black minus example
Tips for clearer lists
- Use a list when readers need to compare steps, options, or key details quickly.
- Start each item with a clear, parallel phrase.
- Use one icon style for items with the same purpose.
- Keep list items concise and add more detail in nearby text when needed.
Add a review
Your email address will not be published. Required fields are marked *