Card

Card components can be used as flexible containers/wrappers for other UI elements.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<LvCard

     :shadowStyle="1"

     padding="20px"

     borderRadius="4px"

     backgroundColor="#DBE8EB"

showBorder

shadowStyle

padding

borderRadius

Background Color

PROP: shadowStyle = 1

PROP: shadowStyle = 2

PROP: borderRadius = 0px

PROP: borderRadius = 10px

PROP: backgroundColor = #dfe7eb

PROP: padding = 40px

PROP: default (false)

PROP: showBorder = true

// import the component
import LvCard from 'lightvue/card';

// Register the component locally
export default {
    components: {
        LvCard
    }
}

// Register the component globally (Vue 2.x)
Vue.component('LvCard', LvCard);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvCard', LvCard);
app.mount('#app')

shadowStyle

Number

Choose from a set of predefined shadow styles, ranging from 0 to 5.

borderRadius

String

4px

Specify the border radius of the card.

backgroundColor

String

#fff

Specify the background color of the card.

padding

String

20px

Specify the padding of the card.

showBorder

Boolean

false

Choose whether to show or hide the border.

Card

# Playground

Heading

#Shadow

PROP: shadowStyle = 1

PROP: shadowStyle = 2

#Border Radius

PROP: borderRadius = 0px

PROP: borderRadius = 10px

#Background color and Padding

PROP: backgroundColor = #dfe7eb

PROP: padding = 40px

#Enabling border

PROP: default (false)

PROP: showBorder = true

#Setup

#APIs