Menu Icon

Columns

Columns organizes contents in a horizontal way by allows grids. They let users seperate sections side by side.

Usage

Size and number of columns comes with six different settings of layouts to use. They provide to give bounded areas on screen in a sizeable and scalable manner.

Guidance

  • Columns should provide a layout.
  • Their layout should be chosen according to dense and aim of operations.
  • Able to add multiple columns by using + icon near Columns component on page tree.

When to use

  • Use Columns to organize page horizontally.

Additional info

  • Consider using alignment and justification to configure apperance of column items.
  • Consider using responsive settings to set column sizes by screen size.

Variations

  • There are several types of Columns with varying sizes of grids. Grids determines Columns’ appearance and placement.
  • Layouts are distinct to width of blocks in total which have 24 grids, there are blocks as 12-12, 8-8-8, 6-6-6-6, 6-18, 18-6, 4-4-4-4-4-4.
  • The updatable properties of Columns are item align, justify content and gutter.
  • The updatable style features of Columns are margin, padding, size, overflow, background, border, effects and css.
  • The usable dynamic properties of Columns are align, gutter, justify, hidden and style.
  • The updatable properties of Columns' Column are span, offset and responsive settings.
  • The updatable style features of Columns' Column are margin, padding, size, overflow, background, border and css.
  • The usable dynamic properties of Columns are xxl, xl, lg, md, sm, xs, offset, span, hidden and style.