@amsterdam/design-system-react/dist/Grid/Grid.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';
export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
export type GridColumnNumbers = {
    narrow: 1 | 2 | 3 | 4;
    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
    wide: GridColumnNumber;
};
export declare const gridGaps: readonly ["none", "large", "2x-large"];
export type GridGap = (typeof gridGaps)[number];
export declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
export type GridPadding = (typeof gridPaddings)[number];
export declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
export type GridTag = (typeof gridTags)[number];
type GridPaddingVerticalProp = {
    paddingBottom?: never;
    paddingTop?: never;
    /** The amount of space above and below. */
    paddingVertical?: GridPadding;
};
type GridPaddingTopAndBottomProps = {
    /** The amount of space below. */
    paddingBottom?: GridPadding;
    /** The amount of space above. */
    paddingTop?: GridPadding;
    paddingVertical?: never;
};
export type GridProps = {
    /** The HTML tag to use. */
    as?: GridTag;
    /** The amount of space between rows. */
    gapVertical?: GridGap;
} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
 */
export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<any>> & {
    Cell: import("react").ForwardRefExoticComponent<import("./GridCell").GridCellProps & import("react").RefAttributes<unknown>>;
};
export {};