Heading

Heading

import Heading from "@kiwicom/orbit-components/lib/Heading";
<Heading>Hello World!</Heading>

Props

NameTypeDefaultDescription
asenum"div"The element used for the root node.
childrenReact.NodeThe content of the Heading.
dataTeststringOptional prop for testing purposes.
alignenumlefttext-align of Heading component
dataA11ySectionstringID for a <SkipNavigation> component.
idstringAdds id HTML attribute to an element. Expects a unique ID.
invertedbooleanThe true, the Heading color will be white.
spaceAfterenumAdditional margin-bottom after component. See this docs
typeenum"title1"The size type of Heading.
mediumMobileObjectObject for setting up properties for the mediumMobile viewport. See Media queries
largeMobileObjectObject for setting up properties for the largeMobile viewport. See Media queries
tabletObjectObject for setting up properties for the tablet viewport. See Media queries
desktopObjectObject for setting up properties for the desktop viewport. See Media queries
largeDesktopObjectObject for setting up properties for the largeDesktop viewport. See Media queries

enum

astypealign
"h1""display"start
"h2""displaySubtitle"end
"h3""title1"center
"h4""title2"justify
"h5""title3"
"h6""title4"
"div""title5"
"title6"

Media Queries

NameTypeDefaultDescription
typeenum"title1"The size type of Heading.
spaceAfterenumAdditional margin-bottom after component. See this docs