List Header

The ListHeader component provides a way to include additional details about a list or other content immediately following it in the markup.

Polymorphic Component

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

Accessibility

The ListHeader component can be used to provide a complex set of details about content that succeeds it on the page. To ensure this content is accessible, this component should be given an id attribute to be referenced by the succeeding content in an aria-details=... attribute.

<ListHeader id="list-header-id" ... />
<div aria-details="list-header-id">...</div>

Read more about aria-details.

Examples

Basic List Header

The ListHeader comes in two different sizes.

List Header

Required

List Header

Required

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

<ListHeader
  size="{sm|lg(default)}"
  headerTitle={<div>Title</div>}
  meta={<div>Meta</div>}
  helperText={<div>Helper</div>}
  divider
/>

Props

ListHeaderProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
divider	false | true	true	No	Should a divider be rendered below the component?
headerTitle	ReactNode		Yes	The title of the list header
meta	ReactNode		No	Meta text to be rendered at the top right of the component
size	"lg" | "sm"	"lg"	No	The size of the title content