Skip to main content

cardShape

Description​

Optional. An object with settings for managing information displayed on the left side of each card

Usage​

cardShape?: {
    category?: boolean,
    details?: boolean,
    preview?: boolean,
    price?: boolean,
    review?: boolean,
    subtitle?: boolean,
    title?: boolean
};

Parameters​

In the cardShape object you can specify the following parameters (fields):

  • category - (optional) shows/hides a card's name
  • details - (optional) shows/hides details
  • preview - (optional) shows/hides a preview image
  • price - (optional) shows/hides price
  • review - (optional) shows/hides rating information
  • subtitle - (optional) shows/hides a card's subtitle
  • title - (optional) shows/hides a card's title

Default config​

const defaultCardShape = {
    category: true,
    details: true,
    preview: true,
    price: true,
    review: true,
    subtitle: false,
    title: true
};

Example​

const cardShape = {
    review: false,
    subtitle: false,
    price: false
};

new booking.Booking("#root", {
    cardShape,
    // other parameters
});

The snippet below demonstrates how to configure what fields to display on the left side of cards:

info

You can also configure the appearance of a card using the cardTemplate property. If both cardTemplate and cardShape are applied, cardTemplate will override the cardShape settings.

Related articles: