Card ​

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

<KCard title="Title">
  <template v-slot:body>
    I am the body.
  </template>
</KCard>

<KCard>
  <template v-slot:body>
    I am a box. I have padding and a border. Useful for composing other components
  </template>
</KCard>

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

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

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

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

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

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

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

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

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

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