Layout

Layout

import Layout, { LayoutColumn } from "@kiwicom/orbit-components/lib/Layout";
<Layout type="MMB">
<LayoutColumn>This is the main section.</LayoutColumn>
</Layout>

Props

NameTypeDefaultDescription
childrenReact.NodeThe children of the Layout, use LayoutColumn as top-wrapper.
dataTeststringOptional prop for testing purposes.
typeenumThe type of the Layout.

LayoutColumn

NameTypeDefaultDescription
asstring"div"The HTML element in which item will be rendered
childrenReact.NodeThe children of the LayoutColumn.
dataTeststringOptional prop for testing purposes.

Layouts

Search

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

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

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