Rotating Card

The Rotating Card component helps you to simply create a beautiful card with two sides with rotating functionality.

Demo

Feel the
Material Kit

All the Bootstrap components that you need in a development have been re-design with the new look.

Discover More

You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

<script setup>
// Vue Material Kit 2 components
import RotatingCard from "@/examples/cards/rotatingCards/RotatingCard.vue";
import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
import RotatingCardBack from "@/examples/cards/rotatingCards/RotatingCardBack.vue";
</script>
<template>
<RotatingCard>
 <RotatingCardFront
  image="https://bit.ly/3G5JXJZ"
  icon="touch_app"
  title="Feel the <br /> Material Kit"
  description="All the Bootstrap components that you need in a development have been re-design with the new look."
 />

 <RotatingCardBack
  image="https://bit.ly/32ZoTGx"
  title="Discover More"
  description="You will save a lot of time going from prototyping to full-functional code because all elements are implemented."
  :action="[
    {
      route: '/',
      label: 'Start with Headers',
    },
  ]"
 />
</RotatingCard>
</template>

1<script setup>
2// Vue Material Kit 2 components
3import RotatingCard from "@/examples/cards/rotatingCards/RotatingCard.vue";
4import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
5import RotatingCardBack from "@/examples/cards/rotatingCards/RotatingCardBack.vue";
6</script>
7<template>
8<RotatingCard>
9 <RotatingCardFront
10  image="https://bit.ly/3G5JXJZ"
11  icon="touch_app"
12  title="Feel the <br /> Material Kit"
13  description="All the Bootstrap components that you need in a development have been re-design with the new look."
14 />
15
16 <RotatingCardBack
17  image="https://bit.ly/32ZoTGx"
18  title="Discover More"
19  description="You will save a lot of time going from prototyping to full-functional code because all elements are implemented."
20  :action="[
21    {
22      route: '/',
23      label: 'Start with Headers',
24    },
25  ]"
26 />
27</RotatingCard>
28</template>

Props Information

Name	Type	Default	Description
slot	node		Used to set the `RotatingCard` front and back sides.

Rotating Card Front

<script setup>
// Vue Material Kit 2 component
import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
</script>
<template>
 <RotatingCardFront
  image="https://bit.ly/3G5JXJZ"
  icon="touch_app"
  title="Feel the <br /> Material Kit"
  description="All the Bootstrap components that you need in a development have been re-design with the new look."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
4</script>
5<template>
6 <RotatingCardFront
7  image="https://bit.ly/3G5JXJZ"
8  icon="touch_app"
9  title="Feel the <br /> Material Kit"
10  description="All the Bootstrap components that you need in a development have been re-design with the new look."
11 />
12</template>

Props Information

Name	Type	Description
image*	string	Used to set the `RotatingCardFront` background image. Its a required prop.
icon	string	Used to set the `RotatingCardFront` icon on top of its title.
label	string	Used to set the `RotatingCardFront` label on top of its title.
title*	stringnode	Used to set the `RotatingCardFront` title. Its a required prop.
description*	string	Used to set the `RotatingCardFront` description. Its a required prop.

Rotating Card Back

<script setup>
// Vue Material Kit 2 component
import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
</script>
<template>
 <RotatingCardBack
  image="https://bit.ly/32ZoTGx"
  title="Discover More"
  description="You will save a lot of time going from prototyping to full-functional code because all elements are implemented."
  :action="[
    {
      route: '/',
      label: 'Start with Headers',
    },
  ]"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import RotatingCardFront from "@/examples/cards/rotatingCards/RotatingCardFront.vue";
4</script>
5<template>
6 <RotatingCardBack
7  image="https://bit.ly/32ZoTGx"
8  title="Discover More"
9  description="You will save a lot of time going from prototyping to full-functional code because all elements are implemented."
10  :action="[
11    {
12      route: '/',
13      label: 'Start with Headers',
14    },
15  ]"
16 />
17</template>

Props Information

Name	Type	Description
image*	string	Used to set the `RotatingCardBack` background image. Its a required prop.
title*	stringnode	Used to set the `RotatingCardBack` title. Its a required prop.
description*	string	Used to set the `RotatingCardBack` description. Its a required prop.
action*	routelabelcolor	Used to set the `RotatingCardBack` action button route, text and color. Its a required prop.

Rotating Card

Demo

Feel the Material Kit

Discover More

Props Information

Rotating Card Front

Props Information

Rotating Card Back

Props Information

Feel the
Material Kit