Notification

Standard notification

The standard notification looks like the following:

Design team meeting

3:00 - 4:00 PM

    
<div class="notification notification--standard" data-trigger="standard-expand">
    <header class="notification__header">
        <i class="material-icons icon">event</i>
        <div class="notification__header__content">Calendar</div>
        <i class="material-icons icon expand">expand_more</i>
    </header>

    <div class="notification__content">
        <div class="notification__content__title">Design team meeting</div>
        <div class="notification__content__text">3:00 - 4:00 PM</div>
    </div>

    <div class="notification__expanded" id="standard-expand">
        <div class="notification__expanded__actions">
            <button class="button button--text">Email Guests</button>
        </div>
    </div>
</div>

Big text

This is how notification with a big text looks like:

Lily MacDonald

Lasagna

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut consectetur consequuntur debitis dignissimos dolor eligendi fuga inventore iste itaque laborum maxime nihil numquam obcaecati omnis quod, soluta vel voluptate?

    
<div class="notification notification--big-text" data-trigger="text-expand">
    <header class="notification__header">
        <i class="material-icons icon">email</i>
        <div class="notification__header__content">Gmail</div>
        <div class="notification__header__date">8 min ago</div>
        <i class="material-icons icon expand">expand_more</i>
    </header>

    <div class="notification__content">
        <div class="notification__content__title">Lily MacDonald</div>
        <div class="notification__content__text">Lasagna</div>
        <div class="notification__content__image">
            <img src="//i.pravatar.cc/40" class="shape--circle" alt="notification image"/>
        </div>
    </div>

    <div class="notification__expanded" id="text-expand">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut consectetur consequuntur debitis dignissimos dolor eligendi fuga inventore iste itaque laborum maxime nihil numquam obcaecati omnis quod, soluta vel voluptate?
        </p>

        <div class="notification__expanded__actions">
            <button class="button button--text">Reply</button>
            <button class="button button--text">Archive</button>
        </div>
    </div>
</div>

Big picture

This is how a big picture notification looks like:

Screenshot captured

Tap to view your screenshot

    
<div class="notification notification--big-text" data-trigger="picture-expand">
    <header class="notification__header">
        <i class="material-icons icon">image</i>
        <div class="notification__header__content">Android System</div>
        <div class="notification__header__date">Now</div>
        <i class="material-icons icon expand">expand_more</i>
    </header>

    <div class="notification__content">
        <div class="notification__content__title">Screenshot captured</div>
        <div class="notification__content__text">Tap to view your screenshot</div>
        <div class="notification__content__image">
            <img src="//placeimg.com/40/40/nature" alt="notification image"/>
        </div>
    </div>

    <div class="notification__expanded" id="picture-expand">
        <img src="//placeimg.com/400/200/nature" alt="big picture"/>

        <div class="notification__expanded__actions">
            <button class="button button--text">Share</button>
            <button class="button button--text">Delete</button>
        </div>
    </div>
</div>

Progress

This is how a progress notification looks like:

App name

2 seconds left

    
<div class="notification notification--progress" data-trigger="progress-expand">
    <header class="notification__header">
        <i class="material-icons icon">get_app</i>
        <div class="notification__header__content">Download Manager</div>
        <div class="notification__header__date">68%</div>
        <i class="material-icons icon expand">expand_more</i>
    </header>

    <div class="notification__content">
        <div class="notification__content__title">App name</div>
        <div class="notification__content__text">2 seconds left</div>
        <div class="notification__content__image">
            <progress min="0" max="100" value="68" class="progress progress--determinate">
                <div class="progress progress--determinate">
                    <div class="progress__bar" style="width:68%"></div>
                </div>
            </progress>
        </div>
    </div>

    <div class="notification__expanded" id="progress-expand">
        <div class="notification__expanded__actions">
            <button class="button button--text">Cancel</button>
        </div>
    </div>
</div>

Messaging

This is how a messaging notification looks like:

Lily MacDonald

Do you want to see a movie

    
<div class="notification notification--messaging" data-trigger="messaging-expand">
    <header class="notification__header">
        <i class="material-icons icon">message</i>
        <div class="notification__header__content">Messages</div>
        <div class="notification__header__date">lilym@gmail.com</div>
        <i class="material-icons icon expand">expand_more</i>
    </header>

    <div class="notification__content">
        <div class="notification__content__image">
            <img src="//i.pravatar.cc/40" class="shape--circle" alt="notification image"/>
        </div>
        <div class="notification__content__title">Lily MacDonald</div>
        <div class="notification__content__text">Do you want to see a movie</div>
        <i class="material-icons icon">reply</i>
    </div>

    <div class="notification__expanded" id="messaging-expand">
        <div class="notification__expanded__actions">
            <button class="button button--text">Reply</button>
            <button class="button button--text">Archive</button>
        </div>
    </div>
</div>