Skip to main content

Component usage

BaseDetail page header without tabs
FlatInterior left nav, detail page header with tabs, tables
RaisedModules, cards
OverlayOverflow menu, dropdowns, tooltips
Sticky navGlobal header (on scroll), detail page header (on scroll)
Temporary navGlobal left nav
  • Overlay - 8

    Detail page header
    (on scroll)

  • Raised - 2


  • Flat - 1

    Interior left nav

  • Base - 0

layer usage

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