Card

View Source

NOTE: Introduced feature in v0.2.0.

Card is a multi-part surface pattern for displaying a section of content in a long-form vertical format.

<script>
    import {
        Badge,
        Button,
        Card,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Card.Container class="card-preview">
    <Card.Figure>
        <img src={IMAGE_BACKGROUND} />
    </Card.Figure>

    <Card.Header>
        Ocean Rockies
        <Spacer />
        <Badge palette="affirmative">AVAILABLE</Badge>
    </Card.Header>

    <Card.Section>
        <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>
    </Card.Section>

    <Card.Footer>
        <Button palette="accent">Book Flight</Button>
    </Card.Footer>
</Card.Container>

<style>
    :global(.card-preview) {
        max-width: 35ch;
    }
</style>

Imports

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

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

Palette

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

<script>
    import {
        Badge,
        Button,
        Card,
        Mosaic,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Mosaic.Container sizing="medium" spacing="medium">
    <Card.Container>
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>DEFAULT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="accent">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>ACCENT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="neutral">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>NEUTRAL</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="dark">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>DARK</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="light">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>LIGHT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="alert">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>ALERT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="affirmative">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>AFFIRMATIVE</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="informative">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>INFORMATIVE</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container palette="negative">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>NEGATIVE</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>
</Mosaic.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 Card will appear to be over top the page via the elevation property.

<script>
    import {
        Badge,
        Button,
        Card,
        Mosaic,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Mosaic.Container sizing="medium" spacing="large">
    <Card.Container elevation="lowest">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>DEFAULT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="none">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>NONE</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="lowest">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>LOWEST</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="lower">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>LOWER</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="low">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>LOW</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="medium">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>MEDIUM</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="high">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>HIGH</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="higher">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>HIGHER</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container elevation="highest">
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>HIGHEST</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>
</Mosaic.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 Card.Footer to render vertically via the orientation property.

<script>
    import {
        Badge,
        Button,
        Card,
        Mosaic,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Mosaic.Container sizing="medium" spacing="large">
    <Card.Container>
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>HORIZONTAL / DEFAULT</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>

        <Card.Footer>
            <Button variation="clear">Cancel</Button>
            <Button palette="accent">
                Book Flight
            </Button>
        </Card.Footer>
    </Card.Container>

    <Card.Container>
        <Card.Figure>
            <img src={IMAGE_BACKGROUND} />
        </Card.Figure>

        <Card.Header>
            Ocean Rockies
            <Spacer />
            <Badge>VERTICAL</Badge>
        </Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>

        <Card.Footer
            orientation="vertical"
            alignment_x="stretch"
        >
            <Button palette="accent">
                Book Flight
            </Button>

            <Button variation="clear">Cancel</Button>
        </Card.Footer>
    </Card.Container>
</Mosaic.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 {
        Card,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="card-sizing"
    orientation="horizontal"
    spacing="medium"
    alignment_y="top"
    variation="wrap"
>
    <Card.Container>
        <Card.Header>DEFAULT</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="nano">
        <Card.Header>NANO</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="tiny">
        <Card.Header>TINY</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="small">
        <Card.Header>SMALL</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="medium">
        <Card.Header>MEDIUM</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="large">
        <Card.Header>LARGE</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="huge">
        <Card.Header>HUGE</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>

    <Card.Container sizing="massive">
        <Card.Header>MASSIVE</Card.Header>

        <Card.Section>
            <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.
            </Text>
        </Card.Section>
    </Card.Container>
</Stack.Container>

<style>
    :global(.card-sizing > .card) {
        max-width: 35ch;
    }
</style>

Flush

NOTE: Introduced feature in v0.2.13.

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

<script>
    import {
        Badge,
        Button,
        Card,
        Spacer,
        Text,
    } from "@kahi-ui/framework";
</script>

<Card.Container class="card-flush" variation="flush">
    <Card.Figure>
        <img src={IMAGE_BACKGROUND} />
    </Card.Figure>

    <Card.Header>
        Ocean Rockies
        <Spacer />
        <Badge palette="affirmative">AVAILABLE</Badge>
    </Card.Header>

    <Card.Section>
        <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>
    </Card.Section>

    <Card.Footer>
        <Button palette="accent">Book Flight</Button>
    </Card.Footer>
</Card.Container>

<style>
    :global(.card-flush) {
        max-width: 35ch;
    }
</style>

Properties

Card.Container

Name Description Types
elevation Alters how "high" the Card 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
sizing Sets the size of children / spacing relative to the font size of the Card.
nano tiny small medium large huge massive {VIEWPORT}:{SIZING}
variation Alters the appearance of the Card.
flush

Card.Footer

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

Slots

Card.Container

Name Description Types
default Default unnamed slot.
{}

Card.Figure

Name Description Types
default Default unnamed slot.
{}

Card.Footer

Name Description Types
default Default unnamed slot.
{}

Card.Header

Name Description Types
default Default unnamed slot.
{}

Card.Section

Name Description Types
default Default unnamed slot.
{}