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') |