Responsive Aside Navigation

Resize the window. On mobile, use the hamburger to open the left drawer. On desktop, the sidebar stays pinned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis, arcu eget pharetra…

Scaffolding
				
<div class="stage p-20">
	<div class="col-8">A</div>
	<div class="col-4">B</div>
</div>
				
			

Configuration

                    
    <div class="stage p-20">
        <div class="col-8">A</div>
        <div class="col-4">B</div>
    </div>
                    
                

Typography

Font Size

xs

sm

base

lg

xl

xxl

Font Weight

light

normal

medium

bold

Letter Height

light

relaxed

tight

Letter Spacing

tight

normal

wide

Font Types

Animation

Transitions

transition-fast { transition:150ms ease-in-out; }

transition-normal { transition:300ms ease-in-out; }

transition-slow { transition:500ms ease-in-out; }

delay-* (0 - 2s, 0.1s increments)

Spacing

Dimensions

Components

Colors