NOTE: Introduced feature in
v0.2.0
.
Text
is used to render paragraphs of text in your interface, among other types of text.
<script>
import {Text} from "@kahi-ui/framework";
</script>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin et consectetur orci. Curabitur a
egestas turpis, vitae convallis sapien. Sed
pellentesque rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus.
</Text>
Imports
<script>
import {Text} from "@kahi-ui/framework";
</script>
Sizing
WARNING: This feature was renamed from
size
tosizing
inv0.6.0
.
You can adjust the size of Text
by passing the sizing
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container
class="text-sizing-inline"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">NANO</Text>
<Text sizing="nano">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">TINY</Text>
<Text sizing="tiny">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">SMALL</Text>
<Text sizing="small">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">MEDIUM</Text>
<Text sizing="medium">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">LARGE</Text>
<Text sizing="large">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">HUGE</Text>
<Text sizing="huge">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">MASSIVE</Text>
<Text sizing="massive">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
<style>
:global(.text-sizing-inline > div) {
max-width: 25ch;
}
</style>
You can also access bigger font sizing via the variation
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container
class="text-sizing-block"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Text variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">NANO</Text>
<Text sizing="nano" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">TINY</Text>
<Text sizing="tiny" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">SMALL</Text>
<Text sizing="small" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">MEDIUM</Text>
<Text sizing="medium" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">LARGE</Text>
<Text sizing="large" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">HUGE</Text>
<Text sizing="huge" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">MASSIVE</Text>
<Text sizing="massive" variation="block">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
<style>
:global(.text-sizing-block > div) {
max-width: 25ch;
}
</style>
Palette
You can change the color palette of Text
via the palette
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container
class="text-palette"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">ACCENT</Text>
<Text palette="accent">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">NEUTRAL</Text>
<Text palette="neutral">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">DARK</Text>
<Text palette="dark">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">LIGHT</Text>
<Text palette="light">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">ALERT</Text>
<Text palette="alert">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">AFFIRMATIVE</Text>
<Text palette="affirmative">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">INFORMATIVE</Text>
<Text palette="informative">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">NEGATIVE</Text>
<Text palette="negative">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
<style>
:global(.text-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 Text
via the alignment_x
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container spacing="medium">
<div>
<Text is="strong">DEFAULT</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">CENTER</Text>
<Text alignment_x="center">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">JUSTIFY</Text>
<Text alignment_x="justify">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">LEFT</Text>
<Text alignment_x="left">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">RIGHT</Text>
<Text alignment_x="right">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
Transform
You can alter the rendered text capitalization via the transform
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container
class="text-transform"
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">CAPITALIZE</Text>
<Text transform="capitalize">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">LOWERCASE</Text>
<Text transform="lowercase">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">UPPERCASE</Text>
<Text transform="uppercase">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
<style>
:global(.text-transform > div) {
max-width: 25ch;
}
</style>
Variation
You can apply variations to the rendered text, like truncating, via the variation
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container
class="text-variation"
spacing="medium"
>
<div>
<Text is="strong">DEFAULT</Text>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
<div>
<Text is="strong">TRUNCATE</Text>
<Text variation="truncate">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</div>
</Stack.Container>
<style>
:global(.text-variation > div) {
max-width: 50ch;
}
</style>
Elements
WARNING: The feature
<Text is="kbd">
was moved to standalone Component<Kbd>
inv0.6.0
.
You can also access most of the other HTML text tags via the is
property.
<script>
import {Stack, Text} from "@kahi-ui/framework";
</script>
<Stack.Container alignment_x="left" spacing="medium">
<Text is="abbr">Abbreviation</Text>
<Text is="b">Bold</Text>
<Text is="strong">Strong</Text>
<Text is="del">Deleted</Text>
<Text is="s">Strikethrough</Text>
<Text is="em">Emphasis</Text>
<Text is="i">Italic</Text>
<Text is="ins">Inserted</Text>
<Text is="u">Underline</Text>
<Text is="mark">Highlighted</Text>
<Text is="samp">Sample</Text>
<Text is="sub">sub</Text>
<Text is="sup">sup</Text>
</Stack.Container>