Components

MultiColumn

The MultiColumn component allows for building responsive, multi-column layouts.

Usage

Utilize the MultiColumn component to create a column layout to structure your custom content.

You can define a static number of columns to display at all viewport widths, or alternatively provide the number of columns for each breakpoint.

Note

If columns and columnsBreakpoints are not provided, the component will automatically provide a responsive layout that grows from one column on the smallest viewport, to two and then three columns as the viewport width increases.

One

Two

Three

::multi-column
::container
One
::

::container
Two
::

::container
Three
::
::
MultiColumn Component Props

The static number of columns to display.

The number of columns to display for the defined breakpoints. Accepts an Object of interface Breakpoints. Providing a column number for a given breakpoint will allow larger breakpoints to inherit the value if the number of columns is not explicitly defined.

Number of columns once the viewport width is greater than or equal to 640px (kui-breakpoint-mobile).

Number of columns once the viewport width is greater than or equal to 768px (kui-breakpoint-phablet).

Number of columns once the viewport width is greater than or equal to 1024px (kui-breakpoint-tablet).

Number of columns once the viewport width is greater than or equal to 1280px (kui-breakpoint-laptop).

Number of columns once the viewport width is greater than or equal to 1536px (kui-breakpoint-desktop).

Props

columns

The static number of columns to display.

  • Type: number
  • Default: undefined

When provided, the number of columns provided will be applied to all viewport widths, unless overridden by the columnsBreakpoints prop.

Resize your browser and notice that the component will always display the content in a two column grid.

One

Two

Three

::multi-column
---
columns: 2
---
::container
One
::

::container
Two
::

::container
Three
::
::

columnsBreakpoints

Used instead of, or alongside, the columns prop, to define the number of columns to display for specific viewport widths.

Providing a column number for a given breakpoint will allow larger breakpoints to inherit the value if the number of columns is not explicitly defined for the larger breakpoint.

  • Type: Breakpoints
  • Default: {}
    /** Number of columns once the viewport width is greater than or equal to the breakpoint shown below. */
interface Breakpoints {
  /** 640px */
  mobile?: number
  /** 768px */
  phablet?: number
  /** 1024px */
  tablet?: number
  /** 1280px */
  laptop?: number
  /** 1536px */
  desktop?: number
}

Resize your browser and notice how the column layout responds at different viewport widths.

One

Two

Three

Four

Five

Six

::multi-column
---
columns-breakpoints: 
  mobile: 2
  phablet: 4
  tablet: 2
  laptop: 4
  desktop: 3
---
::container
One
::

::container
Two
::

::container
Three
::

::container
Four
::

::container
Five
::

::container
Six
::
::

You can also define a static number of columns and override for just a single (or multiple) breakpoints.

In the example below, we set columns to 3, but override the laptop and desktop breakpoints to show a custom number of columns. Resize your browser to see the end result.

One

Two

Three

::multi-column
---
columns: 3
columns-breakpoints: 
  laptop: 4
  desktop: 2
---
::container
One
::

::container
Two
::

::container
Three
::
::

Shared Props

This component also includes the shared props listed below:

  • backgroundColor - default is null.
  • backgroundImage - default is null
  • border - default is none.
  • borderRadius - default is 0px.
  • color - default is null.
  • gap - default is 20px
  • horizontalAlign - default is null
  • margin - default is 0px.
  • maxWidth - default is 100%.
  • padding - default is 0px.
  • tag - default is div.
  • text-align - default is left
  • verticalAlign - default is null
  • width - default is 100%.
  • styles - default is ''.

See here for more information on shared props.