Cirrus

#Placeholder

A placeholder is a friendly way to notify users of updates or upcoming events.

#Basic

A placeholder only consists of a couple of components.

  • placeholder - base class for the component.
    • placeholder-icon - container class for icon.
    • placeholder-title - class for the title.
    • placeholder-subtitle - class for the subtitle.
    • placeholder-commands - wraps around other controls like buttons or inputs.
The sever is currently taking a nap.
Come back in a few hours or press the refresh button.
<div class="placeholder">
    <div class="placeholder-icon"><span class="icon"><i class="fa fa-wrapper fa-coffee x-large"></i></span></div>
    <h6 class="placeholder-title">The sever is currently taking a nap.</h6>
    <div class="placeholder-subtitle">Come back in a few hours or press the refresh button.</div>
    <div class="placeholder-commands u-center">
        <div class="m-1">
            <button class="btn-primary">Refresh</button>
        </div>
        <div class="m-1">
            <button>Home</button>
        </div>
    </div>
</div>
Don't wait for the latest updates.
Sign up for our newsletter today.
<div class="placeholder">
    <div class="placeholder-icon"><span class="icon"><i class="fa fa-wrapper fa-envelope x-large"></i></span></div>
    <h6 class="placeholder-title">Don't wait for the latest updates.</h6>
    <div class="placeholder-subtitle">Sign up for our newsletter today.</div>
    <div class="placeholder-commands u-center">
        <div class="form-group">
            <input type="email" class="form-group-input" placeholder="Your email">
            <button class="btn-primary form-group-btn">Sign Up</button>
        </div>
    </div>
</div>