gram: `card`

> `./docs/examples/hackernews.md`

Lenses
(coming soon!)

# Hackernews Gallery

Hackernews is a website that is popular among developers and entrepreneurs. Anybody can create an account and add content which is presented in a timeline format (most recent first).

But sometimes, users want to see content in a different format. 

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

<img class="galleryImages" src="examples/_images/hackernews/wildcard_closed.png" alt="Hackernews Default View" style="display:block;">
<figcaption class="figcaption" style="display:block"> Default View in Timeline Format. </figcaption>

<img class="galleryImages" src="examples/_images/hackernews/wildcard_open.png" alt="Hackernews Default View with Wildcard Opened">
<figcaption> Default View with Wildcard opened. </figcaption>

<img class="galleryImages" src="examples/_images/hackernews/ranked_by_points.png" alt="Hackernews with content sorted by points">
<figcaption> Content presented based on descending order of points using Wildcard </figcaption>

<img class="galleryImages" src="examples/_images/hackernews/ranked_by_comments.png" alt="Hackernews with content sorted by points">
<figcaption> Content presented based on highest level of engagement. </figcaption>

<img class="galleryImages" src="examples/_images/hackernews/annotation_vid.gif" alt="Hackernews with annotations">
<figcaption> Users can also add their own annotations to the articles. These annotations persist across page refreshes. </figcaption>

<div class="w3-center w3-container w3-text-white" 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/hackernews.md

gram: `card`

> `./docs/examples/hackernews.md`
