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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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 • 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>