menu

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

This dialog offers good behavior on Chrome mobile as it is implementing a native API. A polyfill is provided for browser that don't support it.

Hey what's up?

The style guide is amazing but would you describe it?


    <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. The meta header is top bar that goes to the bottom on very small screens.


    <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="#">Account</a>
    			<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.

Max Mustermane person


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

Sub Header

On small screens when the menu become collapsed, a new sticky top bar can appear that offers the mobile plateform specific functions. You are free use this or not depending of your needs. If you do you might want to make sure your content is marked with .ric-layout__main or simple a sinle main element because a padding adjustement is needed on the content when the sticky top bar get out of the normal flow of the page (position:fixed). This will be done automatically for you if you apply this class.

My nice header
This the sub bar only visible on small screen

    <header class="ric-header">
    	<div class="ric-header__container">
    		My nice header
    	</div>
    	<div class="ric-header__subheader">
    		This the sub bar only visible on small screen
    	</div>
    </header>

Notices

Example of basic message to the user

This is a success message

This is a warning message

This is an error message

This is a success message

Let's put some content in there to see how it behaves


    <p class="ric-notice--success">
    	This is a <strong>success</strong> message
    </p>
    
    <p class="ric-notice--warning">
    	This is a <strong>warning</strong> message
    </p>
    
    <p class="ric-notice--error">
    	This is an <strong>error</strong> message
    </p>
    
    
    
    <div class="ric-notice--success">
    	<h2>This is a <strong>success</strong> message</h2>
    
    	<p>Let's put some <a href="#">content in there to see how it behaves</a></p>
    </div>

Feedback

Trigger for the feedback form.


    <div class="ric-feedback">
    	<div class="ric-feedback__container">
    		<div class="ric-feedback__image"></div>
    		<div class="ric-feedback__text">
    			<div>Your opinion matters.</div>
    			<a href="#">It really does.</a>
    		</div>
    	</div>
    </div>

Tabs

First

Second

Third


    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    
    	<div class="mdl-tabs__tab-bar">
    		<a href="#tabs-panel-one" class="mdl-tabs__tab is-active">First <small class="ric-layout__phone--hide">(123456)</small></a>
    		<a href="#tabs-panel-two" class="mdl-tabs__tab">Second</a>
    		<a href="#tabs-panel-three" class="mdl-tabs__tab">Third</a>
    	</div>
    
    	<div class="mdl-tabs__panel is-active" id="tabs-panel-one">
    		<h3>First</h3>
    	</div>
    
    	<div class="mdl-tabs__panel" id="tabs-panel-two">
    		<h3>Second</h3>
    	</div>
    
    	<div class="mdl-tabs__panel" id="tabs-panel-three">
    		<h3>Third</h3>
    	</div>
    </div>