Skip to main content

Layout

The Layout Component in Akuko empowers you to create flexible and structured layouts for your data stories. Whether you need to arrange components in a grid, control the placement of components within rows and columns, or create nested layouts for complex designs, the Layout Component provides a versatile solution for organizing your content.

Key Features

Grid Layout

The Layout Component allows you to create a grid layout where you can position other components. This grid can be divided into rows and columns, providing precise control over component placement.

Row and Column Control

You can easily arrange components within rows and columns within the grid. Adjust the size of rows and columns to control how components are displayed, allowing you to create visually appealing and organized layouts.

Nested Layouts

The Layout Component supports nested layouts, which means you can place layouts within layouts. This feature allows you to create intricate designs with multiple levels of organization and structure.

Properties

The Layout Component offers several properties to configure its appearance and behavior:

name

string The component name.

width

string The component width small, medium, large

layoutId

string The id of the layout template, 12-12, 8-8-8, 6-6-6-6

paddingTop

number Top padding in pixels

paddingRight

number Right padding in pixels

paddingBottom

number Bottom padding in pixels

paddingLeft

number Left padding in pixels

marginTop

number Top margin in pixels

marginRight

number Right margin in pixels

marginBottom

number Bottom margin in pixels

marginLeft

number Left margin in pixels

Examples

Explore examples of the Layout Component in action: