We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
Cards should be included as components where possible. You can include the ui_component includes as detailed below. Cards can either be fixed or flexible width. Flexible cards will expand to fit their container. The responsive grid is well suited for this.
Buttons can be used as links or as actions. Use colors to draw focus and attention to a button. Try to keep one primary action per visible content area.
<button class="button" type="button">Default</button>
<button class="button" type="button" disabled>Disabled</button><br>
<button class="button button-primary" type="button">Primary</button>
<button class="button button-primary" type="button" disabled>Disabled</button><br>
<button class="button button-primary button-inverse" type="button">Inverse</button>
<button class="button button-success" type="button" disabled>Disabled</button><br>
<button class="button button-success" type="button">Success</button>
<button class="button button-primary button-inverse" type="button" disabled>Disabled</button><br>
<button class="button button-danger" type="button">Danger</button>
<button class="button button-danger" type="button" disabled>Disabled</button><br>
<button class="button button-icon" type="button"><i class="icon-martini-full"></i></button>
<button class="button button-primary button-icon" type="button"><i class="icon-martini-full"></i></button>
<button class="button button-primary button-inverse button-icon" type="button"><i class="icon-martini-full"></i></button>
<button class="button button-icon" type="button" disabled><i class="icon-martini-full"></i></button>
Tabs should be included as components where possible. You can include the ui_component includes as detailed below. Cards can either be fixed or flexible width. Flexible cards will expand to fit their container. The responsive grid is well suited for this.
The default horizontal layout of a tab implementation. Text can be replaced with icons. Do not combine text and icons.
<ul class="nav nav-tabs">
<li class="active"><a href="">Orgs</a></li>
<li><a href="">Locations</a></li>
<li><a href="">Sensors</a></li>
<li><a href="">Accounts</a></li>
</ul>
Cards should be included as components where possible. You can include the ui_component includes as detailed below. Cards can either be fixed or flexible width. Flexible cards will expand to fit their container. The responsive grid is well suited for this.
Dialogue cards will contain text only with the exception of a close icon.
<div class="card">
<div class="card-header">
<h2 class="card-header-title">Permissions</h2>
<button class="close"><i class="icon-close"></i></button>
</div>
<div class="card-body">
Body text goes here.
</div>
<div class="card-footer">
<div class="card-footer-actions">
<button class="button">Decline</button>
<button class="button">Accept</button>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.
If your content extends beyond the bounds of a card, you set your markup up to allow for the body to scroll.
<div class="card">
<div class="card-header">
<h2 class="card-header-title">Permissions</h2>
<button class="close"><i class="icon-close"></i></button>
</div>
<div class="card-body">
Body text goes here.
</div>
<div class="card-footer">
<div class="card-footer-actions">
<button class="button">Decline</button>
<button class="button">Accept</button>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.
Images with cards are an exceptable and encouraged practice.
<div class="card">
<div class="card-header">
<h2 class="card-header-title">Permissions</h2>
<button class="close"><i class="icon-close"></i></button>
</div>
<div class="card-body">
Body text goes here.
</div>
<div class="card-footer">
<div class="card-footer-actions">
<button class="button">Decline</button>
<button class="button">Accept</button>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisinuli.