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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { CardHeading } from './CardHeading';
import { CardBody } from './CardBody';
// .cnvs-card
export const cardStencil = createStencil({
    base: { name: "d5h4x", styles: "box-sizing:border-box;box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
}, "card-f60e02");
/**
 * `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, ...elemProps }, ref, Element) => {
        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, cardStencil()) }, 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,
    },
});