Heading
For headings and subheadings.
Usage
Sphinx of black quartz, judge my vow.
<Heading>Sphinx of black quartz, judge my vow.</Heading>Examples
As another element
Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.
Level 1
Level 2
Level 3
<>
<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>
</>Font Size
Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures
text size is even for better layout.
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
<>
<Heading size="xs">Ag</Heading>
<Heading size="sm">Ag</Heading>
<Heading size="md">Ag</Heading>
<Heading size="lg">Ag</Heading>
<Heading size="xl">Ag</Heading>
<Heading size="2xl">Ag</Heading>
<Heading size="3xl">Ag</Heading>
<Heading size="4xl">Ag</Heading>
<Heading size="5xl">Ag</Heading>
<Heading size="6xl">Ag</Heading>
<Heading size="7xl">Ag</Heading>
</>Font Weight
Use the fontWeight prop to set the text weight.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
<>
<Heading fontWeight="light">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="normal">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="medium">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="semibold">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="bold">Sphinx of black quartz, judge my vow.</Heading>
</>Installation
Insert code snippet into your project. Update import paths as needed.
npx @park-ui/cli components add heading1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/heading.tsx
import { forwardRef } from 'react'
import { Text, type TextProps } from './text'
export interface HeadingProps extends TextProps<React.ElementType> {}
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => (
<Text as="h2" variant="heading" ref={ref} {...props} />
))
Heading.displayName = 'Heading'
import { mergeProps, splitProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import { css, cx } from 'styled-system/css'
import { type HTMLStyledProps, splitCssProps } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export type HeadingProps = TextVariantProps & {
as?: As
} & HTMLStyledProps<As>
export const Heading = (props: HeadingProps) => {
const mergedProps = mergeProps({ as: 'h2' }, props)
const [variantProps, headingProps] = splitProps(mergedProps, ['size'])
const [cssProps, elementProps] = splitCssProps(headingProps)
const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
const className = text({ variant: 'heading', size: variantProps.size })
return (
<Dynamic
component={localProps.as}
class={cx(className, css(cssProps), localProps.class)}
{...rootProps}
/>
)
}
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Heading, type HeadingProps } from './heading'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
Not yet available