Heading

For common heading styles that you can manage from one component across project.

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Props

• default 

Tokens

• sm
• lg

Examples

Basic

winduum

<div class="x-heading">Heading</div>

winduum-vue

<script setup lang="ts">
    import { Heading } from '@/components/heading'
</script>

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

winduum-react

import { Heading } from '@/components/heading'

export function Example() {
    return (
        <Heading>Heading</Heading>
    )
}

Small

<h3 class="x-heading sm">Heading H3</h3>

Large

<h3 class="x-heading lg">Heading H1</h3>

Weight

<h3 class="x-heading font-normal">Heading H1</h3>