Heading

The Heading component provides semantic HTML heading elements (h1-h6) with default styling. Use Tailwind CSS classes for additional customization.

Demo

React

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Vue

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Usage

React

import { Heading } from '@fintech-sandpit/ui/react';

return (
  <Heading as="h1">
    Heading 1
  </Heading>
);

import { Heading } from '@fintech-sandpit/ui/react';

return (
  <Heading>
    Heading 3
  </Heading>
);

Vue

<script setup lang="ts">
import { Heading } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Heading as="h1">
    Heading 1
  </Heading>
</template>

<script setup lang="ts">
import { Heading } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Heading>
    Heading 3
  </Heading>
</template>

Props

Name	Type	Required	Default	Description
as	HeadingTag		h3	Semantic heading level

Types

type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'