Glassmorphic Card

Glass Card components can be used as elegant containers/wrappers for placing content over images.

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.

<LvGlassCard

     backgroundBlur="10px"

     backgroundOpacity="80"

     padding="20px"

     borderRadius="8px"

     backgroundColor="#374D57"

showBorder

backgroundBlur

backgroundOpacity

padding

borderRadius

Background Color

PROP: default (15px)

PROP: backgroundBlur = 3px

PROP: backgroundBlur = 20px

PROP: backgroundBlur = 40px

PROP: default (70)

PROP: backgroundOpacity = 10

PROP: backgroundOpacity = 40

PROP: backgroundOpacity = 95

PROP: default (#ffffff, 20px)

PROP: backgroundColor = #ff0000

PROP: backgroundColor = #000000

PROP: backgroundColor = #00bab1, padding = 10px

PROP: default (false, 4px)

PROP: borderRadius = 20px

PROP: showBorder = true

// import the component
import LvGlassCard from 'lightvue/glasscard';

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

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

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

backgroundBlur

String

15px

Specify the value for background-blur filter of the card.

backgroundOpacity

String

Specify the value for background's opacity, in %, ranging from 0 to 100.

backgroundColor

String

#ffffff

Specify the background color of the card in 6-digit hex format.

padding

String

20px

Specify the padding of the card.

borderRadius

String

4px

Specify the border radius of the card.

showBorder

Boolean

false

Choose whether to show or hide the border.

Glassmorphic Card

# Playground

Heading

#Background blur

PROP: default (15px)

PROP: backgroundBlur = 3px

PROP: backgroundBlur = 20px

PROP: backgroundBlur = 40px

#Background opacity

PROP: default (70)

PROP: backgroundOpacity = 10

PROP: backgroundOpacity = 40

PROP: backgroundOpacity = 95

#BG color and padding

PROP: default (#ffffff, 20px)

PROP: backgroundColor = #ff0000

PROP: backgroundColor = #000000

PROP: backgroundColor = #00bab1, padding = 10px

#Border and border-radius

PROP: default (false, 4px)

PROP: borderRadius = 20px

PROP: showBorder = true

PROP: showBorder = true

#Setup

#APIs