Layout

To implement the Layout component into your project you’ll need to add the import:

import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";

After adding import into your project you can use it simply like:

<Layout type="MMB">
  <LayoutColumn>This is the main section.</LayoutColumn>
</Layout>

Props

Table below contains all types of the props available in the Layout component.

Name	Type	Description
children	`React.Node`	The children of the Layout, use `LayoutColumn` as top-wrapper.
dataTest	`string`	Optional prop for testing purposes.
type	`enum`	The type of the Layout.

LayoutColumn

LayoutColumn component gives us a possibility how to control all accessibility and behaviour properties globally, so you don’t have to worry about it. If you want to use Layout component in your project, use LayoutColumn also.

Table below contains all types of the props available in the LayoutColumn component.

Name	Type	Default	Description
as	`string`	`"div"`	The HTML element in which item will be rendered
children	`React.Node`		The children of the LayoutColumn.
dataTest	`string`		Optional prop for testing purposes.

Layouts

For now, we are providing three global layouts that are necessary for our projects. There is possibility to use Search, Booking or MMB layout.

Search

The Search layout consist of three columns.

To implement the Search layout into your project, you need to use this JSX markup:

import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
const App = () => (
  <Layout type="Search">
    <LayoutColumn>The left SideBar for filters</LayoutColumn>
    <LayoutColumn>The main section for displaying the results</LayoutColumn>
    <LayoutColumn>The right SideBar for promotion</LayoutColumn>
  </Layout>
);

Booking

The Booking layout consist of two columns.

To implement the Booking layout into your project, you need to use this JSX markup:

import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
const App = () => (
  <Layout type="Booking">
    <LayoutColumn>The main section for Booking form</LayoutColumn>
    <LayoutColumn>The left SideBar for displaying the summary</LayoutColumn>
  </Layout>
);

MMB

The ManageMyBooking layout consist only of one column.

To implement the MMB layout into your project, you need to use this JSX markup:

import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
const App = () => (
  <Layout type="MMB">
    <LayoutColumn>The main section for ManageMyBooking</LayoutColumn>
  </Layout>
);