Skip to content

Layout

Layout components provide the structural foundation for your pages. They help organize content into rows, columns, sections, and containers, ensuring a consistent and responsive user interface across different screen sizes.

Container

The container component is the most basic layout element. It wraps your content and provides a maximum width, centering it on the page.

Example

<!-- Basic container -->
{{ ui.container("Content within a container") }}

<!-- Fluid container (full width) -->
{{ ui.container("Full-width content", fluid=true) }}
Parameters for container
Parameter Type Description
content any Content of the container
fluid bool Whether the container should be full-width (i.e. not restricted to a max width)

Grid System

The grid system allows you to create complex, responsive layouts using rows and columns.

Grid

The grid component serves as a container for row elements (or directly for column elements depending on the theme).

Parameters for grid
Parameter Type Description
content any Content of the grid, typically rows containing columns
fluid bool Whether the grid should be full-width (i.e. not restricted to a max width)

Row

The row component wraps column elements and controls their alignment and spacing.

Parameters for row
Parameter Type Description
content any Content of the row, typically columns containing content
align start|center|end|stretch Vertical alignment of columns within the row
justify start | center | end | between | around | evenly Horizontal justification of columns within the row
gap xs|sm|md|lg|xl Gap size between columns
wrap bool Whether columns should wrap to the next line if they exceed the row width

Column

The column component defines the width of your content within a row. It supports responsive spans for different breakpoints.

Example

{%- call ui.util.call(ui.grid) -%}
    {%- call ui.util.call(ui.row) -%}
        {{ ui.column("1/3 on medium screens", span={"md": 4}) }}
        {{ ui.column("2/3 on medium screens", span={"md": 8}) }}
    {%- endcall %}
{%- endcall %}
Parameters for column
Parameter Type Description
content any Content of the column
span dict Number of grid columns to span depending on breakpoint (e.g. {"xs": 12, "sm": 6, "md": 4, "lg": 3}).
offset dict Number of grid columns to offset from the left depending on breakpoint (e.g. {"xs": 0, "sm": 0, "md": 2, "lg": 3}).
order dict Order of the column depending on breakpoint (e.g. {"xs": 1, "sm": 2, "md": 3, "lg": 4}).

Sections

Sections help divide your page into logical areas.

Section

A generic section wrapper for grouping related content.

{{ ui.section("This is a section of content", title="this is a title") }}
Parameters for section
Parameter Type Description
content any Content of the section
title str Optional title of the section

Specifically designed for content in sidebars, often with different styling or collapsible behavior.

{{ ui.sidebar_section("This is a sidebar section", title="Sidebar Title") }}
Parameters for sidebar_section
Parameter Type Description
content any Content of the sidebar section
title str Optional title of the sidebar section

Content Containers

These components provide specific ways to wrap and present groups of related information.

Card

The card component provides a self-contained container for related content, typically featuring a header, body, and optional footer.

Example

{{ ui.card("Dataset description goes here", title="Dataset Title", footer="Updated: 2023-01-01") }}
Parameters for card
Parameter Type Description
content any Content of the card body
title str Title shown in the card header
footer str Content shown in the card footer. May contain button or other control elements.
img str URL of the image shown in the card

Accordion

The accordion component creates collapsible content sections. Use accordion_wrapper to group multiple accordions together.

Example

{%- call ui.util.call(ui.accordion_wrapper) -%}
    {{ ui.accordion("Content 1", title="Section 1") }}
    {{ ui.accordion("Content 2", title="Section 2") }}
{%- endcall %}
Parameters for accordion
Parameter Type Description
content any Content shown in the collapsible part
title str Title shown in the non-collapsible part
open bool Whether the accordion is open by default

List

The list component provides a container for collections of list_item components.

{%- call ui.util.call(ui.list) -%}
    {{ ui.list_item("First item") }}
    {{ ui.list_item("Second item") }}
    {{ ui.list_item("Third item") }}
{%- endcall %}
Parameters for list
Parameter Type Description
content any Collection of list items
Parameters for list_item
Parameter Type Description
content any Content of the list item

Button Group

Groups related buttons together, providing visual cohesion.

{%- call ui.util.call(ui.button_group) -%}
    {{ ui.button("Save", style="primary") }}
    {{ ui.button("Cancel", style="secondary") }}
{%- endcall %}
Parameters for button_group
Parameter Type Description
content any Collection of buttons
direction str Direction of the button group, either "row" or "column"

Visual Helpers

Heading

Creates page and section headings (h1-h6).

{{ ui.heading("This is a heading", level=2) }}
Parameters for heading
Parameter Type Description
content any Heading text
level int Heading level, between 1 and 6

Divider

Creates a visual separator between content sections.

{{ ui.divider() }}
Parameters for divider
Parameter Type Description
content any Usually ignored