@amsterdam/design-system-react/dist/Breakout/BreakoutCell.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 { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout';
import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid';
export declare const breakoutCellTags: readonly ["article", "div", "section"];
type BreakoutCellTag = (typeof breakoutCellTags)[number];
type BreakoutCellSpanAllProp = {
    /** Lets the cell span the full width of all grid variants. */
    colSpan: 'all';
    colStart?: never;
    /** The content of this cell.
     * The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins.
     * The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text. */
    has?: 'spotlight';
};
type BreakoutCellSpanAndStartProps = {
    /** The amount of grid columns the cell spans. */
    colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
    /** The index of the grid column the cell starts at. */
    colStart?: GridColumnNumber | GridColumnNumbers;
    has?: 'figure';
};
type BreakoutCellRowSpanAndStartProps = {
    /** The amount of grid rows the cell spans. */
    rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
    /** The index of the grid row the cell starts at. */
    rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
};
export type BreakoutCellProps = {
    /** The HTML element to use. */
    as?: BreakoutCellTag;
} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
export declare const BreakoutCell: import("react").ForwardRefExoticComponent<BreakoutCellProps & import("react").RefAttributes<any>>;
export {};