main-wrapper

Props

Prop name	Type	Default	Description
`full`	`boolean \| undefined`	`false`	Makes component occupying the whole viewport
`extraClasses`	`string \| undefined`		Custom classes name for tooltip element
`bgColor`	`"primary" \| "secondary" \| undefined`	`primary`	The background color.

MainWrapper sets a proper background for yor pages. We recommend using it as a direct child of ThemeWrapper component. Using MainWrapper is crucial if you plan using "dark" theme.

Here is a simple example of how you can setup your layout:

import { Header, HeaderBrand, Heading, MainWrapper, PageContainer, Text, ThemeWrapper } from '@flixbus/honeycomb-react';

<ThemeWrapper theme="flix" dark>
    <MainWrapper>
      <Header brand={(
        <HeaderBrand
          alt="Honeycomb"
          href="https://styleguide.hive.flix.tech/"
          src="https://styleguide.hive.flix.tech/img/logos/svg/honeycomb-white.svg"
          appearance="square"
          width="36"
          height="36"
        />
      )} />
      <PageContainer>
          <Heading size={2}>Heading</Heading>
          <Text>
            I'm drowning in darkness...
          </Text>
      </PageContainer>
    </MainWrapper>
</ThemeWrapper>
import { Header, HeaderBrand, Heading, MainWrapper, PageContainer, Text, ThemeWrapper } from '@flixbus/honeycomb-react';

<ThemeWrapper theme="flix" dark>
    <MainWrapper>
      <Header brand={(
        <HeaderBrand
          alt="Honeycomb"
          href="https://styleguide.hive.flix.tech/"
          src="https://styleguide.hive.flix.tech/img/logos/svg/honeycomb-white.svg"
          appearance="square"
          width="36"
          height="36"
        />
      )} />
      <PageContainer>
          <Heading size={2}>Heading</Heading>
          <Text>
            I'm drowning in darkness...
          </Text>
      </PageContainer>
    </MainWrapper>
</ThemeWrapper>