List

A structured content surface with multiple configurations.

Polymorphic Component

By default, content is rendered inside a <ul>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Small List

A List with a size of sm supports a leading icon, trailing icon, leading text, meta text, and trailing text. A titleBold prop allows for the text to be made bold like the larger lists.

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

import { List } from '@curology/ui-components-web/react/List';
import { ListItem } from '@curology/ui-components-web/react/List/ListItem';

<List size="sm">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart={<PlaceholderIcon />}
    iconEnd={<PlaceholderIcon />}
    titleBold
  />
</List>

Medium List

A List with a size of md supports a leading icon, trailing icon, leading text, meta text, and trailing text. If no iconStart is provided but an iconEnd is, the trailing icon will be medium. Otherwise, it will be small.

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text

Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

import { List } from '@curology/ui-components-web/react/List';
import { ListItem } from '@curology/ui-components-web/react/List/ListItem';

<List size="md">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart={<PlaceholderIcon />}
    iconEnd={<PlaceholderIcon />}
  />
</List>

Large List

A List with a size of lg supports a leading icon, trailing icon, leading text, meta text, and trailing text. If no iconStart is provided but an iconEnd is, the trailing icon will be medium. Otherwise, it will be small.

Leading Text
Meta
Trailing text
Leading Text
Meta
Leading Text
Meta
Leading Text
Trailing text
Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text

Leading Text
Meta
Leading Text
Leading Text
Trailing text
Leading Text
Trailing text
Leading Text
Meta
Trailing text

import { List } from '@curology/ui-components-web/react/List';
import { ListItem } from '@curology/ui-components-web/react/List/ListItem';

<List size="lg">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart={<PlaceholderIcon />}
    iconEnd={<PlaceholderIcon />}
  />
</List>

Extra Large List

A List with a size of xl supports a leading icon, trailing icon, leading text, meta text, and trailing text. Unlike the other Lists, an iconStart and iconEnd cannot be used together. Trailing text cannot be used with iconEnd.

Leading Text
Subtext
Trailing text
Leading Text
Trailing text
Leading Text
Leading Text
Subtext
Trailing text
Leading Text
Subtext

import { List } from '@curology/ui-components-web/react/List';
import { ListItem } from '@curology/ui-components-web/react/List/ListItem';

<List size="xl">
  <ListItem
    title="Leading Text"
    meta="Meta"
    titleEnd="Trailing text"
    iconStart={<PlaceholderIcon />}
    iconEnd={<PlaceholderIcon />}
  />
</List>

Image List

A List of any size supports imageStart and imageEnd props. Pass in an Image Component.

Small List
Meta
Trailing text
Small List
Meta
Trailing text

Medium List
Meta
Trailing text
Medium List
Meta
Trailing text

Large List
Meta
Trailing text
Large List
Meta
Trailing text

XLarge List
Trailing text
XLarge List
Trailing text

import { List } from '@curology/ui-components-web/react/List';
import { ListItem } from '@curology/ui-components-web/react/List/ListItem';
import { Image } from '@curology/ui-components-web/react/Image';
import exampleImage from './example.jpg';

<List ...>
  <ListItem
    ...
    imageStart={
      <Image
        src={exampleImage}
        className="cur-max-w-[3rem]"
        title="Example square image"
      />
    }
  />
  <ListItem
    ...
    imageEnd={
      <Image
        src={exampleImage}
        className="cur-max-w-[3rem]"
        title="Example square image"
      />
    }
  />
</List>

Props

`ListProps`

Name	Type	Default Value	Required	Description
All attributes of a `<ul />`
`id`	`string`	`''`	No	A unique ID for this list.
`size`	`"md" \| "lg" \| "sm" \| "xl"`	`'md'`	No	Which size list should be displayed?

`ListItemProps`

Name	Type	Default Value	Required	Description
All attributes of a `<li />`
`iconEnd`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No	An icon to display at the end of the list item.
`iconStart`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No	An icon to display at the start of the list item.
`imageEnd`	`ReactElement<any, string \| JSXElementConstructor<any>>`		No	An image to display at the end of the list item.
`imageStart`	`ReactElement<any, string \| JSXElementConstructor<any>>`		No	An image to display at the start of the list item.
`meta`	`ReactNode`		No	Secondary information to display.
`title`	`ReactNode`		Yes	A title to display.
`titleBold`	`false \| true`	`false`	No	Should the title be bold?
`titleEnd`	`ReactNode`		No	Tertiary information to display.

`ListItemIconProps`

Name	Type	Default Value	Required	Description
All attributes of a `<svg />`
`fillMethod`	`"path" \| "stroke"`		No	Which fill method should be used?
`icon`	`ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<any, string \| JSXElementConstructor<any>> \| ForwardRefExoticComponent<any>`		No
`size`	`null \| number \| "md" \| "lg" \| "sm" \| "xl" \| "xs" \| "xxl"`	`'md'`	No	How large should the icon be? Use `null` to rely on the size of the SVG itself.

Examples​

Small List​

Medium List​

Large List​

Extra Large List​

Image List​

Props​

ListProps

ListItemProps

ListItemIconProps