Card
Also known as Tiles, Cards are a layout component that link to more information on a topic.
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';Props
| Prop | Type | Description |
|---|---|---|
| as? | ElementType<any> | |
| background? | "body" | "bodyAlt"Default: "body" | |
| children? | ReactNode | |
| clickable? | boolean | |
| shadow? | boolean |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode |
| 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. |
| 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>). |
| Prop | Type | Description |
|---|---|---|
| background? | "body" | "bodyAlt" | |
| children? | ReactNode |
| Prop | Type | Description |
|---|---|---|
| background? | "body" | "bodyAlt" | |
| children? | ReactNode |
Source
You can view the full source code for this package on Github.