List and List Item

The List and ListItem components comprise the parts of an unordered list component.

Example

Preview

• list item one
• list item two
• list item three
• list item four

Code

import { List, ListItem } from '@hv/ui/list';

<List>
    <ListItem>list item one</ListItem>
    <ListItem>list item two</ListItem>
    <ListItem>list item three</ListItem>
    <ListItem>list item four</ListItem>
</List>

Props

List Props

Property	Description	Values
className	Custom CSS classes for styling the <ul>	String
props	Additional list properties from HTML attributes.	HTMLUListElement

List Item Props

Property	Description	Values
className	Custom CSS classes for styling the <ul>	String
children	The content of the list item	ReactNode
props	Additional list item properties from HTML attributes.	HTMLLIElement

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, you can pass className overrides on both list components.