Heading

Headings are literally just a component that wraps around a single heading element that accepts a "tag" prop to render h1, h2, h3, h4, h5, or h6. No one remembers why we made this. You probably don't need it.

Example Instance

<Heading 
  tag="h2" 
  fontClass="display2-bold"
>
  This is a heading!
</Heading>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add heading` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
className	no	string	Additional CSS classes to apply	undefined
fontClass	no	string	CSS class name for font styling	"display2-bold"
fontColor	no	string	Color value that will be applied as "color-{fontColor}" CSS class	undefined
tag	no	LkHeadingTag	The HTML heading tag to render (h1, h2, h3, h4, h5, h6)	"h2"

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Supported
Native HTML attributes	Supported