Card

Cards are layout components used to link to more information or for secondary in-page navigation.

import { ... } from '@ag.ds-next/react/card';

Usage

Card components can be imported via the card entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/card';

Card Props
Prop	Type	Description
as?	ElementType<any>	The element to render as. Often this will be an `<li>` as Cards are predominantly displayed in lists.
background?	"body" \| "bodyAlt"Default: "body"
children?	ReactNode
clickable?	boolean
footer?	ReactNode	A `CardFooter` component with relevant children.
footerOutside?	boolean
hasFooter?	boolean
header?	ReactNode	A `CardHeader` component with relevant children and/or images.
shadow?	boolean

CardInner Props
Prop	Type	Description
children	ReactNode

CardLink Props
Prop	Type	Description
aria-label?	string	Describes the anchor element to assistive technologies.
children?	ReactNode
download?	any	Causes the browser to treat the linked URL as a download.
href?	string	The URL that the hyperlink points to.
id?	string	The ID of the hyperlink.
onClick?	MouseEventHandler<HTMLAnchorElement>
onMouseEnter?	MouseEventHandler<HTMLAnchorElement>
onMouseLeave?	MouseEventHandler<HTMLAnchorElement>
onMouseOut?	MouseEventHandler<HTMLAnchorElement>
onMouseOver?	MouseEventHandler<HTMLAnchorElement>
referrerPolicy?	HTMLAttributeReferrerPolicy	How much of the referrer to send when following the link.
rel?	string	The relationship of the linked URL as space-separated link types.
role?	AriaRole	WAI-ARIA role.
target?	HTMLAttributeAnchorTarget	Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).

CardHeader Props
Prop	Type	Description
background?	"body" \| "bodyAlt"
children?	ReactNode

CardFooter Props
Prop	Type	Description
background?	"body" \| "bodyAlt"
children?	ReactNode

You can view the full source code for this package on Github.