Homecomponentsinformational

BulletList

An unordered list with the ability to use icons as bullets.


Overview

You can create an unordered list using the pair of components BulletList and BulletItem.

  • A photo of your face works better than a logo.
  • Make sure to smile.
  • Try to use a solid background.

Bullet Size and spacing

The size of the bullets can be changed using the size property on BulletList. It also affects the gap between list items and between the bullet and the content.

Small

  • A photo of your face works better than a logo.
  • Make sure to smile.
  • Try to use a solid background.

Medium

  • Get a free online profile. Increase your Google ranking visibility with on average 80 000 visitors per day.
  • Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Contact new clients without any limits. Opportunities are endless: browse and filter the requests. You’ll be able to directly call them or talk on our messenger.

Large

  • Compare the nutritionists' prices and find the one just right for your budget.
  • Check which kind of nutrition plan they provide: vegan, vegetarian, gluten-free, low cholesterol, for obesity, etc.
  • Check if the professional works with your health insurance.
  • Check the professional's certifications.

Icon Bullets

Setting the icon on the BulletList will change the bullets of all items.

  • Item 1
  • Item 2
  • Item 3

Distinct Item Bullets

You can also set icon on the BulletItem to change bullets for individual items.

  • Item 1
  • Item 2
  • Item 3

Bullet color

You can change the color of bullets using the color property on BulletList or BulletItem.

  • Item 1
  • Item 2
  • Item 3

Multi-Column Lists With Reading Direction

Use layout property to display a 2-column list.

Vertical layout

  • First - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Second - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Third - Short text.
  • Fourth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Fifth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Sixth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.

Horizontal layout

  • First - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Second - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Third - Short text.
  • Fourth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Fifth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.
  • Sixth - Receive qualified requests from potential clients. On average 10 questions are asked to the clients to better qualify their project and their needs.

API

BulletList

children
Required
List items.
ReactNode

size
Size of the bullet list.
small
medium
large

icon
Bullet icon.
IconComponent

color
Bullet color.
inherit
white
primary
dark
default
subdued
xsubdued
muted
xmuted
positive
negative
rating

layout
List layout.
horizontal
vertical

data
An object with the data keys and values.
DataAttributeMap

BulletItem

children
Required
Content of the list item.
ReactNode

size
Size of the bullet list.
BulletListSize

icon
Bullet icon.
IconComponent

color
Bullet color.
inherit
white
primary
dark
default
subdued
xsubdued
muted
xmuted
positive
negative
rating

data
An object with the data keys and values.
DataAttributeMap