Quick Links

CardList

Container that groups related content with header, body, and footer sections.

Client credentials

Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server.

This is the card's component

 <CardList.Root size="2">
  <CardList.Header
    title="Client credentials"
    description="Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server."
  >
    <Button>Add client credential</Button>
  </CardList.Header>
  <CardList.Body p="current">This is the card's component</CardList.Body>
  <CardList.Footer justify="center">
    <Button ghost size="1">
      View all notifications
    </Button>
  </CardList.Footer>
</CardList.Root>

API Reference

The CardList component is composed of several subcomponents that work together.

Root

The component is based on the Card component and supports all of its props.

Prop	Type	Default
`size`	`"1" \| "2"`	`"1"`

Prop	Type	Default
`title`	`React.ReactNode`	required
`description`	`React.ReactNode`
`children`	`React.ReactNode`

Search

The Search component extends HTML input props and will accept any props from the native HTML input element.

Body

By default the Body has no padding, but this can be changed by setting the p prop to "current" – which will use the same padding as the card.

Prop	Type	Default
`p`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`px`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`py`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`pt`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`pb`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`pr`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`
`pl`	`"current" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`

Prop	Type	Default
`justify`	`"start" \| "center" \| "end" \| "between"`	`"start"`
`children`	`React.ReactNode`

Examples

Header, Body and Footer

Client credentials

Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server.

This is the card's component

 <CardList.Root size="2">
  <CardList.Header
    title="Client credentials"
    description="Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server."
  />
  <CardList.Body p="current">This is the card's component</CardList.Body>
  <CardList.Footer justify="center">
    <Button ghost size="1">
      View all notifications
    </Button>
  </CardList.Footer>
</CardList.Root>

With Search

This is the card's component

10 entries

 <CardList.Root size="1">
  <CardList.Search />
  <CardList.Body p="current">This is the card's component</CardList.Body>
  <CardList.Footer>10 entries</CardList.Footer>
</CardList.Root>

Size Variants

Use the size prop to control the size of the CardList.

Client credentials

Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server.

This is the card's component

10 entries

Client credentials

Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server.

This is the card's component

10 entries

 <Flex direction="column" gap="3">
  <CardList.Root size="1">
    <CardList.Header
      title="Client credentials"
      description="Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server."
    />
    <CardList.Body p="current">This is the card's component</CardList.Body>
    <CardList.Footer>10 entries</CardList.Footer>
  </CardList.Root>

  <CardList.Root size="2">
    <CardList.Header
      title="Client credentials"
      description="Client credentials are a type of OAuth 2.0 token that are used to authenticate requests to a resource server."
    />
    <CardList.Body p="current">This is the card's component</CardList.Body>
    <CardList.Footer>10 entries</CardList.Footer>
  </CardList.Root>
</Flex>

With Scrolling Content

The Body is scrollable when content exceeds available space.

Typography

The art and technique of arranging type.

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used synonymously, typographically they are separate but related concepts.

Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable and recognisable". For instance, if a "b" and an "h", or a "3" and an "8", are difficult to distinguish at small sizes, this is a problem of legibility.

Typographers are concerned with legibility insofar as it is their job to select the correct font to use. Brush Script is an example of a font containing many characters that might be difficult to distinguish. The selection of cases influences the legibility of typography because using only uppercase letters (all-caps) reduces legibility.

Source: Wikipedia

 <CardList.Root size="1" style={{ height: 250 }}>
  <CardList.Header
    title="Typography"
    description="The art and technique of arranging type."
  />
  <CardList.Body>
    <Flex direction="column" gap="4" p="var(--card-padding)">
      <Text as="p">
        Three fundamental aspects of typography are legibility, readability, and
        aesthetics. Although in a non-technical sense "legible" and "readable"
        are often used synonymously, typographically they are separate but
        related concepts.
      </Text>
      <Text as="p">
        Legibility describes how easily individual characters can be
        distinguished from one another. It is described by Walter Tracy as "the
        quality of being decipherable and recognisable". For instance, if a "b"
        and an "h", or a "3" and an "8", are difficult to distinguish at small
        sizes, this is a problem of legibility.
      </Text>
      <Text as="p">
        Typographers are concerned with legibility insofar as it is their job to
        select the correct font to use. Brush Script is an example of a font
        containing many characters that might be difficult to distinguish. The
        selection of cases influences the legibility of typography because using
        only uppercase letters (all-caps) reduces legibility.
      </Text>
    </Flex>
  </CardList.Body>
  <CardList.Footer>Source: Wikipedia</CardList.Footer>
</CardList.Root>

Body and Footer

This is the card's component

10 entries

 <CardList.Root size="1">
  <CardList.Body p="current">This is the card's component</CardList.Body>
  <CardList.Footer>10 entries</CardList.Footer>
</CardList.Root>

Body Only

This is the card's component

 <CardList.Root size="2">
  <CardList.Body p="current">This is the card's component</CardList.Body>
</CardList.Root>