Skip to main content

GridBlock

Overview​

GridBlock represents a grid layout component, designed to organize and display content in a structured, grid-based format. It supports customizable grid properties like column count, spacing, and content alignment.

Attributes​

type​

type: literal = 'grid'

Discriminant for the grid block type.

ariaLabel​

type: string (optional)

The ARIA label for the grid block, used for accessibility purposes.

content​

type: ContentBlockType[] (optional)

An array of content blocks displayed within the grid.

lg​

type: GridColumns (optional)

The number of columns in the grid for large screens.

md​

type: GridColumns (optional)

The number of columns in the grid for medium screens.

sm​

type: GridColumns (optional)

The number of columns in the grid for small screens.

gap​

type: GridGapOptions (optional)

Controls the spacing (gap) between grid items.

fullBleed​

type: boolean (optional)

Determines whether the grid spans the full width of its container.

headerText​

type: object (optional)

An object defining the header text content for the grid block.

text​

type: string (optional)

The header text for the grid block.

format​

type: literal = 'markdown' | 'html' (optional)

The format of the header text content.

paddingTop​

type: PaddingOptions (optional)

Controls the top padding for the grid block.

paddingBottom​

type: PaddingOptions (optional)

Controls the bottom padding for the grid block.

headerTextPosition​

type: TextAlignment (optional)

The alignment of the header text within the grid block.

backgroundColor​

type: BackgroundColorOptions (optional)

The background color of the grid block.