 <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>

Props

CardList.Body

`alignSelf`

centerendstartbaselinestretch

Sets the CSS **align-self** property. Supports a subset of the corresponding CSS values and responsive objects.

`as`

divspan

Controls whether to render **div** or **span**

`asChild`

boolean

Composes the component into its immediate child instead of rendering its own HTML element. You’ll have to provide a single React Element child.

`bottom`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **bottom** property. Supports space scale values, CSS strings, and responsive objects.

`display`

noneinlineinline-blockblockcontents

Sets the CSS **display** property. Supports a subset of the corresponding CSS values and responsive objects.

`flexBasis`

Responsive<string>

Sets the CSS **flex-basis** property. Supports CSS strings and responsive objects.

`flexGrow`

Sets the CSS **flex-grow** property. Supports CSS strings and responsive objects.

`flexShrink`

Sets the CSS **flex-shrink** property. Supports CSS strings and responsive objects.

`gridArea`

Responsive<string>

Sets the CSS **grid-area** property. Supports CSS strings and responsive objects.

`gridColumn`

Responsive<string>

Sets the CSS **grid-column** property. Supports CSS strings and responsive objects.

`gridColumnEnd`

Responsive<string>

Sets the CSS **grid-column-end** property. Supports CSS strings and responsive objects.

`gridColumnStart`

Responsive<string>

Sets the CSS **grid-column-start** property. Supports CSS strings and responsive objects.

`gridRow`

Responsive<string>

Sets the CSS **grid-row** property. Supports CSS strings and responsive objects.

`gridRowEnd`

Responsive<string>

Sets the CSS **grid-row-end** property. Supports CSS strings and responsive objects.

`gridRowStart`

Responsive<string>

Sets the CSS **grid-row-start** property. Supports CSS strings and responsive objects.

`height`

Responsive<string>

Sets the CSS **height** property. Supports CSS strings and responsive objects.

`inset`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **inset** property. Supports space scale values, CSS strings, and responsive objects.

`justifySelf`

centerendstartbaselinestretch

Sets the CSS **justify-self** property. Supports a subset of the corresponding CSS values and responsive objects.

`left`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **left** property. Supports space scale values, CSS strings, and responsive objects.

`maxHeight`

Responsive<string>

Sets the CSS **max-height** property. Supports CSS strings and responsive objects.

`maxWidth`

Responsive<string>

Sets the CSS **max-width** property. Supports CSS strings and responsive objects.

`minHeight`

Responsive<string>

Sets the CSS **min-height** property. Supports CSS strings and responsive objects.

`minWidth`

Responsive<string>

Sets the CSS **min-width** property. Supports CSS strings and responsive objects.

`overflow`

hiddenautoclipvisiblescroll

Sets the CSS **overflow** property. Supports the corresponding CSS values and responsive objects.

`overflowX`

hiddenautoclipvisiblescroll

Sets the CSS **overflow-x** property. Supports the corresponding CSS values and responsive objects.

`overflowY`

hiddenautoclipvisiblescroll

Sets the CSS **overflow-y** property. Supports the corresponding CSS values and responsive objects.

`p`

1234056789

Sets the CSS **padding** property. Supports space scale values, CSS strings, and responsive objects.

`pb`

1234056789

Sets the CSS **padding-bottom** property. Supports space scale values, CSS strings, and responsive objects.

`pl`

1234056789

Sets the CSS **padding-left** property. Supports space scale values, CSS strings, and responsive objects.

`position`

fixedstickystaticrelativeabsolute

Sets the CSS **position** property. Supports the corresponding CSS values and responsive objects.

`pr`

1234056789

Sets the CSS **padding-right** property. Supports space scale values, CSS strings, and responsive objects.

`pt`

1234056789

Sets the CSS **padding-top** property. Supports space scale values, CSS strings, and responsive objects.

`px`

1234056789

Sets the CSS **padding-left** and **padding-right** properties. Supports space scale values, CSS strings, and responsive objects.

`py`

1234056789

Sets the CSS **padding-top** and **padding-bottom** properties. Supports space scale values, CSS strings, and responsive objects.

`right`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **right** property. Supports space scale values, CSS strings, and responsive objects.

`top`

1234056789-1-2-3-4-5-6-7-8-9

Sets the CSS **top** property. Supports space scale values, CSS strings, and responsive objects.

`width`

Responsive<string>

Sets the CSS **width** property. Supports CSS strings and responsive objects.

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

CardList.Footer

`justify`

centerendstartbetween

Default: start

`style`

CSSProperties

CardList.Header

`title`

required

ReactNode

`description`

ReactNode

CardList.Root

`radius`

Default: 1

Usage

Header, Body and Footer

 <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>

With Search

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

With Scrolling Content

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>

Body and Footer

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

Body Only

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

With Different Radius

 <Flex direction="column" gap="4">
  <CardList.Root radius={1}>
    <CardList.Header title="Small radius" description="Using radius={1}" />
    <CardList.Body p="current">Smaller border radius</CardList.Body>
  </CardList.Root>

  <CardList.Root radius={2}>
    <CardList.Header title="Large radius" description="Using radius={2}" />
    <CardList.Body p="current">Larger border radius (default)</CardList.Body>
  </CardList.Root>
