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 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 className="font-light">Sphinx of black quartz, judge my vow.</Heading>
<Heading className="font-normal">Sphinx of black quartz, judge my vow.</Heading>
<Heading className="font-medium">Sphinx of black quartz, judge my vow.</Heading>
<Heading className="font-semibold">Sphinx of black quartz, judge my vow.</Heading>
<Heading className="font-bold">Sphinx of black quartz, judge my vow.</Heading>
</>Installation
Insert code snippet into your project. Update import paths as needed.
import { createElement } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'
type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export type HeadingProps = {
as?: As
} & TextVariantProps &
JSX.IntrinsicElements[As]
export const Heading = (props: HeadingProps) => {
const { as = 'h2', size, className, ...elementProps } = props
const classes = styles({ size, variant: 'heading', className })
return createElement(as, {
className: classes,
...elementProps,
})
}
type TextVariantProps = VariantProps<typeof styles>
const styles = tv(
{
base: 'text',
variants: {
variant: { heading: 'text--variant_heading' },
size: {
xs: 'text--size_xs',
sm: 'text--size_sm',
md: 'text--size_md',
lg: 'text--size_lg',
xl: 'text--size_xl',
'2xl': 'text--size_2xl',
'3xl': 'text--size_3xl',
'4xl': 'text--size_4xl',
'5xl': 'text--size_5xl',
'6xl': 'text--size_6xl',
'7xl': 'text--size_7xl',
},
},
},
{ twMerge: false },
)
import { mergeProps, splitProps, type JSX } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import { tv, type VariantProps } from 'tailwind-variants'
type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export type HeadingProps = {
as?: As
} & TextVariantProps &
JSX.IntrinsicElements[As]
export const Heading = (props: HeadingProps) => {
const mergedProps = mergeProps({ as: 'h2', variant: 'heading' }, props)
const [variantProps, headingProps] = splitProps(mergedProps, ['size', 'class', 'variant'])
const [localProps, rootProps] = splitProps(headingProps, ['as'])
const className = styles({ size: 'sm', variant: 'heading' })
console.log(className)
return <Dynamic component={localProps.as} class={className} {...rootProps} />
}
type TextVariantProps = VariantProps<typeof styles>
const styles = tv(
{
base: 'text',
variants: {
variant: { heading: 'text--variant_heading' },
size: {
xs: 'text--size_xs',
sm: 'text--size_sm',
md: 'text--size_md',
lg: 'text--size_lg',
xl: 'text--size_xl',
'2xl': 'text--size_2xl',
'3xl': 'text--size_3xl',
'4xl': 'text--size_4xl',
'5xl': 'text--size_5xl',
'6xl': 'text--size_6xl',
'7xl': 'text--size_7xl',
},
},
},
{ twMerge: false },
)
Not yet available