@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
63 lines (62 loc) • 1.75 kB
TypeScript
import React from "react";
import { OverridableComponent } from "../../../util/types";
export declare const widths: readonly ["text", "md", "lg", "xl", "2xl"];
export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Predefined max-width
*
* text: 576px + dynamic gutters
*
* md: 768px
*
* lg: 1024px
*
* xl: 1280px
*
* 2xl: 1440px
*
* @default max-width: 100%;
*/
width?: (typeof widths)[number];
/**
* Adds a standardised responsive padding-inline
*
* 3rem on > md
*
* 1rem on < md
*
* @default false
*/
gutters?: boolean;
}
/**
* Acts as a top-level container for defining max-width, gutters and horizontal centering
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
* @see 🏷️ {@link PageBlockProps}
* @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
*
* @example
* ```jsx
* <Page
* footer={<Page.Block width="xl" gutters />}
* >
* <Page.Block width="xl" gutters />// Header
* <Page.Block width="xl" gutters />// Content
* </Page>
* ```
* @example
* With background bleed
* Wrapping `Page.Block` with `Box` allows the background-color to use full screen-width
* ```jsx
* <Page
* footer={<Box background="..."><Page.Block width="xl" gutters /></Box>}
* footerPosition="belowFold"
* >
* <Box background="..."><Page.Block width="xl" gutters /></Box>//Header
* <Box background="..."><Page.Block width="xl" gutters /></Box>//Content
* </Page>
* ```
*/
export declare const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement>;
export default PageBlock;