Skip to content

Heading

A native, styled heading element.


The quick brown fox jumps

---
import { Heading } from 'fulldev-ui'
---
<Heading>The quick brown fox jumps</Heading>

Props

level

Type: size?: '1' | '2' | '3' | '4' | '5' | '6' = '2'

A special prop for heading, that sets the HTML tag to be used (just like as) and the corresponding size (just like size).

The reason for this is that you might have an article with size md and different levels of heading in it.

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
---
import { Heading } from 'fulldev-ui'
---
<Heading level="1">The quick brown fox jumps</Heading>
<Heading level="2">The quick brown fox jumps</Heading>
<Heading level="3">The quick brown fox jumps</Heading>
<Heading level="4">The quick brown fox jumps over the lazy dog</Heading>
<Heading level="5">The quick brown fox jumps over the lazy dog</Heading>
<Heading level="6">The quick brown fox jumps over the lazy dog</Heading>

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children. This changes the values used for spacing, fonts and other size related properties.

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

---
import { Heading } from 'fulldev-ui'
---
<Heading size="sm">The quick brown fox jumps</Heading>
<Heading size="md">The quick brown fox jumps</Heading>
<Heading size="lg">The quick brown fox jumps</Heading>

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

---
import { Heading } from 'fulldev-ui'
---
<Heading density="compact" size="sm"
>The quick brown fox jumps over the lazy dog</Heading
>
<Heading density="compact" size="md"
>The quick brown fox jumps over the lazy dog</Heading
>
<Heading density="compact" size="lg"
>The quick brown fox jumps over the lazy dog</Heading
>

variant

Type: color?: 'base' | 'muted'

Sets the color variant used for this component and all its children.

The quick brown fox jumps

---
import { Heading } from 'fulldev-ui'
---
<Heading variant="muted">The quick brown fox jumps</Heading>

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

text

Type: text?: string

Useful when getting content from Astro content collections or a headless CMS.

html

Type: html?: string

Similar to text prop, but renders HTML. Use this for for <span>, <br>, etc.

as & HTML Attributes

Type: as?: HTMLTag = 'h2'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.