Layouts

You can combine and display content in grid, row and column layouts. You can combine different layouts to achieve more complex placements. There are three main types of layouts:

column - layout places children in a single column with a small gap between them
row - layout places children in a single row with a small gap between them
grid - layout places children across a grid with 2, 4 or 6 columns

You can use any elements inside a layout block, but layouts work best with div and card elements.

Layouts automatically adapt to the smaller screen sizes to ensure all elements have sufficient space.

Column

Column is a simple layout which places its children in a column with a small gap between them. We recommend starting your layouts with a column and then adding grid and row layouts as children.

Use the following syntax to define column layout:

Parameter	Type	Description
`item-height`	`integer`	Height of items in pixels (automatic by default)
`item-min-height`	`integer`	Minimum height of items in pixels
`item-max-height`	`integer`	Maximum height of items in pixels

Row

Row is a simple layout which places its children in a row with a small gap between them. When items do not fit on the screen, row layout would wrap them into the next line. On the small screens, the row layout is displayed as a column.

Use the following syntax to define row layout:

Parameter	Type	Description
`item-width`	`integer`	Width of items in pixels
`item-min-width`	`integer`	Minimum width of items in pixels (~300px by default)
`item-max-width`	`integer`	Maximum width of items in pixels

Grid

Grid layout places its children in 2, 4 or 6 columns with a small gap between them. On a smaller screen, the number of columns is divided by two. You can specify 'col-span' and 'row-span' parameters on the children blocks to span elements across multiple columns.

Use the following syntax to define grid layout:

Parameter	Type	Description
`columns`	`integer`	Number of columns 2, 4 or 6 (default)
`row-height`	`integer`	Row height in pixels (~150px by default)
`row-min-height`	`integer`	Minimum row height of items in pixels
`row-max-height`	`integer`	Maximum row height of items in pixels

Division

Division is a simple container which wraps a fragment of the document. Divisions are useful when you want to group a few elements together without applying any styling.

Card

A card is a universal container which allows displaying an image, video or text.

If the first element of the card is an image or a video, this element will be used as a cover (unless it has parameter '.not-a-cover'). Cover element is displayed on top of the card or as a background for card content (when card has '.cover' parameter).

If the last element of the card is a paragraph which only contains links, these links are displayed as buttons under the card.

Parameter	Type	Description
`href`	`string`	Link associated with the card
`height`	`integer`	Card height in pixels (automatic by default)
`min-height`	`integer`	Minimum card height in pixels
`ratio`	`double`	Card aspect ratio as width to height

Classes

Possible values for class parameter. You can specify multiple values separated by a space.

Parameter	Description
`cover`	Card cover image will be displayed as background
`lowest`	Lowest emphasis card (lightest background)
`low`	Low emphasis card (light background)
`high`	High emphasis card (dark background)
`highest`	Highest emphasis card (darkest background)
`primary`	Primary card (bright color background)
`secondary`	Secondary card (color background)
`text-dark`	Text will always appear black on the card, this is useful when displaying text over a bright picture
`text-light`	Text will always appear white on the card, this is useful when displaying text over a dark picture
`text-shadow`	Text will have a shadow, this helps to add contrast when displaying text over a picture