Paragraph#

<Paragraph> renders a <p> element with reset styles and a bottom margin.

Import#

import { Paragraph } from 'bumbag'

Usage#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus justo, blandit ut leo in, molestie pretium mauris. Pellentesque eros elit, interdum eget mauris et, ultrices auctor nisl. Praesent a dolor vel nulla vehicula lacinia. Proin iaculis ligula nulla.

Morbi tincidunt cursus leo, sit amet porttitor mi. In a diam volutpat, blandit felis eu, viverra nunc. Nullam molestie iaculis elit, non placerat massa. In et consectetur lorem. Vivamus feugiat iaculis aliquet. Nunc laoreet augue in leo venenatis, id condimentum nisl eleifend.

Editable example

Paragraph Props#

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#

Paragraph.styles.base

Hello world

On this page
Copyright © 2021 Jake Moxey