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
toalignment_x
inv0.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>