Bugcrowd Design System

Bugcrowd Design System

Search/

List

Last modified:

Horizontally or vertically aligned lists of text. They are helpful to organize information and works well for presenting steps, options or groups.

Variants

Example of List - default

<BcList>
  <BcList.Item>Item one</BcList.Item>
  <BcList.Item>Item two</BcList.Item>
</BcList>
Open in Playroom

React documentation

Last modified:

To start using the BcList component in your project, ensure you import it as following:

import { BcList } from '@bugcrowd/bc-elements'

BcList props

PropTypeRequired?DefaultPurpose
childrenstringrequiredUsed to display the contents of the list.
asstringoptionalulUsed to set ul or ol as root element.
isLinedbooleanoptionalfalseUsed to define a line between items.
spacingstringoptionalUsed to define spacing between items.
variantstringoptionalUsed to switch between different variants.

Possible values for as prop

as valuesPurpose
ulUsed to set ul as root element.
olUsed to set ol as root element.

Possible values for spacing prop

spacing valuesDescription
spaciousSets a wider space between items in the list.
compactSets a more compact spacing between items in the list.

Possible values for variant prop

variant valuesDescription
bulletUsed to display bullet for each items in the list.
inlineUsed to display items inline in the list.
middotUsed to extend the inline variant’s styles and add a middot as a pseudo-element.
numberUsed to display numbered list, It is preferable to use ol as root element for number variant.

Any extended types:

  • React.HTMLAttributes<HTMLUListElement> if as='ul' is true
  • React.OlHTMLAttributes<HTMLOListElement> if as='ol' is true

BcList.Item

Items are the list items displayed for either ordered or unordered lists. It accepts default <li> attributes and has no props.

Any extended types: React.LiHTMLAttributes<HTMLLIElement>

HTML

Last modified:

Add .bc-list to an <ul> or <ol> element.

Ensure you’re using the correct semantic list to group list items:

  • Choose a semantically appropriate list based on the nature of your content
    • <ul> for unordered lists
    • <ol> for ordered lists
  • Do not use lists for layout purposes

Design

Last modified:

The following variants are available:

VariantPurpose
.bc-list--numberedUsed for a list when an inherent order, priority, or sequence needs to be communicated. Use an <ol> when using this variant.
.bc-list--bulletedUsed for a list that don’t need to be in a specific order
.bc-list--linedUsed for a list with a bottom bordered separator
.bc-list--inlineUsed for list to display horizontally
.bc-list--middotUsed for horizontal list only, with a dot as a separator between items
.bc-list--compactUsed for list when there is limited space for a list, this will reduce the space between items
.bc-list--spaciousUsed for list for allowing more space between items

Best practices

  • The --numbered and --bulleted variants are mutually exclusive
  • The spacing variants (--compact & --spacious) are mutually exclusive and can be chained with all other variants
  • The --middot variant extends the --inline variant’s styles, omitting the need to chain these two classes together
  • The --lined variant should not be used with the --inline or --middot variants

Accessibility

Last modified:

  • Write clear and concise lists, avoid lengthy paragraphs
  • Group related items together within a list to help users understand the context and relationship between list items

Rationale

Last modified:

Lists are essential for structuring and organizing content in a clear and meaningful way. They help improve readability, understandability and accessibility.

See also

Last modified: