Back to the list

Cover

A parallax cover can be a nice way to start a page.

File to include

@import "components/cover";

Cover center

Demo here

<div class="cover" data-align="center">
    <picture>
        <source media="(max-width: 600px)" srcset="/assets/images/s-cover-parallax.jpg">
        <source media="(max-width: 1024px)" srcset="/assets/images/m-cover-parallax.jpg">
        <img src="/assets/images/l-cover-parallax.jpg" alt="Cover">
    </picture>

    <div class="content">
        <h1 class="display">Title</h1>
        <h2 class="display">Subtitle</h2>
    </div>
</div>

Cover center with overlay

Demo here

<div class="cover" data-align="center" data-overlay>
    <img src="/assets/images/l-cover-parallax.jpg" alt="Cover">

    <div class="content">
        <h1 class="display">Title</h1>
        <h2 class="display">Subtitle</h2>
    </div>
</div>

Cover bottom

Demo here

<div class="cover" data-align="bottom">
    <img src="/assets/images/l-cover-parallax.jpg" alt="Cover">

    <div class="content">
        <h1 class="display">Title</h1>
        <h2 class="display">Subtitle</h2>
    </div>
</div>

Cover bottom with overlay

Demo here

<div class="cover" data-align="bottom" data-overlay>
    <img src="/assets/images/l-cover-parallax.jpg" alt="Cover">

    <div class="content">
        <h1 class="display">Title</h1>
        <h2 class="display">Subtitle</h2>
    </div>
</div>

Attributes

Name Example value Possible values Default Required
data-align bottom "center" | "bottom" center No
data-overlay - - None No