Component usage
| Layer | Components |
|---|---|
| Base | Detail page header without tabs |
| Flat | Interior left nav, detail page header with tabs, tables |
| Raised | Modules, cards |
| Overlay | Overflow menu, dropdowns, tooltips |
| Sticky nav | Global header (on scroll), detail page header (on scroll) |
| Temporary nav | Global left nav |
| Pop-out | Modals |
Overlay - 8
Detail page header
(on scroll)Raised - 2
Module
Flat - 1
Interior left nav
Base - 0
Code usage
To use in code, just include the layer mixin like so with the appropriate layer value from the table below:
@include layer('raised');
| Layer | Mixin value |
|---|---|
| Base | @include layer('raised') |
| Flat | @include layer('flat') |
| Raised | @include layer('raised') |
| Overlay | @include layer('overlay') |
| Sticky nav | @include layer('global-header') |
| Temporary nav | @include layer('left-nav') |
| Pop-out | @include layer('pop-out') |