Bulleted List

Ready

Bulleted list are used to display text items in a bulleted format.

Code

Usage

Specifications

Props

DxcBulletedList

Name	Default	Description
type: 'disc' \| 'circle' \| 'square' \| 'number' \| 'icon'	`'disc'`	Defines the style of the bullet point in the list.
icon: string \| SVGSVGElement		Icon to display as bullet.

DxcBulletedList.Item

Everything between the tags will be displayed as a text item in the list.

Props

Name	Default	Description
children: node		Text to be shown in the list.

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="number">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>Usage</DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="number">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>Usage</DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}

Nested list

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="square">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>
          Usage
          <DxcBulletedList type="circle">
            <DxcBulletedList.Item>Usage for admins.</DxcBulletedList.Item>
            <DxcBulletedList.Item>Usage for non-admins.</DxcBulletedList.Item>
          </DxcBulletedList>
        </DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="square">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>
          Usage
          <DxcBulletedList type="circle">
            <DxcBulletedList.Item>Usage for admins.</DxcBulletedList.Item>
            <DxcBulletedList.Item>Usage for non-admins.</DxcBulletedList.Item>
          </DxcBulletedList>
        </DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}

Props

DxcBulletedList

DxcBulletedList.Item

Examples
Basic usage
Nested list

Edit this page on GitHub

Box

NextButton

Bulleted List

Props

DxcBulletedList

DxcBulletedList.Item

Props

Examples

Basic usage

Nested list

Contents