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>