Skip to main content

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

one-to-one layout

The columns are of equal width.

Single-column layout​

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

two-to-one layout

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.