KCard

A basic card. It doesn't set background colors or paddings, so you have to set them by yourself.

interface Props {
  // 'base' is a default value
  radius?: 'small' | 'medium' | 'base' | 'large' | 'huge'

  shadow?: boolean

  outlined?: boolean
}

Hello

Basic usage

<template>
    <KCard outlined radius="small">
        <h2> The Product </h2>
        <p> This product is the best product in the world!</p>
    </KCard>
</template>

The Product

This product is the best product in the world!

Props

radius

Sets card radius. The default value is 'base'.

interface Props {
    radius?: 'small' | 'medium' | 'base' | 'large' | 'huge'
}

shadow

Adds a shadow to a card. The shadow is not shown in dark mode. The default value is false.

interface Props {
    shadow?: boolean
}

outlined

Adds a border to a card. The default value is false.

interface Props {
    outlined?: boolean
}