@workday/canvas-kit-react/dist/es6/card/lib/Card.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { CardBody } from './CardBody';
import { CardHeading } from './CardHeading';
// .cnvs-card
export const cardStencil = createStencil({
    extends: cornerShapeStencil,
    vars: {
        background: '',
    },
    base: { name: "33zv47", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
    modifiers: {
        variant: {
            tonal: { name: "uv2es", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));border-color:var(--cnvs-sys-color-border-transparent);" },
            alt: { name: "19owos", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));" }
        }
    }
}, "card-10b5c7");
/**
 * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
 * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
 * replaced using the `as` prop, or a `role` or other `aria-*` attributes can be added to give
 * `Card` semantic meaning.
 *
 * **Note**: Changing the `Card` container to certain semantic elements will put accessibility at
 * risk. For example, using the `as` prop to change the cards to buttons will flatten the content in
 * the card. Headings, calls to action, etc. will not function as expected for users with
 * disabilities. Semantic container elements like `<section>`, or using `<li>` grouped together in a
 * common `<ul>` can be a useful way to elevate the accessibility of your design.
 */
export const Card = createComponent('div')({
    displayName: 'Card',
    Component: ({ children, variant, ...elemProps }, ref, Element) => {
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, cardStencil({ variant })), children: children }));
    },
    subComponents: {
        /**
         * `Card.Heading` is an optional subcomponent that is meant to describe the Card. Since `Card`
         * is a non-semantic presentational component, `Card.Heading` does not automatically have any
         * semantic meaning. If your use case requires the Heading to label the Card, you must do so
         * manually.
         *
         * For example, {@link Modal} (which uses a `Card`) adds an `aria-labelledby` and a `role` to
         * the `Card`, as well as an `id` to the `Card.Heading`.
         *
         * ```tsx
         * <Card role="dialog" aria-labelledby="card-heading">
         *   <Card.Heading id="card-heading">Card Title</Card.Heading>
         *   <Card.Body>Card Contents</Card.Body>
         * </Card>
         * ```
         *
         * `Card.Heading` defaults to an `<h3>` element, but it can be changed using the `as` prop.
         */
        Heading: CardHeading,
        /**
         * `Card.Body` is a non-semantic subcomponent that contains the body of the card. Attributes may
         * be added to give `Card.Body` semantic meaning. If `Card.Body` is brief (like in a short
         * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
         * `Card.Body` to the `Card` container.
         */
        Body: CardBody,
    },
});