</Flex>

Variants

Dashboard

2 variants found

CardList in Card List Sectiondashboard

/:environmentId/authentication

CardList in Card List Sectiondashboard

/:environmentId/authentication

Context

CardList.Body

Prop	Type	Default	Required
`alignSelf`	`Responsive<"center" \| "end" \| "start" \| "baseline" \| "stretch">`	—	no
`as`	`"div" \| "span"`	—	no
`asChild`	`boolean`	—	no
`bottom`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`display`	`Responsive<"none" \| "inline" \| "inline-block" \| "block" \| "contents">`	—	no
`flexBasis`	`Responsive<string>`	—	no
`flexGrow`	`Responsive<Union<string, "1" \| "0">>`	—	no
`flexShrink`	`Responsive<Union<string, "1" \| "0">>`	—	no
`gridArea`	`Responsive<string>`	—	no
`gridColumn`	`Responsive<string>`	—	no
`gridColumnEnd`	`Responsive<string>`	—	no
`gridColumnStart`	`Responsive<string>`	—	no
`gridRow`	`Responsive<string>`	—	no
`gridRowEnd`	`Responsive<string>`	—	no
`gridRowStart`	`Responsive<string>`	—	no
`height`	`Responsive<string>`	—	no
`inset`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`justifySelf`	`Responsive<"center" \| "end" \| "start" \| "baseline" \| "stretch">`	—	no
`left`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`maxHeight`	`Responsive<string>`	—	no
`maxWidth`	`Responsive<string>`	—	no
`minHeight`	`Responsive<string>`	—	no
`minWidth`	`Responsive<string>`	—	no
`overflow`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`overflowX`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`overflowY`	`Responsive<"hidden" \| "auto" \| "clip" \| "visible" \| "scroll">`	—	no
`p`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pb`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pl`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`position`	`Responsive<"fixed" \| "sticky" \| "static" \| "relative" \| "absolute">`	—	no
`pr`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`pt`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`px`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`py`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9">>`	—	no
`right`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`top`	`Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "0" \| "5" \| "6" \| "7" \| "8" \| "9" \| "-1" \| "-2" \| "-3" \| "-4" \| "-5" \| "-6" \| "-7" \| "-8" \| "-9">>`	—	no
`width`	`Responsive<string>`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

CardList.Footer

Prop	Type	Default	Required
`justify`	`"center" \| "end" \| "start" \| "between"`	`start`	no
`style`	`CSSProperties`	—	no

CardList.Header

Prop	Type	Default	Required
`title`	`ReactNode`	—	yes
`description`	`ReactNode`	—	no

CardList.Root

Prop	Type	Default	Required
`radius`	`"1" \| "2"`	`1`	no

Usage

Used 58 times across 1 package

Dashboard

Variant Distribution

justify

between

100%

radius

100%

Where it's used

18 files

packages/dashboard/src/legacy-pages/settings/decoy-widgets.tsx6

packages/dashboard/src/components/authentication/configure-cors/configure-cors-dialog.tsx4

packages/dashboard/src/components/configuration/logout-uris/logout-uris-modal.tsx4

packages/dashboard/src/components/configuration/redirect-uris/redirect-uris-modal.tsx4

packages/dashboard/src/components/flags/edit-organization-rule-dialog.tsx4

packages/dashboard/src/components/flags/edit-user-rule-dialog.tsx4

packages/dashboard/src/components/organizations/organization/add-user-to-organization-dialog.tsx4

packages/dashboard/src/components/radar/configuration-page/dialogs/radar-list-table.tsx4

packages/dashboard/src/components/roles/resource-scoped-permissions-selector.tsx4

packages/dashboard/src/components/pipes/add-provider-dialog.tsx3

Show 8 more files

CardList

Props

CardList.Body

alignSelf

as

asChild

bottom

display

flexBasis

flexGrow

flexShrink

gridArea

gridColumn

gridColumnEnd

gridColumnStart

gridRow

gridRowEnd

gridRowStart

height

inset

justifySelf

left

maxHeight

maxWidth

minHeight

minWidth

overflow

overflowX

overflowY

p

pb

pl

position

pr

pt

px

py

right

top

width

CardList.Footer

justify

style

CardList.Header

title

description

CardList.Root

radius

Usage

Header, Body and Footer

With Search

With Scrolling Content

Body and Footer

Body Only

With Different Radius

Variants

Dashboard

Context

Full API Reference

Full API Reference

CardList.Body

CardList.Footer

CardList.Header

CardList.Root

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`alignSelf`

`as`

`asChild`

`bottom`

`display`

`flexBasis`

`flexGrow`

`flexShrink`

`gridArea`

`gridColumn`

`gridColumnEnd`

`gridColumnStart`

`gridRow`

`gridRowEnd`

`gridRowStart`

`height`

`inset`

`justifySelf`

`left`

`maxHeight`

`maxWidth`

`minHeight`

`minWidth`

`overflow`

`overflowX`

`overflowY`

`p`

`pb`

`pl`

`position`

`pr`

`pt`

`px`

`py`

`right`

`top`

`width`

`justify`

`style`

`title`

`description`

`radius`