<div class="demo-preview-block"> <div class="demo-button"> <button id="toast" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> Toast </button> <button id="withAction" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> with Action </button> </div> <h6>Toast Postition</h6> <div class="position"> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-top"> <input type="checkbox" id="checkbox-top" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">top</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-left"> <input type="checkbox" id="checkbox-left" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">left</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-right"> <input type="checkbox" id="checkbox-right" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">right</span> </label> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-bottom"> <input type="checkbox" id="checkbox-bottom" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">bottom</span> </label> </div> <div id="container" class="container">Container</div> <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-use-container"> <input type="checkbox" id="checkbox-use-container" class="mdl-checkbox__input" /> <span class="mdl-checkbox__label">use container</span> </label> </div>