PageContent#

Import#

import { PageContent } from 'bumbag';

Usage#

The <PageContent> component helps you with creating a page with content. It comes with margins & paddings built in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec.
Editable example

Breakpoints#

The default breakpoint for a content block is tablet. However, you can change this with the breakpoint prop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec.
Editable example

You can also change the default breakpoint via the global theme as well.

const theme = {
  PageContent: {
    defaultProps: {
      breakpoint: 'desktop'
    }
  }
}
<BumbagProvider theme={theme}>
  {/* ... */}
</BumbagProvider>

Fluid#

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Faucibus pulvinar elementum integer enim neque volutpat. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas accumsan lacus vel facilisis. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nisi est sit amet facilisis magna etiam tempor. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Faucibus pulvinar elementum integer enim neque volutpat. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas accumsan lacus vel facilisis. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nisi est sit amet facilisis magna etiam tempor. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque.
Editable example

Props#

PageContent Props#

wrapperProps 

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 784 more ...;
  themeKey?: string;
}

Props to spread onto the wrapper component.

Inherits Container props

align "right" | "left" | "center"

Sets the alignment of the container.

breakpoint 

(string & {})
  | "tablet"
  | "mobile"
  | "fullHD"
  | "widescreen"
  | "desktop"

Sets the breakpoint width of the container.

isFluid boolean

Indicates if the container is fluid.

isLayout boolean

Indicates if the container is of a layout type.

Inherits Box props

use 

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children 

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides 

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Theming#

PageContent.styles.base
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Faucibus pulvinar elementum integer enim neque volutpat. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas accumsan lacus vel facilisis. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nisi est sit amet facilisis magna etiam tempor. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque
PageContent.Wrapper.styles.base
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu bibendum at varius vel. Volutpat sed cras ornare arcu dui. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Faucibus pulvinar elementum integer enim neque volutpat. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas accumsan lacus vel facilisis. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Gravida cum sociis natoque penatibus et magnis dis parturient montes. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nisi est sit amet facilisis magna etiam tempor. Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque
On this page
Copyright © 2021 Jake Moxey