Awesomeness - Components

Placeholders

Text Placeholders

We need our space. If you do so as well or if you simply don't know your content yet, why not make friends with our text placeholders instead? Just insert an empty <div> for each line of text and you're done.

Example

Imports

SASS:

@import "base";
@import "imports/modules/placeholders";

Code

<div class="text-placeholder">
    <div></div>
    <div></div>
    <div></div>
</div>

Image Placeholders

Be there or be square! Or just use our fully flexible image placeholders in portrait or landscape mode.

Example

Square

Portrait

Landscape

Imports

SASS:

@import "base";
@import "imports/modules/placeholders";

Code

<div class="img-placeholder">
    <div class="img-placeholder--square"></div>
    <div class="img-placeholder__inner">Square</div>
</div>
<div class="img-placeholder">
        <div class="img-placeholder--portrait"></div>
        <div class="img-placeholder__inner">Portrait</div>
</div>
<div class="img-placeholder">
        <div class="img-placeholder--landscape"></div>
        <div class="img-placeholder__inner">Landscape</div>
</div>