Heading

View Source

NOTE: Introduced feature in v0.2.0.

Heading is typically used for delineating sections of content within your Web Application.

<script>
    import {Heading} from "@kahi-ui/framework";
</script>

<Heading>
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit.
</Heading>

Imports

<script>
    import {Heading} from "@kahi-ui/framework";
</script>

Sizing

You can adjust the size of Heading by passing the is property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="heading-sizing-inline"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">H1</Text>
        <Heading is="h1">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H2</Text>
        <Heading is="h2">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H3</Text>
        <Heading is="h3">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H4</Text>
        <Heading is="h4">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H5</Text>
        <Heading is="h5">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H6</Text>
        <Heading is="h6">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>
</Stack.Container>

<style>
    :global(.heading-sizing-inline > div) {
        max-width: 25ch;
    }
</style>

You can also access bigger font sizing via the variation property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="heading-sizing-block"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">H1</Text>
        <Heading is="h1" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H2</Text>
        <Heading is="h2" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H3</Text>
        <Heading is="h3" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H4</Text>
        <Heading is="h4" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H5</Text>
        <Heading is="h5" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">H6</Text>
        <Heading is="h6" variation="block">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>
</Stack.Container>

<style>
    :global(.heading-sizing-block > div) {
        max-width: 25ch;
    }
</style>

Palette

NOTE: Introduced feature in v0.2.16.

You can change the color palette of Heading via the palette property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="heading-palette"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <Heading>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">ACCENT</Text>
        <Heading palette="accent">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">NEUTRAL</Text>
        <Heading palette="neutral">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">DARK</Text>
        <Heading palette="dark">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">LIGHT</Text>
        <Heading palette="light">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">ALERT</Text>
        <Heading palette="alert">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">AFFIRMATIVE</Text>
        <Heading palette="affirmative">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">INFORMATIVE</Text>
        <Heading palette="informative">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">NEGATIVE</Text>
        <Heading palette="negative">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>
</Stack.Container>

<style>
    :global(.heading-palette > div) {
        max-width: 25ch;
    }
</style>

Alignment

WARNING: This feature was renamed from align to alignment_x in v0.6.0.

You can adjust the text alignment of the Heading via the alignment_x property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container spacing="medium">
    <div>
        <Text is="strong">DEFAULT</Text>
        <Heading>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">CENTER</Text>
        <Heading alignment_x="center">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">JUSTIFY</Text>
        <Heading alignment_x="justify">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">LEFT</Text>
        <Heading alignment_x="left">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">RIGHT</Text>
        <Heading alignment_x="right">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>
</Stack.Container>

Transform

You can alter the rendered text capitalization via the transform property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="heading-transform"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <Heading>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.
        </Heading>
    </div>

    <div>
        <Text is="strong">CAPITALIZE</Text>
        <Heading transform="capitalize">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.
        </Heading>
    </div>

    <div>
        <Text is="strong">LOWERCASE</Text>
        <Heading transform="lowercase">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.
        </Heading>
    </div>

    <div>
        <Text is="strong">UPPERCASE</Text>
        <Heading transform="uppercase">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.
        </Heading>
    </div>
</Stack.Container>

<style>
    :global(.heading-transform > div) {
        max-width: 25ch;
    }
</style>

Variation

You can apply variations to the rendered text, like truncating, via the variation property.

<script>
    import {
        Heading,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="heading-variation"
    spacing="medium"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <Heading>
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>

    <div>
        <Text is="strong">TRUNCATE</Text>
        <Heading variation="truncate">
            Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Proin et consectetur orci.
            Curabitur a egestas turpis, vitae convallis
            sapien.
        </Heading>
    </div>
</Stack.Container>

<style>
    :global(.heading-variation > div) {
        max-width: 50ch;
    }
</style>

Properties

Heading

Name Description Types
is Changes the HTML tag used for rendering the text, and the text size.
h1 (DEFAULT) h2 h3 h4 h5 h6
alignment_x Changes how the text is aligned within the containing box.
center justify left right
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
transform Alters how the text casing is rendered.
capitalize lowercase uppercase
variation truncate Removes parent container overflow from the render, clipping text with an ellipsis.
headline truncate

Slots

Heading

Name Description Types
default Default unnamed slot.
{}