<div class="demo-preview-block"> <div class="form"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="notification-title"/> <label class="mdl-textfield__label" for="notification-title">Title</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="notification-subtitle" /> <label class="mdl-textfield__label" for="notification-subtitle">Subtitle</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <textarea class="mdl-textfield__input" type="text" rows="2" id="notification-content" ></textarea> <label class="mdl-textfield__label" for="notification-content">Content</label> </div> <div id="notification-type" class="mdl-radio-group"> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-debug"> <input type="radio" id="type-debug" class="mdl-radio__button" name="type[]" value="debug" /> <span class="mdl-radio__label">Debug</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-info"> <input type="radio" id="type-info" class="mdl-radio__button" name="type[]" value="info" checked/> <span class="mdl-radio__label">Info</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-warning"> <input type="radio" id="type-warning" class="mdl-radio__button" name="type[]" value="warning" /> <span class="mdl-radio__label">Warning</span> </label> <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="type-error"> <input type="radio" id="type-error" class="mdl-radio__button" name="type[]" value="error" /> <span class="mdl-radio__label">Error</span> </label> </div> <button id="notification" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled> Add notification </button> <p class="info"> Warning + Error have a delay of 10secs, Debug + Info have a delay of 6.5secs. </p> </div> </div>