Components
Form
<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>
Dialog
<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>
Metaheader
See also Layout section
<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>
Header
The content of this header is just an example. Please add classes if necessary.
<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>