Preferred

Product distinction for our Preferred property inventory within the BEYOND booking flow experience.

In this page

Mark

The product name 'PREFERRED' will be encased in a skewed rectangle with rounded corners. The background color is #BC9B6A.

.preferred {
                display: inline-block;
                transform: skew(-20deg);
                background-color: #BC9B6A;
                text-align: center;
                width: 108px;
                margin-right: 5px;
                margin-left: 5px;
                border-radius: 2px;
              }
              
              .preferred-container {
                display: inline-block;
                transform: skew(20deg);
              }
              
              .preferred-name {
                font-family: 'Poppins', sans-serif;
                font-size: 1em;
                font-weight: 500;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 0.0625em;
                color: #ffffff;
                margin: 0;
              }

Booking Flow

In the BEYOND booking flow, the Preferred property inventory must be visualy apparent in each step of the flow. The following designs demonstrate product distinction for Preferred.

Search Results Page

Product Listings

We need to make additional adjustments to the listings. See graphic for specifics.

• adjust the border‐radius to 12px
• add a solid border of 2px with the #BC9B6A color

Let's add some padding of 8px in the content box.

Product Details Page

We need at to apply the design treatment in the top section and in the room section of the product details page.

Content Section

Room Section

The word 'PREFERRED' needs to appear in the commission block. See design.

Quote Builder Page

Finally, apply the Preferred mark on the product listing in the Quote Builder page.