List API

Import

Cimpress UI exports two list-related components:

OrderedList: represents an ordered list of items, rendered as a numbered list
UnorderedList: represents an unordered list of items, rendered as a bulleted list

import { OrderedList, UnorderedList } from '@cimpress-ui/react';

Text style

List text style can be customized using text style properties. All text and link content within a list will inherit the list style.

Preview
Code

Please address the following errors:

Password should be at least 8 characters long.
Password should contain a special character.

import { ListItem, Stack, Text, UnorderedList } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={8}>
      <Text as="p" tone="critical" variant="small">
        Please address the following errors:
      </Text>
      <UnorderedList tone="critical" variant="small">
        <ListItem>Password should be at least 8 characters long.</ListItem>
        <ListItem>Password should contain a special character.</ListItem>
      </UnorderedList>
    </Stack>
  );
}

API reference

OrderedList

Renders an ordered list of text items in a specified style.

See list usage guidelines.

ref Section titled “ ref ” Ref<HTMLOListElement>: The ref type for this component.

OrderedListProps

children * Section titled “ children * ” ReactNode: Text to display. Allows nesting other typography components.
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.
aria-label Section titled “ aria-label ” string: Defines a string value that labels the current element.
aria-labelledby Section titled “ aria-labelledby ” string: Identifies the element (or elements) that labels the current element.
aria-describedby Section titled “ aria-describedby ” string: Identifies the element (or elements) that describes the object.
aria-details Section titled “ aria-details ” string: Identifies the element (or elements) that provide a detailed, extended description for the object.
startFrom Section titled “ startFrom ” number: An integer to start numbering list items from.
variant Section titled “ variant ” 'small' | 'medium' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'title-5' | 'title-6' | 'body' | 'body-semibold' | 'medium-semibold' | 'small-semibold': Determines the visual variant of text.
fontStyle Section titled “ fontStyle ” 'normal' | 'italic': Whether the font should be styled with a normal or italic face.
textDecoration Section titled “ textDecoration ” 'none' | 'underline' | 'strikethrough': The kind of decorative line applied to the text.
tone Section titled “ tone ” ForegroundTone: Determines the color tone of the text.

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

UnorderedList

Renders an unordered list of text items in a specified style.

See list usage guidelines.

ref Section titled “ ref ” Ref<HTMLUListElement>: The ref type for this component.

UnorderedListProps

children * Section titled “ children * ” ReactNode: Text to display. Allows nesting other typography components.
id Section titled “ id ” string: The element's unique identifier. See MDN.
data-cim-style-root Section titled “ data-cim-style-root ” boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className Section titled “ UNSAFE_className ” string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style Section titled “ UNSAFE_style ” CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.
aria-label Section titled “ aria-label ” string: Defines a string value that labels the current element.
aria-labelledby Section titled “ aria-labelledby ” string: Identifies the element (or elements) that labels the current element.
aria-describedby Section titled “ aria-describedby ” string: Identifies the element (or elements) that describes the object.
aria-details Section titled “ aria-details ” string: Identifies the element (or elements) that provide a detailed, extended description for the object.
variant Section titled “ variant ” 'small' | 'medium' | 'title-1' | 'title-2' | 'title-3' | 'title-4' | 'title-5' | 'title-6' | 'body' | 'body-semibold' | 'medium-semibold' | 'small-semibold': Determines the visual variant of text.
fontStyle Section titled “ fontStyle ” 'normal' | 'italic': Whether the font should be styled with a normal or italic face.
textDecoration Section titled “ textDecoration ” 'none' | 'underline' | 'strikethrough': The kind of decorative line applied to the text.
tone Section titled “ tone ” ForegroundTone: Determines the color tone of the text.

StyleProps

margin Section titled “ margin ” Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Section titled “ marginX ” Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Section titled “ marginY ” Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Section titled “ marginTop ” Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Section titled “ marginRight ” Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Section titled “ marginBottom ” Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Section titled “ marginLeft ” Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.

List API

Import

Text style

API reference

OrderedList

ref

children *

id

data-cim-style-root

UNSAFE_className

UNSAFE_style

aria-label

aria-labelledby

aria-describedby

aria-details

startFrom

variant

fontStyle

textDecoration

tone

margin

marginX

marginY

marginTop

marginRight

marginBottom

marginLeft