Bootstrap Example Website Header

Heading

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis aliquam architecto animi voluptates itaque corrupti quas expedita repudiandae! Officia animi tenetur inventore totam quidem laborum quos ratione facere deserunt itaque.

Login

Link leads to the Widget Login page

Login

Register

Link leads to the Widget Register page

Register

Quick search

E.g: London.

Example listing

Example listing

Widget code:

<listing-videos
    listing-slug="alisander-close-3"
    :settings='{"sliderType":"carousel","title":{"text":"Video component - Carousel type"}}'>
</listing-videos>

Widget code:

<listing-videos
    listing-slug="alisander-close-3"
    :settings='{"sliderType":"slideGroup","title":{"text":"Video component - Slidegroup type","style":"color: #fff"},"slideGroup":{"sliderControls":{"nextButton":{"colour":"white"},"previousButton":{"colour":"white"}}}}'>
</listing-videos>

Example Listing Card slider

Widget code:

<listing-card-slider
    endpoint="home-featured-listings"
    :settings='{"linkToListing":"\/listings\/{slug}","slickOptions":{"slidesToShow":3,"slidesToScroll":3,"infinite":true,"arrows":true,"draggable":false,"responsive":[{"breakpoint":1200,"settings":{"slidesToShow":2,"slidesToScroll":2,"infinite":true}},{"breakpoint":800,"settings":{"slidesToShow":1,"slidesToScroll":1,"draggable":true}}]}}'>
</listing-card-slider>

Example appointment booking widget - Inline version

Widget code

<booking-form
    inline
    :modal="false"
    listing-slug="alisander-close-3"
    listing-name="Listing name goes here"
    listing-location="Listing location goes here"
    >
</booking-form>

Example appointment booking widget - Modal version

Widget code

<booking-form
    :modal="true"
    listing-slug="alisander-close-3"
    listing-name="Listing name goes here"
    listing-location="Listing location goes here"
    >
</booking-form>

Menu

Widget code

<login-menu></login-menu>
© 2026