Bullet List
Bullet lists are a useful way to organize information, making your content more readable and usable for all users. The Bullet List component is used to create lists where the order of the items is significant, such as in step-by-step instructions.
Räkna på bolån – så funkar det
-
Se hur mycket du kan låna
Räkna ut hur mycket du kan låna och vad det kommer att kosta dig.
-
Nästa steg – ansök om lånelöfte
Ansök om lånelöfte och få svar direkt! Lånelöftet är kostnadsfritt och du förbinder dig inte till något genom att ansöka.
Best practice
Vertical & numbered layout:
With headline
-
Heading
H3
-
Bullet size
Large
-
Type
Numbered
-
Background color
Peach
-
Heading
H2
-
Bullet size
Large
-
Type
Numbered
-
Background color
None
-
Heading
H3
-
Bullet size
Medium
-
Type
Numbered
-
Background color
Sky
Vertical & checkmark layout:
With headline
-
Heading
H2
-
Bullet size
Large
-
Type
Checkmark
-
Background color
None
-
Heading
H3
-
Bullet size
Medium
-
Type
Checkmark
-
Background color
Mist
-
Heading
H3
-
Bullet size
Large
-
Type
Checkmark
-
Background color
Apricot
-
Heading
H3
-
Bullet size
Small
-
Type
Checkmark
-
Background color
Rose
Horizontal & numbered layout:
-
Heading
H2
-
Bullet size
Large
-
Type
Numbered
-
Background color
None
Horizontal & checkmark layout:
-
Heading
H2
-
Bullet size
Large
-
Type
Checkmark
-
Background color
Thistle
For screen reader users, lists are even more important. When a screen reader encounters a list, it informs the user that there is a list and how many items it contains. Your responsibility is to ensure the list is properly formatted. By using the Bullet list component or List function in the Rich Text Editor, a proper list is created.
Do
-
Use lists as they are a useful way to organize information in a page
-
Create properly formatted bullet lists as they can be interpreted also by screen readers and other assistive devices
-
Always use the List function or Bullet list component in AEM to create lists
-
Make sure that lists pasted from other programs to AEM are made into correct bullet lists
Don't
-Do not create manual lists with paragraphs, bullet symbols or numbers
-Screen readers will not identify it as a list, but read the items as unrelated paragraphs
-The user will not know how many items are in the "list", or which lines are indented
-Screen readers will also announce the names of the symbols at the start of each new line: "Dash! Dash!, or Bullet! Bullet!" if manually inserted bullet symbols are used
Configuration in AEM
Having a bullet list headline (H2) is optional.
![BL headline](/adobe/dynamicmedia/deliver/dm-aid--7050c3a5-5fd8-4373-8278-1098db03a324/bl-headline.png?preferwebp=true&quality=82)
With Headline
-
Heading
H3
-
Bullet size
Large
-
Type
Numbered
-
Background color
Peach
There are nine layout options available:
- Vertical – Header size: H3, Bullet size: Large, Type: Numbered
- Vertical – Header size: H3, Bullet size: Large, Type: Checkmark
- Vertical – Header size: H3, Bullet size: Medium, Type: Numbered (default)
- Vertical – Header size: H3, Bullet size: Medium, Type: Checkmark
- Vertical – Header size: H3, Bullet size: Small, Type: Checkmark
- Vertical – Header size: H2, Bullet size: Large, Type: Numbered
- Vertical– Header size: H2, Bullet size: Large, Type: Checkmark
- Horizontal – Header size: H2, Bullet size: Large, Type: Numbered
- Horizontal – Header size: H2, Bullet size: Large, Type: Checkmark
![BL layout collapsed](/adobe/dynamicmedia/deliver/dm-aid--3ebdbf2b-3eb7-4ffc-aec1-c0ff65564ab3/bl-layout-collapsed.png?preferwebp=true&quality=82)
There are seven background color options available:
- None (White) - default
- Apricot
- Peach
- Sky
- Mist
- Rose
- Thistle
![BL backgound color collapsed](/adobe/dynamicmedia/deliver/dm-aid--fb6e845b-f0f8-42dd-b1e7-54a9c34d4c86/bl-background-color-collapsed.png?preferwebp=true&quality=82)
![Flex background colors](/adobe/dynamicmedia/deliver/dm-aid--83d6a2c9-eaf2-4e61-8aa5-681f19285264/flex-background-colors.png?preferwebp=true&quality=82)
When you have made all your settings, move on to the Bullet List tab. Click "Add" to create the first bullet in your bullet list.
![BL add 2](/adobe/dynamicmedia/deliver/dm-aid--1c7dd1d2-9a0c-46e4-a3d2-da8562bb2d9f/bl-add.png?preferwebp=true&quality=82)
Bullet list tab
- Insert content.
- Choose a header text (if needed) and main text for the bullet.
- Type or paste your desired text and click "Add" again to create a new bullet.
![BL add 1](/adobe/dynamicmedia/deliver/dm-aid--d77e6ca6-35cd-4dd7-baf9-ce2ff40c604b/bl-add-2.png?preferwebp=true&quality=82)