Background Cards

PRO

The Background Cards components helps you to simply create beautiful cards containing stunning background image.

Default Background Card

Website visitors

The Best Productivity Apps on Market

As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others.

<script setup>
import DefaultBackgroundCard from "@/examples/cards/backgroundCards/DefaultBackgroundCard.vue";
import image from "@/assets/img/examples/color1.jpg";
</script>
<template>
 <DefaultBackgroundCard
  :image="image"
  label="Website visitors"
  title="The Best Productivity Apps on Market"
  description="As we live, our hearts turn colder. Cause pain is what we go
        through as we become older. We get insulted by others, lose
        trust for those others."
 />
</template>

1<script setup>
2import DefaultBackgroundCard from "@/examples/cards/backgroundCards/DefaultBackgroundCard.vue";
3import image from "@/assets/img/examples/color1.jpg";
4</script>
5<template>
6 <DefaultBackgroundCard
7  :image="image"
8  label="Website visitors"
9  title="The Best Productivity Apps on Market"
10  description="As we live, our hearts turn colder. Cause pain is what we go
11        through as we become older. We get insulted by others, lose
12        trust for those others."
13 />
14</template>

Props Information

Name	Type	Default	Description
image*	string		Used to set the background image of `DefaultBackgroundCard`. It is a required prop.
label*	String		`label` is used to set the label of the `DefaultBackgroundCard` component. It is a required prop.
title*	String		`title` is used to set the title of the `DefaultBackgroundCard` component. It is a required prop.
description*	String		`description` is used to set the description of the `DefaultBackgroundCard` component.
button	'label''color'	'Get Started''btn-white'	`button` is an object with`label` and `color` keys and are used to set the text and color of button on `DefaultBackgroundCard`.

Simple Background Card

Last visits in US

Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.

<script setup>
// Vue Material Kit 2 component
import SimpleBackgroundCard from "@/examples/cards/backgroundCards/SimpleBackgroundCard.vue";

// image
import blog2 from "@/assets/img/examples/blog2.jpg";
</script>
<template>
 <SimpleBackgroundCard
  :image="blog2"
  title="Last visits in US"
  description="Wealth creation is an evolutionarily recent positive-sum game.
      Status is an old zero-sum game. Those attacking wealth
      creation are often just seeking status."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimpleBackgroundCard from "@/examples/cards/backgroundCards/SimpleBackgroundCard.vue";
4
5// image
6import blog2 from "@/assets/img/examples/blog2.jpg";
7</script>
8<template>
9 <SimpleBackgroundCard
10  :image="blog2"
11  title="Last visits in US"
12  description="Wealth creation is an evolutionarily recent positive-sum game.
13      Status is an old zero-sum game. Those attacking wealth
14      creation are often just seeking status."
15 />
16</template>

Props Information

Name	Type	Default	Description
image*	string		Used to set the background image of `SimpleBackgroundCard`. It is a required prop.
title*	String		Used to set the title of the `SimpleBackgroundCard` component. It is a required prop.
description*	String		Used to set the description of the `SimpleBackgroundCard` component.
route	String	javascript:;	Used to set the `SimpleBackgroundCard` route.

Colored Background Card

Landscape

Nature's Light

It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it.

<script setup>
// Vue Material Kit 2 component
import ColoredBackgroundCard from "@/examples/cards/backgroundCards/ColoredBackgroundCard.vue";
</script>
<template>
 <ColoredBackgroundCard
  color="success"
  image="https://bit.ly/3pWCZBm"
  label="Landscape"
  title="Nature's Light"
  description="It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import ColoredBackgroundCard from "@/examples/cards/backgroundCards/ColoredBackgroundCard.vue";
4</script>
5<template>
6 <ColoredBackgroundCard
7  color="success"
8  image="https://bit.ly/3pWCZBm"
9  label="Landscape"
10  title="Nature's Light"
11  description="It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it."
12 />
13</template>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''light''dark'	success	Used to set the color of `ColoredBackgroundCard` component.
image	string		Used to set the background image of `ColoredBackgroundCard`.
label	String		Used to set the label of the `ColoredBackgroundCard` component.
title*	String		Used to set the title of the `ColoredBackgroundCard` component. It is a required prop.
description*	String		Used to set the description of the `ColoredBackgroundCard` component.
action	'variant''color''label'	javascript:;	Used to set the `ColoredBackgroundCard` button color and label. `variant` accepts `contained`, `gradient` and `outline` as value. `color` used to set the color. `label` used to set the label of the button.

Info Background Card

Good Vibes

215 spots

<script setup>
// Vue Material Kit 2 component
import InfoBackgroundCard from "@/examples/cards/backgroundCards/InfoBackgroundCard.vue";
</script>
<template>
 <InfoBackgroundCard
  image="https://bit.ly/3eVR7og"
  icon="theater_comedy"
  title="Good Vibes"
  label="215 spots"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import InfoBackgroundCard from "@/examples/cards/backgroundCards/InfoBackgroundCard.vue";
4</script>
5<template>
6 <InfoBackgroundCard
7  image="https://bit.ly/3eVR7og"
8  icon="theater_comedy"
9  title="Good Vibes"
10  label="215 spots"
11 />
12</template>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''light''dark'	dark	Used to set the color of `InfoBackgroundCard` component.
image*	string		Used to set the background image of `InfoBackgroundCard`. It is a required prop.
icon*	string		Used to set the icon on `InfoBackgroundCard`. It is a required prop.
label*	String		Used to set the label of the `InfoBackgroundCard` component. It is a required prop.
title*	String		Used to set the title of the `InfoBackgroundCard` component. It is a required prop.