Elevations

View Source

Kahi UI uses box shadows to convey the physicality of "how far hovering above the page" any given Component is.

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

<Stack.Container
    orientation="horizontal"
    spacing="large"
    variation="wrap"
>
    <div>
        <Text is="strong">LOWEST</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-lowest);"
        />
    </div>

    <div>
        <Text is="strong">LOWER</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-lower);"
        />
    </div>

    <div>
        <Text is="strong">LOW</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-low);"
        />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-medium);"
        />
    </div>

    <div>
        <Text is="strong">HIGH</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-high);"
        />
    </div>

    <div>
        <Text is="strong">HIGHER</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-higher);"
        />
    </div>

    <div>
        <Text is="strong">HIGHEST</Text>

        <div
            data-size="icon-massive"
            style="box-shadow:var(--elevations-highest);"
        />
    </div>
</Stack.Container>