Usage

Default

Use the default slot to set the text of the component.

Types

Use the type prop to customize the heading's visual appearance and size.

Levels

Use the level prop to set the semantic heading level (h1-h6). By default, the level is automatically determined by the type prop.

Colors

Use the color prop to customize the component's color.

Alignment

Use the align prop to set the horizontal alignment of the heading.

Bolder

Use the bolder prop to render text with a font-weight of 900.

<script setup lang="ts">
import CLHeading from '@codeandfunction/callaloo/CLHeading';
</script>

<template>
  <CLHeading>Normal Weight</CLHeading>
  <CLHeading bolder>Bolder Weight</CLHeading>
</template>

Truncate

Use the truncate prop to truncate the text if it overflows its container.

<script setup lang="ts">
import CLHeading from '@codeandfunction/callaloo/CLHeading';
</script>

<template>
  <div style="max-width: 300px;">
    <CLHeading truncate>This is a very long heading that will be truncated when it overflows the container width</CLHeading>
  </div>
</template>

Props

Slots