Kleri UI

Component Preview
Kleri UI / Components / Heading

Heading

Typography components for page titles and section headers.

PrimaryHeading

Large animated heading with Poppins font, drop shadow, and pointer-events disabled.

Primary Heading

Usage 
<script lang="ts">
  import { PrimaryHeading } from '@kleri/ui';
</script>

<PrimaryHeading>
  Primary Heading
</PrimaryHeading>

Props

SecondaryHeading

Monospace-styled secondary heading with primary color and green drop shadow.

Secondary Heading

Usage 
<script lang="ts">
  import { SecondaryHeading } from '@kleri/ui';
</script>

<SecondaryHeading>
  Secondary Heading
</SecondaryHeading>

Props

SubHeading

Sub heading with optional info and warning annotations.

Sub Heading

This and the warning are optional
Keeping them empty will make them disappear
Usage 
<script lang="ts">
  import { SubHeading } from '@kleri/ui';
</script>

<SubHeading
  info="This and the warning are optional"
  warning="Keeping them empty will make them disappear"
>
  Sub Heading
</SubHeading>

Props