Container that groups related content with header, body, and footer sections.
<CardList.Root> <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>
The component is based on the Box component and supports all of its props.
It’s important to note that the component intentionally does not include a size prop. This design decision allows the Card padding to automatically adjust based on its content, particularly when used in conjunction with the ListCell component.
The Search component extends HTML input props and will accept any props from the native HTML input element.
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" |
<CardList.Root> <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>
<CardList.Root> <CardList.Search /> <CardList.Body p="current">This is the card's component</CardList.Body> <CardList.Footer>10 entries</CardList.Footer> </CardList.Root>
The Body is scrollable when content exceeds available space.
<CardList.Root 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>
<CardList.Root> <CardList.Body p="current">This is the card's component</CardList.Body> <CardList.Footer>10 entries</CardList.Footer> </CardList.Root>