@amsterdam/design-system-react/dist/Grid/GridCell.d.ts

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import type { HTMLAttributes, PropsWithChildren } from 'react';
import type { GridColumnNumber, GridColumnNumbers, GridRowNumber, GridRowNumbers } from './Grid';
export declare const gridCellAppearances: readonly ["flush", "transparent"];
export type GridCellAppearance = (typeof gridCellAppearances)[number];
export declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
export type GridCellTag = (typeof gridCellTags)[number];
type GridCellSpanAllProp = {
    /** Lets the cell span the full width of all grid variants. */
    span: 'all';
    start?: never;
};
type GridCellSpanAndStartProps = {
    /** The amount of grid columns the cell spans. */
    span?: GridColumnNumber | GridColumnNumbers;
    /** The index of the grid column the cell starts at. */
    start?: GridColumnNumber | GridColumnNumbers;
};
export type GridCellProps = {
    /**
     * Controls the background of the Grid Cell.
     *
     * In Compact Mode, cells have a background colour and padding to set them apart.
     * The flush variant removes the padding but keeps the background colour.
     * The transparent variant removes both background and padding.
     *
     * In Spacious Mode, cells are always transparent and without padding; this prop has no effect.
     */
    appearance?: GridCellAppearance;
    /** The HTML tag to use. */
    as?: GridCellTag;
    /** The amount of grid rows the cell spans. */
    rowSpan?: GridRowNumber | GridRowNumbers;
} & PropsWithChildren<HTMLAttributes<HTMLElement>> & (GridCellSpanAllProp | GridCellSpanAndStartProps);
export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<any>>;
export {};