Fulldev UI

Docs Components Blocks

Heading

The quick brown fox jumps

---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<Heading>The quick brown fox jumps</Heading>

Props

PropTypeDefault
level1 | 2 | 3 | 4 | 5 | 62
size'sm' | 'md' | 'lg'-
color'base' | 'brand'base
contrastbooleantrue
htmlstring-
textstring-
asHTMLTag`h${level}`
HTML AttributesPolymorphic<`h${level}`>-

Examples

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<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</Heading>
<Heading level={5}>The quick brown fox jumps</Heading>
<Heading level={6}>The quick brown fox jumps</Heading>

The quick brown fox jumps

The quick brown fox jumps

The quick brown fox jumps

---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<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>

The quick brown fox jumps

The quick brown fox jumps

---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<Heading>The quick brown fox jumps</Heading>
<Heading contrast={false}>The quick brown fox jumps</Heading>

The quick brown fox jumps

The quick brown fox jumps

---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<Heading color="base">The quick brown fox jumps</Heading>
<Heading color="brand">The quick brown fox jumps</Heading>

The quick brown fox jumps

The quick brown fox jumps

---
import Heading from 'fulldev-ui/components/Heading.astro'
---

<Heading contrast={false} color="base">The quick brown fox jumps</Heading>
<Heading contrast={false} color="brand">The quick brown fox jumps</Heading>