Layouts

Jutro provides pre-defined layouts that you can apply directly to your page or a portion of the page. They only require minimal configuration.

You can import them as follows:

import {
  OneToOneColumnLayout,
  SingleColumnLayout,
  TwoToOneColumnLayout,
} from '@jutro/components/lab-preview';

One-to-one layout

note

This component requires exactly two child components

The columns are of equal width.

Single-column layout

The component can contain any number of children. They are stacked one on top of another.

Two-to-one layout

note

This component requires exactly two child components

The first column is twice as wide as the second one.

Width

You can set the maxWidth prop to one of the following values:

• default - as expected, this is the default value, and it is automatically applied even if you don't set anything
• narrow
• expanded
• a custom width in pixels specified as a string the px suffix, e.g., 1024px

Breakpoint props

The layouts are responsive, which means that the columns stack when there is not enough room to display them side-by-side. You can override this behavior by passing props for a given breakpoint. For example:

<OneToOneColumnLayout phone={{ useCard: false }}>
  <MyElement />
  <MyElement />
</OneToOneColumnLayout>

You can learn more about breakpoints and responsiveness here.

No cards

By default, the columns render inside cards. To render without cards, set useCard to false.