Components

<form action="">
    	<div>
    		<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    			<input class="mdl-textfield__input" type="text" id="sample3">
    			<label class="mdl-textfield__label" for="sample3">my text</label>
    		</div>
    	</div>
    	<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect">Submit</button>
    </form>

<button id="show-dialog" class="ric-button--flat mdl-js-button mdl-js-ripple-effect">Show Dialog</button>
    <dialog class="mdl-dialog">
    	<h4 class="mdl-dialog__title">Hey what's up?</h4>
    	<div class="mdl-dialog__content">
    		<p>
    			The style guide is amazing but would you describe it?
    		</p>
    	</div>
    	<div class="mdl-dialog__actions">
    		<button class="ric-button--primary mdl-js-button mdl-js-ripple-effect close">Awesome</button>
    	</div>
    </dialog>
    <script>
    	document.addEventListener("DOMContentLoaded", function(event) {
    		var dialog = document.querySelector('dialog');
    		var showDialogButton = document.querySelector('#show-dialog');
    		if (!dialog.showModal) {
    			dialogPolyfill.registerDialog(dialog);
    		}
    		showDialogButton.addEventListener('click', function() {
    			dialog.showModal();
    		});
    		dialog.querySelector('.close').addEventListener('click', function() {
    			dialog.close();
    		});
    	});
    </script>

<div class="ric-metaheader">
    	<div class="ric-metaheader__container">
    		<div class="ric-metaheader__left-links">
    			<b>autoricardo</b>.ch
    		</div>
    		<div class="ric-metaheader__right-links">
    			<a href="#">Help</a>
    			<span class="ric-metaheader__languages">
              <span href="#" class="ric-metaheader--selected">DE</span>
    			<a href="#">FR</a>
    			</span>
    		</div>
    	</div>
    </div>

<footer class="ric-footer">
    	<div class="ric-footer__container">© 2017 ricardo.ch | All rights reserved</div>
    </footer>

<header class="ric-header">
    	<div class="ric-header__container">
    		<a href="/" class="ric-logo-responsive"></a>
    		<div class="ric-layout__spacer"></div>
    		<p class=ric-header__right-container>
    			Max Mustermane
    			<i class="material-icons">person</i>
    		</p>
    	</div>
    </header>