Use action lists to provide multiple action or option links structured as a group.
An optional border separates each list item.
1. With border
2. Without border
Usage
Use an action list to provide navigation for exploration and task completion
Don't use for conversion-optimised journeys, e.g. selling a product or service. This component does not draw people in, instead use cards or buttons.
Writing an action in a list
- Imagine finishing this sentence in as few words as possible: "On the next page, you’ll find [name of product]"
-
Now see if you can write that product name in even fewer words
- use only nouns or only verb phrases in a list - for example 'Change your direct debit details', 'Your energy tariff'
- make sure your links share a similar focus, and name that focus with a 1- to 2-word header
- be concise
- check it will make sense to a screenreader – can this copy stand alone with no body copy and still make sense?
- vary the tone link to link – the entire group should feel cohesive
- use more than 4 tertiary links together
- use a question
Tone of voice
Dial up our straight-talking and inclusive traits - find out more in our tone of voice guidelines.
Moving home
Moving checklist
Plans and pricing
Offers for movers
OVO support
There’s even more to see
Help me change my address
New offers for new homeowners
Help me move my utilities
How green is my new grid?
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links
- Link URL