#Heading
By default, <Heading>
renders a <h1>
with default margins applied.
#Import
import { Heading } from 'bumbag';
#Usage
Heading 1
Hello world!
#Other headers
Use the use
prop to change from the default h1
element to h2
, h3
, h4
, h5
, h6
, span
, or others.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
#Font sizes
You can adjust the font size of a heading with the fontSize
prop:
Hello world
Or, you can modify the font size for each heading level in the theme:
const theme = {Heading: {h1: {fontSize: '700'},h2: {fontSize: '600'},h3: {fontSize: '500'}h4: {fontSize: '400'}h5: {fontSize: '300'},h6: {fontSize: '200'}}}<Provider theme={theme}>...</Provider>
#Responsive headers
By default, each heading's font size will shrink in a mobile
viewport.
You can modify the breakpoint in the component itself:
Hello world
Or you can modify the breakpoint in the theme:
const theme = {Heading: {defaultProps: {shrinkBelow: 'desktop'}}}<Provider theme={theme}>...</Provider>
If you just want to disable shrinking, you can specify null
:
const theme = {Heading: {defaultProps: {shrinkBelow: null}}}<Provider theme={theme}>...</Provider>
#Heading Props
isSubHeading
boolean
shrinkBelow
(string & {}) | "tablet" | "mobile" | "fullHD" | "widescreen" | "desktop"
Indicates the breakpoint at which the heading font size should shrink.
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"
altitude
string
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 94 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
#Theming
Heading.styles.base
Hello world
Heading.h1.styles.base
Hello world
Heading.h1.styles.shrinked
Hello world
Heading.h2.styles.base
Hello world
Heading.h2.styles.shrinked
Hello world
Heading.h3.styles.base
Hello world
Heading.h3.styles.shrinked
Hello world
Heading.h4.styles.base
Hello world
Heading.h4.styles.shrinked
Hello world
Heading.h5.styles.base
Hello world
Heading.h5.styles.shrinked
Hello world
Heading.h6.styles.base
Hello world
Heading.h6.styles.shrinked
Hello world
Heading.subHeading.styles.base