The BulletedList
component is a styled bulleted (unordered) list that works for right-to-left and left-to-right languages.
npm install @bbc/psammead-bulleted-list --save
Argument | Type | Required | Default | Example |
---|---|---|---|---|
dir | string | No | 'ltr' |
One of 'rtl' 'ltr' |
script | script | Yes | N/A | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } |
service | string | Yes | N/A | 'news' |
bulletPointShape | 'round' or 'square' |
No | N/A | 'round' |
bulletPointColour | CSS Colour | No | '#3F3F42' |
'#ff0000' |
Use BulletedList
in place of a ul
element with required props and a BulletedListItem
in place of an li
.
import BulletedList, { BulletedListItem } from '@bbc/psammead-bulleted-list';
const props = {
dir: 'ltr',
script: latin,
service: 'news',
bulletPointShape: 'round', // or 'square'
};
<BulletedList {...props}>
<BulletedListItem>A list item</BulletedListItem>
<BulletedListItem>Another item</BulletedListItem>
</BulletedList>
BulletedList
s can be used wherever you need a standard GEL unordered list.
It's not ideal for when you need a custom bullet. Use the standard <ul>
instead if you need to style your bullets.
-
The bullets in
psammead-bulleted-lists
are not read by screen readers and are generated using pseudo-elements. -
We have added role list and role listitem to the corresponding items due to a VoiceOver bug to reinstate the list semantics
Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead repository.
We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.
Psammead is Apache 2.0 licensed.