Booking Cards

PRO

The Booking Cards components helps you to simply create beautiful cards for booking purposes like flights, hotels and etc.

Simple Booking Card

Pro

Private Room • 1 Guest • 1 Sofa

Single room in the center of the city

As Uber works through a huge amount of internal management turmoil, the company is also consolidating more of its international business.

<script setup>
// Vue Material Kit 2 component
import simpleBookingCard from "@/examples/cards/blogCards/simpleBookingCard.vue";
</script>
<template>
 <SimpleBookingCard
  image="https://bit.ly/3EZlfcW"
  categories="Private Room • 1 Guest • 1 Sofa"
  title="Single room in the center of the city"
  description="As Uber works through a huge amount of internal management turmoil, the company is also consolidating more of its international business."
/>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import simpleBookingCard from "@/examples/cards/blogCards/simpleBookingCard.vue";
4</script>
5<template>
6 <SimpleBookingCard
7  image="https://bit.ly/3EZlfcW"
8  categories="Private Room • 1 Guest • 1 Sofa"
9  title="Single room in the center of the city"
10  description="As Uber works through a huge amount of internal management turmoil, the company is also consolidating more of its international business."
11/>
12</template>

Props Information

Name	Type	Description
image*	string	Used to set the image of `SimpleBookingCard`.
categories*	string	Used to set the `simpleBookingCard` labels. It is a required prop.
title*	String	Used to set the title of the `simpleBookingCard` component. It is a required prop.
description*	String	Used to set the description of the `simpleBookingCard` component. It is a required prop.
action	'color''label''route'	Used to set the route, color and label of the `simpleBookingCard` button.