Take Five! – Exit modes

  1. Default case
  2. Default case and a link with empty content
  3. The "pinned" class
  4. The "pinned" class and a link with empty content

Default case

This example shows a very typical situation: a normal slide and a link with the rel attribute set to "parent".

As you can see, by clicking on an empty area of the viewport the slide disappears.

<article class="slide" id="photo-of-the-day">
    <header>
        <h2>Photo of the day</h2>
    </header>
    <nav>
        <a href="#nowhere" rel="parent">My diary</a>
    </nav>
    <figure>
        <img src="media/1.jpg" />
        <figcaption>Into the woods</figcaption>
    </figure>
</article>

Default case and a link with empty content

This example shows a possible scenario: a normal slide and a link with the rel attribute set to "parent" with no content.

As you can see, by clicking on an empty area of the viewport the slide disappears.

<article class="slide" id="photo-of-the-day">
    <header>
        <h2>Photo of the day</h2>
    </header>
    <nav>
        <a href="#nowhere" rel="parent"></a>
    </nav>
    <figure>
        <img src="media/1.jpg" />
        <figcaption>Into the woods</figcaption>
    </figure>
</article>

The "pinned" class

This example shows a common scenario: a slide declared with the "pinned" class and a link with the rel attribute set to "parent".

As you can see, by clicking on an empty area of the viewport nothing happens.

<article class="pinned slide" id="photo-of-the-day">
    <header>
        <h2>Photo of the day</h2>
    </header>
    <nav>
        <a href="#nowhere" rel="parent">My diary</a>
    </nav>
    <figure>
        <img src="media/1.jpg" />
        <figcaption>Into the woods</figcaption>
    </figure>
</article>

The "pinned" class and a link with empty content

This example shows a possible scenario: a slide declared with the "pinned" class and a link with the rel attribute set to "parent" with no content.

As you can see, by clicking on an empty area of the viewport nothing happens.

<article class="pinned slide" id="photo-of-the-day">
    <header>
        <h2>Photo of the day</h2>
    </header>
    <nav>
        <a href="#nowhere" rel="parent"></a>
    </nav>
    <figure>
        <img src="media/1.jpg" />
        <figcaption>Into the woods</figcaption>
    </figure>
</article>