---
title: "Bullet List"
description: "The Bullet List Component can be used to List multiple Points."
path: https://www.eonshowroom.eon.com/en/content-elements/bullet-list.html
lastModified: 2026-08-11T07:50:43.956Z
---

# Bullet List

# Bullet List

- Chocolate cake apple pie marshmallow. Jelly-o chocolate bar caramels chupa chups carrot cake sugar plum cupcake bonbon brownie.
- Features Tooltip
- Chocolate bar pie brownie cupcake wafer jelly beans bear claw chupa chups. Muffin marshmallow cake chocolate cake jelly-o.
- Chupa chups jujubes marshmallow icing dessert fruitcake danish topping. Muffin apple pie tootsie roll toffee bonbon soufflé topping gummi bears.

[Info Icon Key: info-icon-1]

[Info Icon Aria Label: Tooltip]

[Info Icon Content Type: Experience fragment]

[Info Icon Content Start: info-icon-1]

## Opening on Hover

This is some Abstract Text

Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

[Link to How-To](#how-to)

[Info Icon Content End: info-icon-1]

[How to Configure](#how-to)

### Description

The Bullet List Component can be used to List multiple Points.

- Combining different List Icons or having same Icon for all Bullet List Items
- Highlight Option per Bullet List Item

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-bullet-list--interactive)

### Inspirations

- Chocolate cake apple pie marshmallow. Jelly-o chocolate bar caramels chupa chups carrot cake sugar plum cupcake bonbon brownie.
- Cake pudding sweet roll. Danish gummi bears pie marshmallow jelly beans donut.
- Chupa chups jujubes marshmallow icing dessert fruitcake danish topping. Muffin apple pie tootsie roll toffee bonbon soufflé topping gummi bears.

- Chocolate cake apple pie marshmallow. Jelly-o chocolate bar caramels chupa chups carrot cake sugar plum cupcake bonbon brownie.
- Cake pudding sweet roll. Danish gummi bears pie marshmallow jelly beans donut.
- Chupa chups jujubes marshmallow icing dessert fruitcake danish topping. Muffin apple pie tootsie roll toffee bonbon soufflé topping gummi bears.

### Usage Rules & Features

##### Features

- Same Icons for each Item or different Icon per Bullet List Item
- Tooltip can be added per Bullet List Item

##### Properties

- Add as many Items as needed
- Extend Bullet List Icon List in corresponding Configuration by Icons from Repository

##### Design

- Bullet List can be sized Normal or Large

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | not advisable |
| 3 | yes |
| 4 | yes |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | not advisable |

##### DO's

- Use different Icons to highlight a Bullet List Item
- Always use fixed Width of Icon when using different Icons in one List, for better Alignment
- Large Size should mainly be used on Landing Pages, Page Header, Section, or on Images

##### DONT's

- Don't use it often in 2 or 12 Column Grid as this is hard to read on Websites
- Do not use Large Size on normal Pages

## Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha)

![Create Bullet List Items](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bullet-list_add-item%3A1-1?fmt=webp)

### Configure Bullet Points

For adding a Bullet List Items Editor just need one Click on "Add" Button. There are no Limitations on Text Length or maximal Number of Bullet List Items.

For each Bullet List Item, Editors can select the Icon and apply Text, as well as add an Info Icon.

Selecting "Enable Info Icon" Checkbox reveals some Options. In these Options, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip.

[Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html)

![Style Bullet List](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bullet-list_style%3A4-3?fmt=webp)

### Style Bullet List

Two different Sizes are available:

- Normal

Normal Size is ment to be used on normal Content Pages.

- Large

Large Size should mainly be used on Landing Pages, Page Header Section or on Images.

Furthermore, Editor can add a "Default Icon", which will be used, if no Icon is configured for the individual Bullet List Items.

Beside that, a fixed Width, so that all Icons are center aligned and the Text is left aligned, can be choosen. This is recommanded if using different List Icons in one List.

#### Keep in Mind

To get more / other Icons on your Icon List, just use FoundationNg Bullet List Icon Config.

[Read more about FoundationNg Bullet List Icon Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html)