Tile

View Source

NOTE: Introduced feature in v0.2.1.

Tile is a multi-part surface pattern for displaying a section of content in a short-form horizontal format.

<script>
    import {
        Button,
        Text,
        Tile,
    } from "@kahi-ui/framework";
    import {UserPlus, Slash} from "lucide-svelte";
</script>

<Tile.Container width="content-max">
    <Tile.Figure>
        <img src={IMAGE_AVATAR} />
    </Tile.Figure>

    <Tile.Section>
        <Tile.Header>NovacBN</Tile.Header>

        <Text>
            <Text is="small">
                joined 2018 &bullet; last online
                2021/05/29
            </Text>
        </Text>
    </Tile.Section>

    <Tile.Footer>
        <Button palette="affirmative">
            <UserPlus size="1em" />
        </Button>

        <Button palette="negative">
            <Slash size="1em" />
        </Button>
    </Tile.Footer>
</Tile.Container>

Imports

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

    const {
        Container,
        Figure,
        Footer,
        Header,
        Section,
    } = Tile;
</script>

Palette

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

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

<Stack.Container spacing="medium">
    <Tile.Container width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">DEFAULT</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="accent"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">ACCENT</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="neutral"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">NEUTRAL</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container palette="dark" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">DARK</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="light"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">LIGHT</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="alert"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">ALERT</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="affirmative"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">AFFIRMATIVE</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="informative"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">INFORMATIVE</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        palette="negative"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">NEGATIVE</Text>
        </Tile.Footer>
    </Tile.Container>
</Stack.Container>

Elevation

NOTE: Introduced feature in v0.3.5.

NOTE: By passing an array, you can set responsive values. e.g. elevation={["low", "tablet:lowest", "mobile:lowest"]}

You can set how "high" your Tile will appear to be over top the page via the elevation property.

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

<Stack.Container spacing="large">
    <Tile.Container width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">DEFAULT</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="none"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">NONE</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="lowest"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">LOWEST</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="lower"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">LOWER</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="low"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">LOW</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="medium"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">MEDIUM</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="high"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">HIGH</Text>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container
        elevation="highest"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    joined 2018 &bullet; last online
                    2021/05/29
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Text is="small">HIGHEST</Text>
        </Tile.Footer>
    </Tile.Container>
</Stack.Container>

Orientation

NOTE: Introduced feature in v0.3.5.

NOTE: By passing an array, you can set responsive values. e.g. orientation={["desktop:vertical", "widescreen:vertical"]}

You can set the Tile.Footer to render vertically via the orientation property.

<script>
    import {
        Button,
        Stack,
        Text,
        Tile,
    } from "@kahi-ui/framework";
    import {UserPlus, Slash} from "lucide-svelte";
</script>

<Stack.Container spacing="medium">
    <Tile.Container width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">
                    HORIZONTAL / DEFAULT
                </Text>
            </Text>
        </Tile.Section>

        <Tile.Footer>
            <Button palette="affirmative">
                <UserPlus size="1em" />
            </Button>

            <Button palette="negative">
                <Slash size="1em" />
            </Button>
        </Tile.Footer>
    </Tile.Container>

    <Tile.Container width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NovacBN</Tile.Header>

            <Text>
                <Text is="small">VERTICAL</Text>
            </Text>
        </Tile.Section>

        <Tile.Footer orientation="vertical">
            <Button palette="affirmative">
                <UserPlus size="1em" />
            </Button>

            <Button palette="negative">
                <Slash size="1em" />
            </Button>
        </Tile.Footer>
    </Tile.Container>
</Stack.Container>

Sizing

NOTE: Introduced feature in v0.3.3.

NOTE: By passing an array, you can set responsive values. e.g. sizing={["tiny", "tablet:medium", "mobile:medium"]}

You can change the sizes / spacings of the child elements via the sizing property.

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

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    alignment_y="top"
    variation="wrap"
>
    <Tile.Container width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>DEFAULT</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container sizing="nano" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>NANO</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container sizing="tiny" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>TINY</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container sizing="small" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>SMALL</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container
        sizing="medium"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>MEDIUM</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container sizing="large" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>LARGE</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container sizing="huge" width="content-max">
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>HUGE</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>

    <Tile.Container
        sizing="massive"
        width="content-max"
    >
        <Tile.Figure>
            <img src={IMAGE_AVATAR} />
        </Tile.Figure>

        <Tile.Section>
            <Tile.Header>MASSIVE</Tile.Header>

            <Text>
                <Text is="small">
                    Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit.
                </Text>
            </Text>
        </Tile.Section>
    </Tile.Container>
</Stack.Container>

Flush

NOTE: Introduced feature in v0.2.13.

You can change the appearance of the Tile to be flush with the rest of the Application content via the variation property.

<script>
    import {
        Button,
        Text,
        Tile,
    } from "@kahi-ui/framework";
    import {UserPlus, Slash} from "lucide-svelte";
</script>

<Tile.Container width="content-max" variation="flush">
    <Tile.Figure>
        <img src={IMAGE_AVATAR} />
    </Tile.Figure>

    <Tile.Section>
        <Tile.Header>NovacBN</Tile.Header>

        <Text>
            <Text is="small">
                joined 2018 &bullet; last online
                2021/05/29
            </Text>
        </Text>
    </Tile.Section>

    <Tile.Footer>
        <Button palette="affirmative">
            <UserPlus size="1em" />
        </Button>

        <Button palette="negative">
            <Slash size="1em" />
        </Button>
    </Tile.Footer>
</Tile.Container>

Properties

Tile.Container

Name Description Types
elevation Alters how "high" the Tile appears to be off the page.
none lowest lower (DEFAULT) low medium high higher highest {VIEWPORT}:{ELEVATION}
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
variation Alters the appearance of the Tile.
flush

Tile.Footer

Name Description Types
orientation Renders the Tile.Footer vertically.
vertical {VIEWPORT}:vertical
alignment Adjusts where the child items will be placed within the Tile.Footer along both axis.
center stretch {VIEWPORT}:{ALIGNMENT}
alignment_x Adjusts where the child items will be placed within the Tile.Footer along the horizontal axis.
center stretch left right {VIEWPORT}:{ALIGNMENT}
alignment_y Adjusts where the child items will be placed within the Tile.Footer along the vertical axis.
center stretch bottom top {VIEWPORT}:{ALIGNMENT}

Slots

Tile.Container

Name Description Types
default Default unnamed slot.
{}

Tile.Figure

Name Description Types
default Default unnamed slot.
{}

Tile.Footer

Name Description Types
default Default unnamed slot.
{}

Tile.Header

Name Description Types
default Default unnamed slot.
{}

Tile.Section

Name Description Types
default Default unnamed slot.
{}