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, 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. The cards are designed in a way that allows them to adapt to the available space in the layout. Use height, min-height and ratio parameters to help the system maintain the correct size.

Cover

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). The cover element is shown on the top of the card. You can control the height of the cover by setting the height parameter.

If the cover element is the only element on the card, it will automatically take the entire space of the card. Keep in mind, since the card is empty, its height will be equal to 0, unless you explicitly specify height, min-height or ratio parameters.

You can also make cover element a background for the card using .cover parameter. You might want to combine .cover with .text-light or .text-dark as well as .text-shadow parameters to ensure the text is visible in both dark and light modes.

The layout will keep covers aspect ratio the same and crop parts of the image to adapt to the available space. The algorithm will try to keep center of the image visible. You can change this behaviour by adding following parameters.

Parameter	Description
`.contain`	Instead of cropping image, the layout will add empty space around image, so entire image is always visible
`.fill`	Stretch image to match cover size, desregarding aspect ratio
`.position-top`	Position image in a way that its top part is always visible (ie. crop bottom part only)
`.position-bottom`	Position image in a way that its bottom part is always visible (ie. crop top part only)
`.position-left`	Position image in a way that its left side is always visible (ie. crop right part only)
`.position-right`	Position image in a way that its right side is always visible (ie. crop left part only)

Buttons

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

Colors

You can use parameters to emphasize a card on the page, this is useful when you create a layout with multiple cards and want to emphasize some of them.

.transparent

.lowest

.low

default

.high

.highest

.primary

.secondary

Card parameters

A full reference of parameters you can add to 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`	`integer`	Card aspect ratio as width to height
`.cover`	`none`	Card cover image will be displayed as background
`.transparent`	`none`	Card without background color
`.lowest`	`none`	Lowest emphasis card (lightest background)
`.low`	`none`	Low emphasis card (light background)
`.high`	`none`	High emphasis card (dark background)
`.highest`	`none`	Highest emphasis card (darkest background)
`.primary`	`none`	Primary card (bright color background)
`.secondary`	`none`	Secondary card (color background)
`.text-dark`	`none`	Text will always appear black on the card, this is useful when displaying text over a bright picture
`.text-light`	`none`	Text will always appear white on the card, this is useful when displaying text over a dark picture
`.text-shadow`	`none`	Text will have a shadow, this helps to add contrast when displaying text over a picture