List Items

Lists are vertical groupings of text with either a number or a bullet.

molecule

Sep 27, 2021 · 1 min de lecture


#Unordered Items

#Bullet

Bullet list items are used to list elements without any specific order.

  • ListItem Medium
  • ListItem Medium
  • ListItem Medium

#Icon

Icons can be used instead of bullet points to list elements.

  • info@website.ca

  • info@website.ca

  • 444-555-2222

import { ListItem, Stack, useTreatTheme } from '@newrade/core-react-ui';
import React from 'react';
import { IoMailOutline, IoPhonePortraitOutline } from 'react-icons/io5';
type Props = {};
export const ListItemsIcon: React.FC<Props> = (props) => {
const { theme, cssTheme } = useTreatTheme();
return (
<>
<Stack as={'ul'} gap={[cssTheme.sizing.var.x2]}>
<ListItem variantIcon={'icon'} Icon={<IoMailOutline />}>
info@website.ca
</ListItem>
<ListItem variantIcon={'icon'} Icon={<IoMailOutline />}>
info@website.ca
</ListItem>
<ListItem variantIcon={'icon'} Icon={<IoPhonePortraitOutline />}>
444-555-2222
</ListItem>
</Stack>
</>
);
};

#Size

Four sizes are available for list items.

  • ListItem Bullet Large

  • ListItem Bullet Medium

  • ListItem Bullet Small

  • ListItem Bullet XSmall

  • ListItem Icon Large

  • ListItem Icon Medium

  • ListItem Icon Small

  • ListItem Icon XSmall

import { PARAGRAPH_SIZE } from '@newrade/core-design-system';
import { ListItem, ListItems, useTreatTheme } from '@newrade/core-react-ui';
import React from 'react';
import { IoMailOutline } from 'react-icons/io5';
type Props = {};
export const ListItemsSizes: React.FC<Props> = (props) => {
const { theme, cssTheme } = useTreatTheme();
return (
<>
<ListItems gap={[cssTheme.sizing.var.x3]}>
<ListItem variantSize={PARAGRAPH_SIZE.large} variantIcon={'bullet'}></ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.medium} variantIcon={'bullet'}></ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.small} variantIcon={'bullet'}></ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.xSmall} variantIcon={'bullet'}></ListItem>
</ListItems>
<ListItems gap={[cssTheme.sizing.var.x3]}>
<ListItem
variantSize={PARAGRAPH_SIZE.large}
variantIcon={'icon'}
Icon={<IoMailOutline />}
></ListItem>
<ListItem
variantSize={PARAGRAPH_SIZE.medium}
variantIcon={'icon'}
Icon={<IoMailOutline />}
></ListItem>
<ListItem
variantSize={PARAGRAPH_SIZE.small}
variantIcon={'icon'}
Icon={<IoMailOutline />}
></ListItem>
<ListItem
variantSize={PARAGRAPH_SIZE.xSmall}
variantIcon={'icon'}
Icon={<IoMailOutline />}
></ListItem>
</ListItems>
</>
);
};

#Multi-lines

Multi-lines list items are always align to item on the right.

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  • Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  1. Lorem ipsum dolor sit amet

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  3. Lorem ipsum dolor sit amet

  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  5. Lorem ipsum dolor sit amet

  6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

import { PARAGRAPH_SIZE } from '@newrade/core-design-system';
import {
lorenipsum,
lorenipsumShort,
} from '@newrade/core-gatsby-ui/src/docs-components/loren-ipsum';
import { ListItem, Stack, useTreatTheme } from '@newrade/core-react-ui';
import React from 'react';
type Props = {};
export const ListItemsMultiLine: React.FC<Props> = (props) => {
const { theme, cssTheme } = useTreatTheme();
return (
<>
<Stack as={'ul'} gap={[cssTheme.sizing.var.x2]}>
<ListItem variantSize={PARAGRAPH_SIZE.large}>{lorenipsumShort}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.large}>{lorenipsum}</ListItem>
<ListItem>{lorenipsumShort}</ListItem>
<ListItem>{lorenipsum}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.xSmall}>{lorenipsumShort}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.xSmall}>{lorenipsum}</ListItem>
</Stack>
<Stack as={'ol'} gap={[cssTheme.sizing.var.x4]}>
<ListItem variantSize={PARAGRAPH_SIZE.large}>{lorenipsumShort}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.large}>{lorenipsum}</ListItem>
<ListItem>{lorenipsumShort}</ListItem>
<ListItem>{lorenipsum}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.xSmall}>{lorenipsumShort}</ListItem>
<ListItem variantSize={PARAGRAPH_SIZE.xSmall}>{lorenipsum}</ListItem>
</Stack>
</>
);
};

#Ordered

Ordered list items are used to list elements with a specific order.

#Number

  1. ListItem Number Medium

  2. ListItem Number Medium

  3. ListItem Number Medium

import { ListItem, Stack, useTreatTheme } from '@newrade/core-react-ui';
import React from 'react';
type Props = {};
export const ListItemsNumber: React.FC<Props> = (props) => {
const { theme, cssTheme } = useTreatTheme();
return (
<>
<Stack as={'ol'} gap={[cssTheme.sizing.var.x3]}>
<ListItem variantIcon={'number'}></ListItem>
<ListItem variantIcon={'number'}></ListItem>
<ListItem variantIcon={'number'}></ListItem>
</Stack>
</>
);
};