gram: `card`

> `./docs/examples/airbnb.md`

Lenses
(coming soon!)

# AirBnB Gallery

When people plan travel, they most likely wanted to find the most budget-friendly option for their needs. Sometimes, they prefer to find the most walkable location. The bottom line is that users have different needs when considering accommodation and Wildcard empowers them to do so.


<div class="w3-content w3-display-container">

<img class="galleryImages" src="examples/_images/airbnb/wildcard_closed.png" alt="AirBnB with Wildcard closed" style="display:block;">
<figcaption class="figcaption" style="display:block"> AirBnB Default View.  </figcaption>

<img class="galleryImages" src="examples/_images/airbnb/wildcard_open.png" alt="AirBnB with Wildcard open">
<figcaption> AirBnB Default View with Wildcard Open. </figcaption>

<img class="galleryImages" src="examples/_images/airbnb/ranked_by_price.png" alt="Users can sort listings by price">
<figcaption> AirBnB with listings sorted by price. </figcaption>

<img class="galleryImages" src="examples/_images/airbnb/ranked_by_rating.png" alt="AirBnB with listings sorted by rating">
<figcaption> Users can also sort listings by rating. </figcaption>

<img class="galleryImages" src="examples/_images/airbnb/annotations.png" alt="AirBnB listings with annotations">
    <figcaption> One really fascinating thing that you can do with Wildcard is to add annotations/comments to different listings. These annotations persist across page refreshes because they are stored in your browser's local storage.  </figcaption>


<div class="w3-center w3-container" style="width:100%">
    <div class="w3-left w3-display-left" onclick="moveBy(-1)">&#10094;</div>
    <div class="w3-right w3-display-right" onclick="moveBy(1)">&#10095;</div>
    <span class="w3-badge demo w3-white w3-border w3-hover-lime" onclick="moveToFigure(1)"></span>
    <span class="w3-badge demo w3-green w3-border w3-hover-lime" onclick="moveToFigure(2)"></span>
    <span class="w3-badge demo w3-green w3-border w3-hover-lime" onclick="moveToFigure(3)"></span>
    <span class="w3-badge demo w3-green w3-border w3-hover-lime" onclick="moveToFigure(4)"></span>
    <span class="w3-badge demo w3-green w3-border w3-hover-lime" onclick="moveToFigure(5)"></span>
</div>


</div>
gram: card

> ./docs/examples/airbnb.md

gram: `card`

> `./docs/examples/airbnb.md`
