Developer mode
Opens components on the React tab by default.
Your bookmarks

Layout

Also known as Columns

Displays content in a responsive column layout.

When you’ve got great designs, you don’t want to worry about them breaking on different sizes. Use one of our predefined layouts or set your own to show content right where you want it on various screens.

To chose the best component for your use case, see our developing layouts guide.

Component status

Figma
n/a
Web (React)
Released (experimental)
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Offer similar content to everyone

Users approach their interactions with your content similarly no matter their device. They are looking for information or to accomplish a task. If a user can’t find that information or feature on your mobile site or app, they’ll assume you don’t have it.

Make sure your content is available everywhere. Change its form so it fits best in the space available and fits user expectations for the device. But keep it present.

When choosing a layout with columns that change, make sure the same content appears no matter the width. If a column will be hidden, move its content to a different one. 

Use progressive disclosure to keep content close by. Consider a Hide component to vary what appears in each column.

Look & feel

Common properties

In all of the layouts, there is one column designed to hold the main content. There’s always a maximum width defined so it doesn’t cover the entire width of large screens. And all of the content is centered in the middle of the screen.

Different layouts

Booking layout

The Booking layout is a two-column layout on larger screens. On smaller screens, the second column is placed underneath the first.

import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import Layout from "@kiwicom/orbit-components/lib/Layout";
import LayoutColumn from "@kiwicom/orbit-components/lib/LayoutColumn";
import Text from "@kiwicom/orbit-components/lib/Text";
() => {
  const divStyle = {
    minHeight: defaultTheme.orbit.heightIllustrationMedium,
    background: defaultTheme.orbit.backgroundBody,
  }
  return (
    <Layout type="Booking">
      <LayoutColumn>
        <div style={divStyle}>
          <Text>This column is designed for the main content.</Text>
        </div>
      </LayoutColumn>
      <LayoutColumn>
        <div style={divStyle}>
          <Text>
            This column is designed for summaries. It appears on the right on{" "}
            <code>tablet</code> and wider screens. On <code>largeMobile</code>{" "}
            and smaller screens, it appears below the first column.
          </Text>
        </div>
      </LayoutColumn>
    </Layout>
  )
}

MMB layout

The MMB layout is a one-column layout with the same visibility no matter the screen size.

import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import Layout from "@kiwicom/orbit-components/lib/Layout";
import LayoutColumn from "@kiwicom/orbit-components/lib/LayoutColumn";
import Text from "@kiwicom/orbit-components/lib/Text";
() => {
  const style = {
    minHeight: defaultTheme.orbit.heightIllustrationMedium,
    background: defaultTheme.orbit.backgroundBody,
  }
  return (
    <Layout type="MMB">
      <LayoutColumn>
        <div style={style}>
          <Text>
            This column is designed for the main content. It&apos;s always
            visible.
          </Text>
        </div>
      </LayoutColumn>
    </Layout>
  )
}

Search layout

The Search layout is a three-column layout with one column always visible and the others variable.

import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
import Layout from "@kiwicom/orbit-components/lib/Layout";
import LayoutColumn from "@kiwicom/orbit-components/lib/LayoutColumn";
import Text from "@kiwicom/orbit-components/lib/Text";
() => {
  const divStyle = {
    minHeight: defaultTheme.orbit.heightIllustrationMedium,
    background: defaultTheme.orbit.backgroundBody,
  }
  return (
    <Layout type="Search">
      <LayoutColumn>
        <div style={divStyle}>
          <Text>
            This column is designed for filters. It&apos;s hidden on{" "}
            <code>largeMobile</code> and smaller screens.
          </Text>
        </div>
      </LayoutColumn>
      <LayoutColumn>
        <div style={divStyle}>
          <Text>
            This column is designed for the main content. It&apos;s always
            visible.
          </Text>
        </div>
      </LayoutColumn>
      <LayoutColumn>
        <div style={divStyle}>
          <Text>
            This column is designed for promotions. It&apos;s hidden on{" "}
            <code>desktop</code> and smaller screens.
          </Text>
        </div>
      </LayoutColumn>
    </Layout>
  )
}

Related components

Desktop

For content only on large screens, use a Desktop component.

Mobile

For content only on small screens, use a Mobile component.

Hide

For more control over what appears on different screen sizes, see the Hide component.