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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { BoxProps } from '@workday/canvas-kit-react/layout';
export interface CardProps extends BoxProps {
    /**
     * Children of the Card. Should contain a `<Card.Body>` and an optional `<Card.Heading>`
     */
    children?: React.ReactNode;
    /**
     * The variant of the Card. Can be `alt`, `tonal` or default.
     * @default 'default'
     */
    variant?: 'alt' | 'tonal';
}
export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<{
    variant: {
        tonal: ({ background }: {
            shape: `--${string}`;
            background: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            background: `var(--${string}, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))))`;
            borderColor: "--cnvs-sys-color-border-transparent";
        };
        alt: ({ background }: {
            shape: `--${string}`;
            background: `--${string}`;
        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
            background: `var(--${string}, 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)))`;
            borderColor: "var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1))";
        };
    };
}, {}, {
    background: string;
}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
    shape: string;
}, never>, {}, {
    shape: string;
}, never, never>, never>;
/**
 * `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 declare const Card: import("@workday/canvas-kit-react/common").ElementComponent<"div", CardProps> & {
    /**
     * `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: import("@workday/canvas-kit-react/common").ElementComponent<"h3", import("./CardHeading").CardHeadingProps>;
    /**
     * `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: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./CardBody").CardBodyProps>;
};
//# sourceMappingURL=Card.d.ts.map