KongponentsCard
KCard is meant to highlight content in grids or group relative information together.
Card Title
Body Content
html
<KCard title="Card Title" body="Body Content"/>Props
title
String to be used in the title slot.
Title
I am the body.
html
<KCard title="Title">
<template v-slot:body>
I am the body.
</template>
</KCard>If the title is omitted, then KCard acts as a generic Box element.
I am a box. I have padding and a border. Useful for composing other components
html
<KCard>
<template v-slot:body>
I am a box. I have padding and a border. Useful for composing other components
</template>
</KCard>Example composing KCard with other Kongponents to make another component:
Welcome to Kong!
Kong Enterprise Edition
DocsKong Enterprise adds features, functionality, and performance to Kong. This documentation doesn’t cover the general practices that are common to both Kong and Kong Enterprise—learn the basics in Kong documentation.
html
<KCard :hasHover="true">
<template v-slot:body>
<KAlert alert-message="Welcome to Kong!" />
<div>
<div>
<h2>Kong Enterprise Edition</h2>
<KButton appearance="outline" to="https://docs.konghq.com/enterprise" target="_blank">
Docs
</KButton>
</div>
<div>
<p>Kong Enterprise adds features, functionality, and performance to Kong. This documentation doesn’t cover the general practices that are common to both Kong and Kong Enterprise—learn the basics in Kong documentation.</p>
</div>
</div>
</template>
</KCard>status
String to be used in the statusHat slot.
My status
My title
My body
html
<KCard status="My status" title="My title" body="My body" />body
String to be used in the body slot.
I am the body.
html
<KCard body="I am the body."/>borderVariant
Sets top border or no border. If neither set default will have border
borderTopnoBorder
Card without border
Body Content
Card with top border
Body Content
html
<KCard title="Card without border" body="Body Content" border-variant="noBorder"/>
<KCard title="Card with top border" body="Body Content" border-variant="borderTop"/>hasHover
Set if card should have shadow state (shadow) on hover
hasHover
This card only has a shadow on hover
html
<KCard title="hasHover" body="This card only has a shadow on hover" has-hover />hasShadow
Set if the card should always have shadow state (shadow)
hasShadow
This card always has a shadow
html
<KCard title="hasShadow" body="This card always has a shadow" has-shadow />Using flex box
Cards can be arranged with flex box.
Left
This card only has a title
Center
This card always has a icon button
Right
This card always has a button
html
<KCard title="Left" body="This card only has a title" />
<KCard title="Center" body="This card always has a icon button">
<template v-slot:actions>
<KButton>
<KIcon
icon="gearFilled"
size="16"
view-box="0 0 16 16"
/>
</KButton>
</template>
</KCard>
<KCard title="Right" body="This card always has a button">
<template v-slot:actions>
<KButton>View All</KButton>
</template>
</KCard>
<style lang="scss">
.card-flex-container {
display: flex;
flex-direction: row;
gap: 4px;
}
</style>Slots
statusHat- Small text directly above the titletitlebodyactions- Right side of the header section. Used for links, buttons, etcnotifications- Right side of the body section. Used for badges, icons, etc
Approved
Look Mah!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
html
<KCard>
<template v-slot:statusHat>
<KIcon
icon="check"
color="#07A88D"
size="24" />
Approved
</template>
<template v-slot:title>Look Mah!</template>
<template v-slot:actions><a href="#">View All</a></template>
<template v-slot:body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.</template>
<template v-slot:notifications>
<KIcon
icon="profile"
color="#7F01FE"
size="44" />
</template>
</KCard>Theming
| Variable | Purpose |
|---|---|
--KCardPaddingY | Vertical top/bottom spacing |
--KCardPaddingX | Horizontal left/right padding |
--KCardBorderRadius | |
--KCardBorder | Replaces border size & color |
--KCardShadow | Replaces shadow size and color |
--KCardBackground |
An Example of changing the background might look like.
Colorful Title
Body Content
html
<template>
<KCard
title="Colorful Title"
body="Body Content"
hasShadow />
</template>
<style>
:root {
--KCardBackground: lavender;
--KCardShadow: 0 4px 8px lavender;
--KCardBorder: 2px solid purple;
--KCardBorderRadius: 12px;
}
</style>