Kongponents

# Card

KCard is meant to highlight content in grids or group relative information together.

Card Title

Body Content

Card Title

Body Content

<KCard title="Card Title" body="Body Content"/>


<KCard title="Card Title" body="Body Content"/>

# Props

# Title

String to be used in the title slot.

  • title

Title

I am the body. 
<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 
<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:

Kong Enterprise Edition

Docs

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.

<KCard :hasHover="true">
  <template v-slot:body>
    <KAlert alert-message="Welcome to Kong!" />
    <div class="mx-4">
      <div>
        <h2>Kong Enterprise Edition</h2>
        <KButton appearance="outline" to="https://docs.konghq.com/enterprise" target="_blank">
          Docs
        </KButton>
      </div>
      <div class="mt-2">
        <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.

  • status
My status

My title

My body
<KCard
  status="My status"
  title="My title"
  body="My body"
/>

# Body

String to be used in the body slot.

  • body
I am the body.
<KCard body="I am the body."/>

# Border Variants

Sets top border or no border. If neither set default will have border

  • borderTop
  • noBorder

Card without border

Body Content

Card with top border

Body Content
<KCard
  title="Card without border"
  body="Body Content"
  borderVariant="noBorder"/>

<KCard
  title="Card with top border"
  body="Body Content"
  borderVariant="borderTop"/>

# Shadow

Sets if card has shadow state (shadow)

  • hasHover only set shadow on hover
  • hasShadow always setShadow

hasHover

This card only has a shadow on hover

hasShadow

This card always has a shadow
<KCard
  title="hasHover"
  class="mb-2"
  body="This card only has a shadow on hover"
  hasHover/>

<KCard
  title="hasShadow"
  body="This card always has a shadow"
  hasShadow/>

# Side by side

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
<div class="d-flex flex-row">
  <KCard
    title="Left"
    class="w-auto"
    body="This card only has a title"
  />
  <KCard
    title="Center"
    class="w-auto mx-5"
    body="This card always has a icon button"
  >
    <template v-slot:actions>
      <KButton>
        <KIcon
            icon="gearFilled"
            size="16"
            view-box="0 0 16 16"
            class="pr-0"
          />
      </KButton>
    </template>
  </KCard>
  <KCard
    title="Right"
    class="w-auto"
    body="This card always has a button"
  >
    <template v-slot:actions>
      <KButton>View All</KButton>
    </template>
  </KCard>
</div>

# Slots

  • statusHat - Small text directly above the title
  • title
  • body
  • actions - Right side of the header section. Used for links, buttons, etc
  • notifications - Right side of the body section. Used for badges, icons, etc

Approved

Look Mah!

View All
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
Profile 

<KCard>
  <template v-slot:statusHat>
    <KIcon
      icon="check"
      color="#07A88D"
      class="mr-2"
      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
<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>

← Card Catalog →