@hypothesis/frontend-shared/lib/components/layout/Card.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * @typedef {import('../../types').PresentationalProps} CommonProps
 * @typedef {import('preact').JSX.HTMLAttributes<HTMLElement>} HTMLAttributes
 *
 * @typedef CardProps
 * @prop {boolean} [active=false] - When true, the Card will be styled to
 *   appear as if hovered ("active")
 * @prop {'raised'|'flat'} [variant='raised'] - The "raised" default variant
 *   adds dimensionality with shadows; those shadows intensify on hover. "Flat"
 *   variant does not have any dimensionality or hover.
 * @prop {'full'|'auto'|'custom'} [width='full'] - When `custom`, user should
 *   set desired width using `classes` prop
 */
/**
 * Render content in a card-like frame
 *
 * @param {CommonProps & CardProps & Omit<HTMLAttributes, 'width'>} props
 */
export default function Card({ children, classes, elementRef, active, variant, width, ...htmlAttributes }: CommonProps & CardProps & Omit<HTMLAttributes, 'width'>): import("preact").JSX.Element;
export type CommonProps = import('../../types').PresentationalProps;
export type HTMLAttributes = import('preact').JSX.HTMLAttributes<HTMLElement>;
export type CardProps = {
    /**
     * - When true, the Card will be styled to
     * appear as if hovered ("active")
     */
    active?: boolean | undefined;
    /**
     * - The "raised" default variant
     * adds dimensionality with shadows; those shadows intensify on hover. "Flat"
     * variant does not have any dimensionality or hover.
     */
    variant?: "raised" | "flat" | undefined;
    /**
     * - When `custom`, user should
     * set desired width using `classes` prop
     */
    width?: "auto" | "full" | "custom" | undefined;
};