diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.html b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.html
new file mode 100644
index 000000000..2ddc29596
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.html
@@ -0,0 +1,16 @@
+<div class="checkbox-example-container">
+    <hc-checkbox>
+        This is a center aligned checkbox (default) with a lot of associated text.
+        The align parameter is used to position the checkbox relative to its label.
+    </hc-checkbox>
+
+    <hc-checkbox align="top">
+        This checkbox is top aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Aenean commodo dolor sed justo ullamcorper mattis.
+    </hc-checkbox>
+
+    <hc-checkbox align="bottom">
+        This checkbox is bottom aligned. Praesent dignissim fermentum auctor.
+        Nulla nibh lectus, dignissim ultrices condimentum et, rutrum eu tortor.
+    </hc-checkbox>
+</div>
diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.scss b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.scss
new file mode 100644
index 000000000..9f9106a03
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.scss
@@ -0,0 +1,9 @@
+.checkbox-example-container {
+    display: flex;
+    align-items: center;
+
+    hc-checkbox {
+        flex: 1;
+        margin-right: 15px;
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.ts b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.ts
new file mode 100644
index 000000000..402a38008
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/checkbox-align/checkbox-align-example.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Checkbox Alignment
+ */
+@Component({
+    selector: 'hc-checkbox-align-example',
+    templateUrl: 'checkbox-align-example.component.html',
+    styleUrls: ['checkbox-align-example.component.scss']
+})
+export class CheckboxAlignExampleComponent {}
diff --git a/projects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html b/projects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html
index 836cb0923..627556a3f 100644
--- a/projects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html
+++ b/projects/cashmere-examples/src/lib/checkbox-standard/checkbox-standard-example.component.html
@@ -1,5 +1,7 @@
-<hc-checkbox id="light">Standard Checkbox</hc-checkbox>
+<hc-checkbox>Standard Checkbox</hc-checkbox>
 
-<hc-checkbox id="disabled" disabled="true">Disabled Checkbox</hc-checkbox>
+<hc-checkbox disabled="true">Disabled Checkbox</hc-checkbox>
 
-<hc-checkbox id="disabled" [checked]="true" disabled="true">Disabled Checkbox (Checked)</hc-checkbox>
+<hc-checkbox [checked]="true" disabled="true">Disabled Checkbox (Checked)</hc-checkbox>
+
+<hc-checkbox tight="true">Tight Checkbox</hc-checkbox>
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.html b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.html
new file mode 100644
index 000000000..48d71a3d5
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.html
@@ -0,0 +1,45 @@
+<p>For forms that need to fit in smaller spaces, the <code>tight</code> parameter may be set to true on
+either the <code>hcForm</code> or individual <code>hc-form-field</code> elements.</p>
+<br>
+<form hcForm tight="true">
+    <div class="form-sample">
+        <hc-form-field>
+            <hc-label>Job Name:</hc-label>
+            <input hcInput required [formControl]="inputControl">
+            <hc-error>A job name is required</hc-error>
+        </hc-form-field>
+    </div>
+
+    <hc-form-field inline="true">
+        <hc-label>Data Source:</hc-label>
+        <hc-radio-group [formControl]="radioControl" inline="true">
+            <hc-radio-button value="SM">Source Mart</hc-radio-button>
+            <hc-radio-button value="SAM">Subject Area Mart</hc-radio-button>
+            <hc-radio-button value="Other">Other</hc-radio-button>
+        </hc-radio-group>
+        <hc-error>Specified data source does not match description</hc-error>
+    </hc-form-field>
+
+    <div class="form-sample">
+        <hc-form-field inline="true">
+            <hc-label>Run Frequency:</hc-label>
+            <hc-select placeholder="Select frequency:" [formControl]="selectControl">
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+            </hc-select>
+            <hc-error>Please select the run frequency for this item</hc-error>
+        </hc-form-field>
+    </div>
+
+    <div class="form-sample flex-column">
+        <hc-form-field>
+            <hc-label>Requested Notifications:</hc-label>
+            <hc-checkbox [formControl]="checkControl">On failure</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On sucess</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On row-count mismatch</hc-checkbox>
+            <hc-checkbox [formControl]="checkControl">On dependency-wait timeout</hc-checkbox>
+            <hc-error>At least one notification must be selected</hc-error>
+        </hc-form-field>
+    </div>
+</form>
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.scss b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.scss
new file mode 100644
index 000000000..388ac6032
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.scss
@@ -0,0 +1,8 @@
+.form-sample {
+    max-width: 350px;
+    width: 100%;
+}
+
+.flex-column {
+    flex-direction: column;
+}
diff --git a/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.ts b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.ts
new file mode 100644
index 000000000..0ea1a2006
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/form-field-tight/form-field-tight-example.component.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tight Form Field Elements
+ */
+@Component({
+    selector: 'hc-form-field-tight-example',
+    templateUrl: 'form-field-tight-example.component.html',
+    styleUrls: ['form-field-tight-example.component.scss']
+})
+export class FormFieldTightExampleComponent {
+    selectControl = new FormControl('daily');
+    inputControl = new FormControl('');
+    radioControl = new FormControl('SM');
+    checkControl = new FormControl('');
+}
diff --git a/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html b/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html
index e021b09eb..7db7f6481 100644
--- a/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html
+++ b/projects/cashmere-examples/src/lib/input-suffix/input-suffix-example.component.html
@@ -1,10 +1,14 @@
-<hc-form-field inline="true">
+<p>These inputs have the <code>tight</code> parameter set to true.</p>
+
+<br>
+
+<hc-form-field inline="true" tight="true">
     <hc-label>Minimum Value:</hc-label>
     <input hcInput placeholder="0-100" class="demo-input">
     <hc-icon hcSuffix fontSet="fa" fontIcon="fa-thermometer-0"></hc-icon>
 </hc-form-field>
 
-<hc-form-field inline="true">
+<hc-form-field inline="true" tight="true">
     <hc-label>Maximum Value:</hc-label>
     <input hcInput placeholder="100-500" class="demo-input">
     <hc-icon hcSuffix fontSet="fa" fontIcon="fa-thermometer-full"></hc-icon>
diff --git a/projects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html b/projects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html
index 1f75ef75a..c872b7e4d 100644
--- a/projects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html
+++ b/projects/cashmere-examples/src/lib/modal-overview/modal-overview-example-modal.component.html
@@ -1,5 +1,9 @@
 <hc-modal>
     <hc-modal-header>Modal Header Title</hc-modal-header>
+    <hc-banner type="warning">
+        <span hcBannerStamp>WARNING</span>
+        You are about to export data which may include Protected Health Information (PHI)
+    </hc-banner>
     <hc-modal-body>Data: {{ activeModal.data }}</hc-modal-body>
     <hc-modal-footer>
         <button hc-button buttonStyle="link" (click)="cancel()">Cancel</button>
diff --git a/projects/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html b/projects/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html
index 862667ca5..091e63c38 100644
--- a/projects/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html
+++ b/projects/cashmere-examples/src/lib/radio-button-forms/radio-button-forms-example.component.html
@@ -1,5 +1,5 @@
-<hc-form-field inline="true">
-    <hc-label>Select your favorite:</hc-label>
+<hc-form-field inline="true" tight="true">
+    <hc-label>Radio buttons with tight styling:</hc-label>
     <hc-radio-group [(ngModel)]="favoriteShow" inline="true">
         <hc-radio-button *ngFor="let show of shows" [value]="show">{{show}}</hc-radio-button>
     </hc-radio-group>
diff --git a/projects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html b/projects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html
index 434ad17be..7e7435967 100644
--- a/projects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html
+++ b/projects/cashmere-examples/src/lib/select-validation/select-validation-example.component.html
@@ -1,7 +1,7 @@
 <form>
     <div class="select-sample">
-        <hc-form-field>
-            <hc-label>Project Status:</hc-label>
+        <hc-form-field tight="true">
+            <hc-label>Select with Tight Styling:</hc-label>
             <hc-select [formControl]="selectControl" required>
                 <option value="active">Active</option>
                 <option value="inactive">Inactive</option>
diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.html b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.html
new file mode 100644
index 000000000..46a175304
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.html
@@ -0,0 +1,32 @@
+<div class="stepper-options">
+    <hc-form-field>
+        <hc-label>Stepper Type:</hc-label>
+        <hc-select [(ngModel)]="currentType">
+            <option *ngFor="let type of typeOptions" [value]="type">{{type}}</option>
+        </hc-select>
+    </hc-form-field>
+
+    <hc-form-field>
+        <hc-label>Stepper Color:</hc-label>
+        <hc-select [(ngModel)]="currentColor">
+            <option *ngFor="let color of colorOptions" [value]="color">{{color}}</option>
+        </hc-select>
+    </hc-form-field>
+
+    <hc-form-field>
+        <hc-label>Step Count (Isolated type only):</hc-label>
+        <hc-checkbox [(ngModel)]="showSteps">Show Step Count</hc-checkbox>
+    </hc-form-field>
+</div>
+
+<hc-stepper
+    [color]="currentColor"
+    [type]="currentType"
+    [showStepCount]="showSteps"
+    [steps]="progressSteps"
+    useRouterOutlet="false"
+    [(activeIndex)]="currentStep"
+    #stepperElement>
+</hc-stepper>
+
+<p>Current Step Index: <strong>{{currentStep}}</strong></p>
diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.scss b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.scss
new file mode 100644
index 000000000..7af440ef5
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.scss
@@ -0,0 +1,10 @@
+.stepper-options {
+    display: flex;
+    margin-bottom: 20px;
+
+    hc-form-field {
+        flex: 1;
+        max-width: 250px;
+        margin-right: 25px;
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.ts b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.ts
new file mode 100644
index 000000000..c68dfbeb3
--- /dev/null
+++ b/projects/cashmere-examples/src/lib/stepper-overview/stepper-overview-example.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import {StepInterface} from '@healthcatalyst/cashmere';
+
+/**
+ * @title Stepper overview
+ */
+@Component({
+    selector: 'hc-stepper-overview-example',
+    templateUrl: 'stepper-overview-example.component.html',
+    styleUrls: ['stepper-overview-example.component.scss']
+})
+export class StepperOverviewExampleComponent implements OnInit {
+    progressSteps: StepInterface[];
+    currentColor: string = 'green';
+    colorOptions: string[] = ['green', 'blue', 'purple', 'orange', 'red'];
+    currentType: string = 'arrow';
+    typeOptions: string[] = ['arrow', 'isolated'];
+    showSteps: boolean  = true;
+    currentStep: number = 2;
+
+    ngOnInit() {
+        // To use with a router, add a `routerLink` to each step
+        this.progressSteps = [
+            {label: 'Winter', iconSet: 'fa', icon: 'fa-check'},
+            {label: 'January', iconSet: 'fa', icon: 'fa-check'},
+            {label: 'Spring'},
+            {label: 'Summer'},
+            {label: 'Fall', iconSet: 'fa', icon: 'fa-lock', disabled: true},
+            {label: 'Year Round', iconSet: 'fa', icon: 'fa-lock', disabled: true}
+        ];
+    }
+}
diff --git a/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html b/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html
index 69bed2923..ef7e4ab1e 100644
--- a/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html
+++ b/projects/cashmere-examples/src/lib/table-sort/table-sort-example.component.html
@@ -1,4 +1,6 @@
-<table hc-table [dataSource]="dataSource" hcSort>
+<p>This is an example of a sortable table with <code>tight</code> styling.</p>
+
+<table hc-table [dataSource]="dataSource" tight="true" hcSort>
 
     <!-- Position Column -->
     <ng-container hcColumnDef="position">
diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html
index 448673409..10a1cba3d 100644
--- a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html
+++ b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.html
@@ -1,5 +1,5 @@
 <div class="tab-demo">
-    <hc-tab-set defaultTab="1">
+    <hc-tab-set defaultTab="1" [tight]="_tight">
         <hc-tab tabTitle="Nested Tabs">
             <hc-tab-set direction="horizontal">
                 <hc-tab tabTitle="Tab 1">
@@ -43,3 +43,5 @@
         </hc-tab>
     </hc-tab-set>
 </div>
+
+<hc-checkbox [(ngModel)]="_tight">Apply Tight Styling to Tabs</hc-checkbox>
diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss
index 3893f5c52..ab469fc82 100644
--- a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss
+++ b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.scss
@@ -4,6 +4,7 @@
 
 .tab-demo {
     border: 1px solid #e0e0e0;
+    margin-bottom: 15px;
 }
 
 .tab-bar-content {
diff --git a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts
index d68a36dfb..d54664371 100644
--- a/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts
+++ b/projects/cashmere-examples/src/lib/tabs-vertical/tabs-vertical-example.component.ts
@@ -8,4 +8,6 @@ import {Component} from '@angular/core';
     templateUrl: 'tabs-vertical-example.component.html',
     styleUrls: ['tabs-vertical-example.component.scss']
 })
-export class TabsVerticalExampleComponent {}
+export class TabsVerticalExampleComponent {
+    _tight: boolean = false;
+}
diff --git a/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html b/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html
index 0f894c705..7c17352e3 100644
--- a/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html
+++ b/projects/cashmere-examples/src/lib/tile-overview/tile-overview-example.component.html
@@ -2,3 +2,8 @@
     <h5>Example Tile</h5>
     <p>This paragraph is contained within a <code>hc-tile</code> component.</p>
 </hc-tile>
+
+<hc-tile tight="true">
+    <h5>Tight Tile</h5>
+    <p>This is a tile with <code>tight</code> styling. It has less padding.</p>
+</hc-tile>
diff --git a/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts b/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts
index 36f519d4d..d98c0fd59 100644
--- a/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts
+++ b/projects/cashmere-examples/src/project-template/src/app/cashmere.module.ts
@@ -25,6 +25,7 @@ import {
     ScrollNavModule,
     SelectModule,
     SortModule,
+    StepperModule,
     SubnavModule,
     TabsModule,
     TableModule,
@@ -60,6 +61,7 @@ import {
         ScrollNavModule,
         SelectModule,
         SortModule,
+        StepperModule,
         SubnavModule,
         TableModule,
         TabsModule,
diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.html b/projects/cashmere/src/lib/checkbox/checkbox.component.html
index b0589ff87..cd788c2e9 100644
--- a/projects/cashmere/src/lib/checkbox/checkbox.component.html
+++ b/projects/cashmere/src/lib/checkbox/checkbox.component.html
@@ -1,5 +1,5 @@
 <div class="hc-checkbox-container">
-    <div class="hc-checkbox-content">
+    <div class="hc-checkbox-content" [class.hc-checkbox-tight]="tight" [ngClass]="'hc-checkbox-align-'+align">
         <input #checkboxInput
                type="checkbox"
                [id]="_inputId"
@@ -14,7 +14,7 @@
                (click)="_clickEvent($event)"
                (blur)="_onBlur()"/>
         <label class="hc-checkbox-overlay" [attr.for]="_inputId"></label>
-        <label class="hc-checkbox-label" [attr.for]="_inputId">
+        <label class="hc-checkbox-label" [ngClass]="'hc-checkbox-align-label-'+align" [attr.for]="_inputId">
             <ng-content></ng-content>
         </label>
     </div>
diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.scss b/projects/cashmere/src/lib/checkbox/checkbox.component.scss
index 4adeec345..c64e45c2d 100644
--- a/projects/cashmere/src/lib/checkbox/checkbox.component.scss
+++ b/projects/cashmere/src/lib/checkbox/checkbox.component.scss
@@ -24,13 +24,41 @@
     }
 }
 
+.hc-checkbox-align-center {
+    @include hc-checkbox-align-center();
+}
+
+.hc-checkbox-align-top {
+    @include hc-checkbox-align-top();
+}
+
+.hc-checkbox-align-bottom {
+    @include hc-checkbox-align-bottom();
+}
+
 .hc-checkbox-label {
     @include hc-checkbox-label();
+
+    .hc-checkbox-tight & {
+        @include hc-checkbox-label-tight();
+    }
+}
+
+.hc-checkbox-align-label-top {
+    @include hc-checkbox-align-label-top();
+}
+
+.hc-checkbox-align-label-bottom {
+    @include hc-checkbox-align-label-bottom();
 }
 
 .hc-checkbox-overlay {
     @include hc-checkbox-overlay();
 
+    .hc-checkbox-tight & {
+        @include hc-checkbox-overlay-tight();
+    }
+
     .hc-checkbox-content:hover & {
         @include hc-checkbox-overlay-hover();
     }
@@ -39,6 +67,10 @@
         @include hc-checkbox-overlay-indeterminate();
     }
 
+    .hc-checkbox-indeterminate .hc-checkbox-tight & {
+        @include hc-checkbox-overlay-indeterminate-tight();
+    }
+
     input[type='checkbox']:checked + & {
         @include hc-checkbox-overlay-checked();
     }
diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.spec.ts b/projects/cashmere/src/lib/checkbox/checkbox.component.spec.ts
index 5cbd22013..20bd023d3 100644
--- a/projects/cashmere/src/lib/checkbox/checkbox.component.spec.ts
+++ b/projects/cashmere/src/lib/checkbox/checkbox.component.spec.ts
@@ -164,6 +164,11 @@ describe('CheckboxComponent', () => {
 
             expect(inputElement.value).toBe('basic_checkbox');
         });
+
+        it('should align the checkbox label based on the align parameter', () => {
+            let alignClass = fixture.debugElement.queryAll(By.css('.hc-checkbox-align-top'));
+            expect(alignClass.length).toBe(1);
+        });
     });
 
     describe('with form control', () => {
@@ -244,6 +249,7 @@ describe('CheckboxComponent', () => {
                 [checked]="isChecked"
                 [indeterminate]="isIndeterminate"
                 [disabled]="isDisabled"
+                [align]="alignVal"
                 [value]="checkboxValue"
                 (click)="onCheckboxClick($event)"
                 (change)="onCheckboxChange($event)"
@@ -262,6 +268,7 @@ export class SingleCheckboxComponent {
     parentElementKeyedUp: boolean = false;
     checkboxId: string | null = 'simple-check';
     checkboxValue: string = 'single_checkbox';
+    alignVal: string = "top";
 
     onCheckboxClick: (event?: Event) => void = () => {};
     onCheckboxChange: (event?: CheckboxChangeEvent) => void = () => {};
diff --git a/projects/cashmere/src/lib/checkbox/checkbox.component.ts b/projects/cashmere/src/lib/checkbox/checkbox.component.ts
index 53f36d2f5..c83a2ad6e 100644
--- a/projects/cashmere/src/lib/checkbox/checkbox.component.ts
+++ b/projects/cashmere/src/lib/checkbox/checkbox.component.ts
@@ -39,6 +39,7 @@ export class CheckboxComponent extends HcFormControlComponent implements Control
     private _form: NgForm | FormGroupDirective | null;
     private _checked: boolean = false;
     private _tabIndex: number;
+    private _tight: boolean = false;
 
     _componentId = this._uniqueId;
 
@@ -60,6 +61,19 @@ export class CheckboxComponent extends HcFormControlComponent implements Control
         this._componentId = idVal ? idVal : this._uniqueId;
     }
 
+    /** If true, condense the default margin and reduce the font size. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+    }
+
+    /** Sets the position of the checkbox relative to its associated label. *Defaults to `center`.*  */
+    @Input()
+    align: 'center' | 'top' | 'bottom' = 'center';
+
     /** Sets unique name used in a form */
     @Input()
     name: string | null = null;
diff --git a/projects/cashmere/src/lib/form-field/hc-form-control.component.ts b/projects/cashmere/src/lib/form-field/hc-form-control.component.ts
index 2025d90ed..cfe87a51a 100644
--- a/projects/cashmere/src/lib/form-field/hc-form-control.component.ts
+++ b/projects/cashmere/src/lib/form-field/hc-form-control.component.ts
@@ -19,4 +19,7 @@ export abstract class HcFormControlComponent {
 
     /** Whether the control is required */
     _isRequired: boolean = false;
+
+    /** Whether the control should apply tight styling */
+    tight: boolean = false;
 }
diff --git a/projects/cashmere/src/lib/form-field/hc-form-field.component.html b/projects/cashmere/src/lib/form-field/hc-form-field.component.html
index 1d2957ad6..b76167c35 100644
--- a/projects/cashmere/src/lib/form-field/hc-form-field.component.html
+++ b/projects/cashmere/src/lib/form-field/hc-form-field.component.html
@@ -1,6 +1,10 @@
-<div [class.hc-form-field-wrapper-inline]="inline" [class.hc-form-field-wrapper]="!inline" [class.hc-form-field-no-label]="!hasLabel">
-    <span *ngIf="hasLabel" [ngClass]="inline ? 'hc-form-field-label-wrapper-inline' : 'hc-form-field-label-wrapper'">
-        <label [ngClass]="inline ? 'hc-form-field-label-inline' : 'hc-form-field-label'" [attr.for]="_control._componentId">
+<div
+    [class.hc-form-field-wrapper-inline]="inline"
+    [class.hc-form-field-wrapper]="!inline"
+    [class.hc-form-field-no-label]="!hasLabel"
+    [class.hc-form-field-wrapper-tight]="tight" >
+    <span *ngIf="hasLabel" [ngClass]="inline ? 'hc-form-field-label-wrapper-inline' : 'hc-form-field-label-wrapper'" [class.hc-form-field-label-wrapper-tight]="tight">
+        <label [ngClass]="inline ? 'hc-form-field-label-inline' : 'hc-form-field-label'" [class.hc-form-field-label-tight]="tight" [attr.for]="_control._componentId">
             <ng-content select="hc-label"></ng-content>
             <span class="hc-required-marker" aria-hidden="true" *ngIf="_control._isRequired && !_control._isDisabled">&nbsp;*</span>
         </label>
@@ -15,7 +19,7 @@
             <div class="hc-form-field-prefix" *ngIf="_prefixChildren.length">
                 <ng-content select="[hcPrefix]"></ng-content>
             </div>
-            <div #inputs class="hc-form-field-infix">
+            <div #inputs class="hc-form-field-infix" [class.hc-form-field-infix-tight]="tight">
                 <ng-content select="[hcInput]"></ng-content>
             </div>
             <div class="hc-form-field-suffix" *ngIf="_suffixChildren.length">
@@ -27,6 +31,7 @@
             *ngIf="!hasInput"
             [class.hc-form-field-non-input]="!inline"
             [class.hc-form-field-non-input-inline]="inline"
+            [class.hc-form-field-non-input-inline-tight]="inline && tight"
             [class.hc-form-field-invalid]="_shouldShowErrorMessages()"
         >
             <ng-content></ng-content>
diff --git a/projects/cashmere/src/lib/form-field/hc-form-field.component.scss b/projects/cashmere/src/lib/form-field/hc-form-field.component.scss
index 7c67c25e3..2c4a6995d 100644
--- a/projects/cashmere/src/lib/form-field/hc-form-field.component.scss
+++ b/projects/cashmere/src/lib/form-field/hc-form-field.component.scss
@@ -6,12 +6,20 @@
 
 .hc-form-field-wrapper {
     @include hc-form-field-wrapper();
+
+    &.hc-form-field-wrapper-tight {
+        @include hc-form-field-wrapper-tight-border();
+    }
 }
 
 .hc-form-field-wrapper-inline {
     @include hc-form-field-wrapper-inline();
 }
 
+.hc-form-field-wrapper-tight {
+    @include hc-form-field-wrapper-tight();
+}
+
 .hc-form-field-content-wrapper {
     @include hc-form-field-content-wrapper();
 }
@@ -45,12 +53,20 @@
     @include hc-form-field-non-input-inline();
 }
 
+.hc-form-field-non-input-inline-tight {
+    @include hc-form-field-non-input-inline-tight();
+}
+
 .hc-form-field-prefix,
 .hc-form-field-suffix {
     @include hc-form-field-prefix-suffix();
 
     .hc-icon {
         @include hc-form-field-prefix-suffix-icon();
+
+        .hc-form-field-wrapper-tight & {
+            @include hc-form-field-prefix-suffix-tight();
+        }
     }
 
     .hc-form-field-disabled & {
@@ -70,12 +86,20 @@
     @include hc-form-field-infix();
 }
 
+.hc-form-field-infix-tight {
+    @include hc-form-field-infix-tight();
+}
+
 .hc-form-field-label-wrapper {
     @include hc-form-field-label-wrapper();
 
     .hc-icon {
         @include hc-form-field-label-wrapper-icon();
     }
+
+    &.hc-form-field-label-wrapper-tight {
+        @include hc-form-field-label-tight();
+    }
 }
 
 .hc-form-field-label-wrapper-inline {
@@ -84,20 +108,28 @@
     .hc-icon {
         @include hc-form-field-label-wrapper-icon();
     }
+
+    &.hc-form-field-label-wrapper-tight {
+        @include hc-form-field-label-wrapper-tight-inline();
+    }
 }
 
 .hc-form-field-label {
     @include hc-form-field-label();
 }
 
-.hc-form-field-no-label {
-    @include hc-form-field-no-label();
-}
-
 .hc-form-field-label-inline {
     @include hc-form-field-label-inline();
 }
 
+.hc-form-field-label-tight {
+    @include hc-form-field-label-tight();
+}
+
+.hc-form-field-no-label {
+    @include hc-form-field-no-label();
+}
+
 .hc-form-field-error-wrapper {
     @include hc-form-field-error-wrapper();
 }
diff --git a/projects/cashmere/src/lib/form-field/hc-form-field.component.ts b/projects/cashmere/src/lib/form-field/hc-form-field.component.ts
index d0246e1fa..90548e74e 100644
--- a/projects/cashmere/src/lib/form-field/hc-form-field.component.ts
+++ b/projects/cashmere/src/lib/form-field/hc-form-field.component.ts
@@ -7,7 +7,8 @@ import {
     QueryList,
     ViewEncapsulation,
     Input,
-    ElementRef
+    ElementRef,
+    OnDestroy
 } from '@angular/core';
 import {HcFormControlComponent} from './hc-form-control.component';
 import {HcErrorComponent} from './hc-error.component';
@@ -16,6 +17,8 @@ import {HcSuffixDirective} from './hc-suffix.directive';
 import {HcLabelComponent} from './hc-label.component';
 import {parseBooleanAttribute} from '../util';
 import {InputDirective} from '../input/input.directive';
+import {takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs';
 
 export function getControlMissing(): Error {
     return new Error(`HcFormField must contain a component that extends HcFormControl`);
@@ -28,11 +31,15 @@ export function getControlMissing(): Error {
     styleUrls: ['./hc-form-field.component.scss', '../input/input.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class HcFormFieldComponent implements AfterContentInit {
+export class HcFormFieldComponent implements AfterContentInit, OnDestroy {
     private _inline: boolean = false;
+    private _tight: boolean = false;
+    private unsubscribe$ = new Subject<void>();
 
     @ContentChild(HcFormControlComponent)
     _control: HcFormControlComponent;
+    @ContentChildren(HcFormControlComponent)
+    _controls: QueryList<HcFormControlComponent>;
     @ContentChildren(HcErrorComponent)
     _errorChildren: QueryList<HcErrorComponent>;
     @ContentChildren(HcPrefixDirective)
@@ -72,11 +79,38 @@ export class HcFormFieldComponent implements AfterContentInit {
         this._inline = parseBooleanAttribute(isInline);
     }
 
+    /** If true, condense the default padding on all included elements and reduce the font size. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+        this._updateTightControls();
+    }
+
     constructor(private _elementRef: ElementRef<HTMLInputElement>) {}
 
     ngAfterContentInit(): void {
         if (!this._control) {
             throw getControlMissing();
+        } else {
+            this._updateTightControls();
+            // Pass the current tight setting to controls that are added dynamically to the FormField
+            this._controls.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this._updateTightControls());
+        }
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+
+    _updateTightControls() {
+        if (this._controls) {
+            this._controls.forEach(control => {
+                control.tight = this._tight;
+            });
         }
     }
 
diff --git a/projects/cashmere/src/lib/form-field/hc-form-field.module.ts b/projects/cashmere/src/lib/form-field/hc-form-field.module.ts
index 12a016cb4..9cc0299dc 100644
--- a/projects/cashmere/src/lib/form-field/hc-form-field.module.ts
+++ b/projects/cashmere/src/lib/form-field/hc-form-field.module.ts
@@ -5,10 +5,11 @@ import {HcErrorComponent} from './hc-error.component';
 import {HcSuffixDirective} from './hc-suffix.directive';
 import {HcPrefixDirective} from './hc-prefix.directive';
 import {HcLabelComponent} from './hc-label.component';
+import {HcFormDirective} from './hc-form.directive';
 
 @NgModule({
     imports: [CommonModule],
-    declarations: [HcFormFieldComponent, HcErrorComponent, HcPrefixDirective, HcSuffixDirective, HcLabelComponent],
-    exports: [HcFormFieldComponent, HcErrorComponent, HcPrefixDirective, HcSuffixDirective, HcLabelComponent]
+    declarations: [HcFormFieldComponent, HcErrorComponent, HcPrefixDirective, HcSuffixDirective, HcLabelComponent, HcFormDirective],
+    exports: [HcFormFieldComponent, HcErrorComponent, HcPrefixDirective, HcSuffixDirective, HcLabelComponent, HcFormDirective]
 })
 export class FormFieldModule {}
diff --git a/projects/cashmere/src/lib/form-field/hc-form.directive.ts b/projects/cashmere/src/lib/form-field/hc-form.directive.ts
new file mode 100644
index 000000000..928de9efb
--- /dev/null
+++ b/projects/cashmere/src/lib/form-field/hc-form.directive.ts
@@ -0,0 +1,46 @@
+import {Directive, Input, ContentChildren, QueryList, AfterContentInit, OnDestroy} from '@angular/core';
+import {parseBooleanAttribute} from '../util';
+import {HcFormFieldComponent} from './hc-form-field.component';
+import {takeUntil} from 'rxjs/operators';
+import {Subject} from 'rxjs';
+
+/** `hcForm` directive that allows settings to be applied to all included HcFormFields */
+@Directive({
+    selector: '[hcForm]'
+})
+export class HcFormDirective implements AfterContentInit, OnDestroy {
+    private _tight: boolean = false;
+    private unsubscribe$ = new Subject<void>();
+
+    @ContentChildren(HcFormFieldComponent)
+    _formFields: QueryList<HcFormFieldComponent>;
+
+    /** Set the tight parameter on all enclosed HcFormFields. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+        this._updateTightFields();
+    }
+
+    ngAfterContentInit(): void {
+        this._updateTightFields();
+        // Pass the tight setting to any FormFields added dynamically
+        this._formFields.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => this._updateTightFields());
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+
+    _updateTightFields() {
+        if (this._formFields) {
+            this._formFields.forEach(field => {
+                field.tight = this._tight;
+            });
+        }
+    }
+}
diff --git a/projects/cashmere/src/lib/form-field/index.ts b/projects/cashmere/src/lib/form-field/index.ts
index 85ca8e5fa..46cfba0ee 100644
--- a/projects/cashmere/src/lib/form-field/index.ts
+++ b/projects/cashmere/src/lib/form-field/index.ts
@@ -6,4 +6,5 @@ export {HcErrorComponent} from './hc-error.component';
 export {HcPrefixDirective} from './hc-prefix.directive';
 export {HcSuffixDirective} from './hc-suffix.directive';
 export {HcLabelComponent} from './hc-label.component';
+export {HcFormDirective} from './hc-form.directive';
 export {FormFieldModule} from './hc-form-field.module';
diff --git a/projects/cashmere/src/lib/radio-button/radio-button.component.html b/projects/cashmere/src/lib/radio-button/radio-button.component.html
index b897150c3..8f274f10c 100644
--- a/projects/cashmere/src/lib/radio-button/radio-button.component.html
+++ b/projects/cashmere/src/lib/radio-button/radio-button.component.html
@@ -1,4 +1,7 @@
-<label class="hc-radio-container" [class.disabled]="disabled">
+<label class="hc-radio-container"
+    [class.disabled]="disabled"
+    [class.hc-radio-inline]="_inlineGroup"
+    [class.hc-radio-tight]="tight" >
     <input class="hc-radio-input"
            [class.disabled]="disabled"
            type="radio"
diff --git a/projects/cashmere/src/lib/radio-button/radio-button.component.scss b/projects/cashmere/src/lib/radio-button/radio-button.component.scss
index 7c9ff00ff..86cc81bba 100644
--- a/projects/cashmere/src/lib/radio-button/radio-button.component.scss
+++ b/projects/cashmere/src/lib/radio-button/radio-button.component.scss
@@ -6,6 +6,24 @@
     &.disabled {
         @include hc-radio-container-disabled();
     }
+
+    &.hc-radio-inline {
+        @include hc-radio-container-inline();
+    }
+
+    &.hc-radio-tight {
+        @include hc-radio-container-tight();
+    }
+}
+
+.hc-radio-tight {
+    .hc-radio-overlay {
+        @include hc-radio-overlay-tight();
+    }
+
+    .hc-radio-content {
+        @include hc-radio-content-tight();
+    }
 }
 
 .hc-radio-overlay {
diff --git a/projects/cashmere/src/lib/radio-button/radio.ts b/projects/cashmere/src/lib/radio-button/radio.ts
index 65faf3dc9..4b591f6ca 100644
--- a/projects/cashmere/src/lib/radio-button/radio.ts
+++ b/projects/cashmere/src/lib/radio-button/radio.ts
@@ -51,6 +51,7 @@ export class RadioGroupDirective extends HcFormControlComponent implements Contr
     private _uniqueName = `hc-radio-group-${nextUniqueId++}`;
     private _name = this._uniqueName;
     private _inline = false;
+    private _tight: boolean = false;
     private _initialized = false; // if value of radio group has been set to initial value
     private _selected: RadioButtonComponent | null = null; // the currently selected radio
     private _form: NgForm | FormGroupDirective | null;
@@ -143,6 +144,18 @@ export class RadioGroupDirective extends HcFormControlComponent implements Contr
         this._horizontalClass = this._inline;
     }
 
+    /** If true, condense the default margin and reduce the font size on all contained radios. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+        if (this._initialized) {
+            setTimeout(() => this._markRadiosForCheck());
+        }
+    }
+
     constructor(
         private _cdRef: ChangeDetectorRef,
         @Optional() _parentForm: NgForm,
@@ -275,6 +288,7 @@ export class RadioButtonComponent implements OnInit {
     private _value: any = null;
     private _required: boolean = false;
     private _disabled: boolean = false;
+    private _tight: boolean = false;
     private readonly radioGroup: RadioGroupDirective | null;
 
     /** Value of radio buttons */
@@ -338,6 +352,28 @@ export class RadioButtonComponent implements OnInit {
         }
     }
 
+    get _inlineGroup(): boolean {
+        if (this.radioGroup !== null) {
+            return this.radioGroup.inline;
+        } else {
+            return false;
+        }
+    }
+
+    /** If true, condense the default margin, reduce the font size, and decrease the circle size.
+     * Inherits value from parent radio group if part of one. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        if (this.radioGroup !== null) {
+            return this.radioGroup.tight;
+        } else {
+            return this._tight;
+        }
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+    }
+
     get _inputId() {
         return `${this.id || this._uniqueId}-input`;
     }
diff --git a/projects/cashmere/src/lib/sass/_radio-group.scss b/projects/cashmere/src/lib/sass/_radio-group.scss
index ec0a9a6a8..eab172989 100644
--- a/projects/cashmere/src/lib/sass/_radio-group.scss
+++ b/projects/cashmere/src/lib/sass/_radio-group.scss
@@ -7,11 +7,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-
-    .hc-radio-container {
-        padding-left: 32px !important;
-        margin-right: 25px !important;
-    }
 }
 
 .hc-form-field-invalid {
diff --git a/projects/cashmere/src/lib/sass/app-switcher.scss b/projects/cashmere/src/lib/sass/app-switcher.scss
index 6f910c63a..9003dc975 100644
--- a/projects/cashmere/src/lib/sass/app-switcher.scss
+++ b/projects/cashmere/src/lib/sass/app-switcher.scss
@@ -7,7 +7,7 @@
 }
 
 @mixin hc-app-switcher() {
-    max-width: 410px;
+    max-width: 360px;
 }
 
 @mixin hc-app-switcher-header() {
diff --git a/projects/cashmere/src/lib/sass/checkbox.scss b/projects/cashmere/src/lib/sass/checkbox.scss
index f8c57498e..638c17da4 100644
--- a/projects/cashmere/src/lib/sass/checkbox.scss
+++ b/projects/cashmere/src/lib/sass/checkbox.scss
@@ -1,4 +1,5 @@
 @import './colors';
+@import './functions';
 
 @mixin hc-checkbox-container() {
     overflow: hidden;
@@ -7,14 +8,37 @@
 
 @mixin hc-checkbox-content() {
     display: inline-flex;
-    align-items: center;
     cursor: pointer;
 }
 
+@mixin hc-checkbox-align-center() {
+    align-items: center;
+}
+
+@mixin hc-checkbox-align-top() {
+    align-items: flex-start;
+}
+
+@mixin hc-checkbox-align-bottom() {
+    align-items: flex-end;
+}
+
 @mixin hc-checkbox-content-label() {
     cursor: pointer;
 }
 
+@mixin hc-checkbox-align-label-top() {
+    /* important included to override the padding of the tight class if applied */
+    padding-top: 0 !important;
+    margin-top: -3px;
+}
+
+@mixin hc-checkbox-align-label-bottom() {
+    /* important included to override the padding of the tight class if applied */
+    padding-bottom: 0 !important;
+    margin-bottom: -3px;
+}
+
 @mixin hc-checkbox-content-disabled() {
     color: $gray-300;
     cursor: not-allowed;
@@ -29,10 +53,16 @@
     line-height: 1.5;
 }
 
+@mixin hc-checkbox-label-tight() {
+    padding: 2px 0 2px 8px;
+    font-size: calculateRem(13px);
+}
+
 @mixin hc-checkbox-overlay() {
     position: relative;
     width: 22px;
     height: 22px;
+    min-width: 22px;
     background-color: $white;
     border: 2px solid $gray-300;
     border-radius: 3px;
@@ -49,6 +79,19 @@
     }
 }
 
+@mixin hc-checkbox-overlay-tight() {
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
+
+    &:after {
+        top: 0.5px;
+        left: 0.5px;
+        width: 12.5px;
+        height: 12.5px;
+    }
+}
+
 @mixin hc-checkbox-overlay-disabled() {
     background-color: $gray-200;
     border: 2px solid $gray-300;
@@ -78,6 +121,13 @@
     }
 }
 
+@mixin hc-checkbox-overlay-indeterminate-tight() {
+    &:after {
+        top: 1.5px;
+        width: 8px;
+    }
+}
+
 @mixin hc-checkbox-input() {
     display: none;
 }
diff --git a/projects/cashmere/src/lib/sass/form-field.scss b/projects/cashmere/src/lib/sass/form-field.scss
index 7a0e8a708..f35f2985a 100644
--- a/projects/cashmere/src/lib/sass/form-field.scss
+++ b/projects/cashmere/src/lib/sass/form-field.scss
@@ -5,9 +5,11 @@ $line-height: 1.5;
 $label-font-scale: 1;
 $error-font-scale: 0.75;
 $infix-margin-top: 1.143em * $line-height * $label-font-scale;
+$infix-margin-top-tight: 1.143em * $line-height * 0.93;
 $prefix-suffix-icon-font-size: 125%;
 
 $infix-padding: 0.393em;
+$infix-padding-tight: $infix-padding / 2;
 $error-margin-top: 0.4em / $error-font-scale;
 $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
 
@@ -28,6 +30,14 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     flex-direction: inherit;
 }
 
+@mixin hc-form-field-wrapper-tight() {
+    padding-bottom: 10px;
+}
+
+@mixin hc-form-field-wrapper-tight-border() {
+    border-top: $infix-margin-top-tight solid transparent;
+}
+
 @mixin hc-form-field-wrapper-inline() {
     display: inline-flex;
     width: 100%;
@@ -89,6 +99,10 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     align-items: center;
 }
 
+@mixin hc-form-field-non-input-inline-tight() {
+    min-height: auto;
+}
+
 @mixin hc-form-field-prefix-suffix() {
     white-space: nowrap;
     flex: none;
@@ -105,6 +119,10 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     line-height: $line-height;
 }
 
+@mixin hc-form-field-prefix-suffix-tight() {
+    line-height: 1.3;
+}
+
 @mixin hc-form-field-prefix {
     padding-left: 7px;
 }
@@ -120,6 +138,11 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     padding: $infix-padding 10px;
 }
 
+@mixin hc-form-field-infix-tight() {
+    padding: $infix-padding-tight 7px;
+    font-size: calculateRem(13px);
+}
+
 @mixin hc-form-field-label-wrapper() {
     position: absolute;
     left: 0;
@@ -132,10 +155,20 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     padding-top: $infix-margin-top;
 }
 
+@mixin hc-form-field-label-wrapper-tight() {
+    top: -$infix-margin-top-tight;
+    padding-top: $infix-margin-top-tight;
+}
+
 @mixin hc-form-field-label-wrapper-inline() {
     padding: 7px 15px 0 0;
 }
 
+@mixin hc-form-field-label-wrapper-tight-inline() {
+    padding-top: 0;
+    line-height: 1.9;
+}
+
 @mixin hc-form-field-label-wrapper-icon() {
     width: 1em;
     height: 1em;
@@ -179,6 +212,10 @@ $wrapper-padding-bottom: ($error-margin-top + $line-height) * $error-font-scale;
     overflow: hidden;
 }
 
+@mixin hc-form-field-label-tight() {
+    font-size: calculateRem(13px);
+}
+
 @mixin hc-form-field-error-wrapper() {
     box-sizing: border-box;
     width: 100%;
diff --git a/projects/cashmere/src/lib/sass/navbar.scss b/projects/cashmere/src/lib/sass/navbar.scss
index 0c00e4415..e0c8c1bfc 100644
--- a/projects/cashmere/src/lib/sass/navbar.scss
+++ b/projects/cashmere/src/lib/sass/navbar.scss
@@ -39,7 +39,7 @@ $navbar-fixed-shadow: 0px 2px 6px $shadow;
     .brand {
         & > img {
             height: 37px;
-            width: 100%;
+            width: auto;
         }
         & > hc-icon {
             width: 100%;
@@ -133,6 +133,7 @@ $navbar-fixed-shadow: 0px 2px 6px $shadow;
 
 @mixin hc-navbar-right-container {
     display: flex;
+    flex: 0 0 auto;
     align-items: center;
     position: relative;
     margin-left: auto;
diff --git a/projects/cashmere/src/lib/sass/radio-button.scss b/projects/cashmere/src/lib/sass/radio-button.scss
index 2a6c89e8c..3c9386894 100644
--- a/projects/cashmere/src/lib/sass/radio-button.scss
+++ b/projects/cashmere/src/lib/sass/radio-button.scss
@@ -1,4 +1,5 @@
 @import './colors';
+@import './functions';
 
 @mixin hc-radio-container() {
     cursor: pointer;
@@ -18,6 +19,16 @@
     cursor: not-allowed;
 }
 
+@mixin hc-radio-container-inline() {
+    padding-left: 32px;
+    margin-right: 25px;
+}
+
+@mixin hc-radio-container-tight() {
+    margin: 1px 15px 1px 0;
+    padding-left: 25px;
+}
+
 @mixin hc-radio-overlay() {
     background-color: $white;
     border: 2px solid $gray-300;
@@ -41,6 +52,17 @@
     }
 }
 
+@mixin hc-radio-overlay-tight() {
+    height: 18px;
+    width: 18px;
+    top: 1px;
+
+    &:after {
+        left: 3px;
+        top: 3px;
+    }
+}
+
 @mixin hc-radio-overlay-hover() {
     border-color: $primary-brand;
 }
@@ -78,3 +100,7 @@
 @mixin hc-radio-input-disabled() {
     cursor: not-allowed;
 }
+
+@mixin hc-radio-content-tight() {
+    font-size: calculateRem(13px);
+}
diff --git a/projects/cashmere/src/lib/sass/select.scss b/projects/cashmere/src/lib/sass/select.scss
index 41603c4e1..24735bdc5 100644
--- a/projects/cashmere/src/lib/sass/select.scss
+++ b/projects/cashmere/src/lib/sass/select.scss
@@ -50,6 +50,10 @@
     }
 }
 
+@mixin hc-select-chevron-tight() {
+    height: 28px;
+}
+
 @mixin hc-select-input() {
     @include fontSize(14px);
 
@@ -83,6 +87,11 @@
     }
 }
 
+@mixin hc-select-input-tight() {
+    @include fontSize(13px);
+    height: 28px;
+}
+
 @mixin hc-select-chevron-disabled() {
     opacity: 0.4;
 }
diff --git a/projects/cashmere/src/lib/sass/stepper.scss b/projects/cashmere/src/lib/sass/stepper.scss
new file mode 100644
index 000000000..d10e6886c
--- /dev/null
+++ b/projects/cashmere/src/lib/sass/stepper.scss
@@ -0,0 +1,185 @@
+$track-space: 4rem;
+$isolated-disk-size: 2rem;
+$track-height: 0.5rem;
+
+@mixin hc-disk-border($border-color) {
+    box-shadow: 0px 0px 0px 3px $border-color;
+}
+
+@mixin hc-step-arrow($top-bottom, $right) {
+    @if $right {
+        border-right: $track-space * 0.05 solid $right;
+    }
+    border-left: $track-space / 4 solid transparent;
+    border-top: $track-space / 2 solid $top-bottom;
+    border-bottom: $track-space / 2 solid $top-bottom;
+    display: block;
+    height: 0px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+}
+
+@mixin hc-stepper-bg-color($color) {
+    background-color: $color;
+}
+
+@mixin hc-stepper-content-color($color) {
+    color: $color;
+}
+
+@mixin hc-stepper-border-top($color) {
+    border-top-color: $color;
+}
+
+@mixin hc-stepper-arrow-after($top-bottom, $right) {
+    &:after {
+        @include hc-step-arrow($top-bottom, $right);
+        content: '';
+        z-index: 1;
+    }
+}
+
+@mixin hc-isolated-track($track-color, $track-height, $disk-size) {
+    background: $track-color;
+    content: '';
+    display: block;
+    height: $track-height;
+    left: 0px;
+    margin-top: -($track-height / 2);
+    position: absolute;
+    right: 0px;
+    top: $disk-size / 2;
+    z-index: 1;
+}
+
+@mixin hc-stepper-font-bold() {
+    font-weight: 600;
+}
+
+@mixin hc-stepper-isolated-active($color, $bg) {
+    &:before {
+        background: $color;
+        right: 50%;
+    }
+
+    &:after {
+        @include hc-isolated-track($bg, $track-height, $isolated-disk-size);
+        left: 50%;
+    }
+}
+
+@mixin hc-stepper-isolated-complete($color) {
+    &:before {
+        background: $color;
+    }
+}
+
+@mixin hc-stepper-isolated-first() {
+    &:before {
+        left: 50%;
+    }
+}
+
+@mixin hc-stepper-isolated-last() {
+    &:before {
+        right: 50%;
+    }
+    &:after {
+        display: none;
+    }
+}
+
+@mixin hc-stepper-clickable() {
+    cursor: pointer;
+    outline: none;
+}
+
+@mixin hc-stepper-disabled() {
+    pointer-events: none;
+}
+
+@mixin hc-stepper-track() {
+    display: flex;
+    flex-direction: row;
+}
+
+@mixin hc-step() {
+    flex: 1;
+    position: relative;
+}
+
+@mixin hc-stepper-arrow-step() {
+    line-height: $track-space;
+    padding-left: $track-space * 0.9;
+    white-space: nowrap;
+}
+
+@mixin hc-stepper-arrow-step-disk {
+    border-radius: 50%;
+    display: block;
+    font-size: 0.9rem;
+    height: $track-space * 0.4;
+    left: $track-space * 0.3;
+    line-height: $track-space * 0.4;
+    position: absolute;
+    text-align: center;
+    top: $track-space * 0.3;
+    width: $track-space * 0.4;
+}
+
+@mixin hc-stepper-arrow-label-count {
+    display: none;
+}
+
+@mixin hc-stepper-arrow-icon {
+    font-size: $track-space * 0.25;
+    height: 100%;
+    line-height: $track-space * 0.4;
+    width: 100%;
+}
+
+@mixin hc-stepper-isolated-step($color) {
+    padding-top: $isolated-disk-size;
+    text-align: center;
+
+    &:before {
+        @include hc-isolated-track($color, $track-height, $isolated-disk-size);
+    }
+}
+
+@mixin hc-stepper-isolated-step-disk() {
+    border-radius: 50%;
+    display: block;
+    font-size: 1rem;
+    height: $isolated-disk-size;
+    left: 50%;
+    line-height: $isolated-disk-size;
+    margin-left: -($isolated-disk-size / 2);
+    position: absolute;
+    text-align: center;
+    top: 0px;
+    width: $isolated-disk-size;
+    z-index: 2;
+}
+
+@mixin hc-stepper-isolated-label($color) {
+    color: $color;
+    display: inline-block;
+    line-height: $isolated-disk-size;
+    padding: 0 0.15rem;
+}
+
+@mixin hc-stepper-isolated-label-after() {
+    &:after {
+        content: '.';
+    }
+}
+
+@mixin hc-stepper-isolated-icon() {
+    font-size: $track-space * 0.35;
+    height: 100%;
+    line-height: $track-space * 0.48;
+    width: 100%;
+}
diff --git a/projects/cashmere/src/lib/sass/tab.scss b/projects/cashmere/src/lib/sass/tab.scss
index acd27f5a6..2ff0449f1 100644
--- a/projects/cashmere/src/lib/sass/tab.scss
+++ b/projects/cashmere/src/lib/sass/tab.scss
@@ -26,6 +26,10 @@
     padding-left: 12px;
 }
 
+@mixin hc-tab-vertical-tight() {
+    padding: 10px 20px;
+}
+
 @mixin hc-tab-horizontal() {
     background-color: inherit;
     color: $offblack;
@@ -47,6 +51,10 @@
     font-weight: bold;
 }
 
+@mixin hc-tab-horizontal-tight() {
+    padding: 10px;
+}
+
 // tab-set
 
 @mixin hc-tab-set-container-horizontal() {
diff --git a/projects/cashmere/src/lib/sass/table.class.scss b/projects/cashmere/src/lib/sass/table.class.scss
index 95c3ed9ad..ba8d55944 100644
--- a/projects/cashmere/src/lib/sass/table.class.scss
+++ b/projects/cashmere/src/lib/sass/table.class.scss
@@ -159,14 +159,14 @@
     @include hc-table-header-sortable-left();
 }
 
-.hc-active-sort {
+.hc-table th.hc-active-sort {
     @include hc-table-header-active-sort();
 
     &.hc-sort-asc {
         @include hc-table-header-active-sort-asc();
     }
 
-    &.hc-sort-desc:after {
+    &.hc-sort-desc {
         @include hc-table-header-active-sort-desc();
     }
 }
diff --git a/projects/cashmere/src/lib/sass/tile.scss b/projects/cashmere/src/lib/sass/tile.scss
index f29457a0a..f0af12307 100644
--- a/projects/cashmere/src/lib/sass/tile.scss
+++ b/projects/cashmere/src/lib/sass/tile.scss
@@ -11,6 +11,15 @@
     margin-bottom: 30px;
 }
 
+@mixin hc-tile-tight {
+    padding: 10px 15px;
+    margin-bottom: 15px;
+}
+
 .hc-tile {
-    @include hc-tile;
+    @include hc-tile();
+}
+
+.hc-tile-tight {
+    @include hc-tile-tight();
 }
diff --git a/projects/cashmere/src/lib/select/select.component.html b/projects/cashmere/src/lib/select/select.component.html
index 970a244e8..ab5ae26ed 100644
--- a/projects/cashmere/src/lib/select/select.component.html
+++ b/projects/cashmere/src/lib/select/select.component.html
@@ -1,4 +1,4 @@
-<div class="hc-select-container">
+<div class="hc-select-container" [class.hc-select-tight]="tight">
     <span class="hc-select-chevron"></span>
     <select
         #selectInput
diff --git a/projects/cashmere/src/lib/select/select.component.scss b/projects/cashmere/src/lib/select/select.component.scss
index c77e898e4..905f85383 100644
--- a/projects/cashmere/src/lib/select/select.component.scss
+++ b/projects/cashmere/src/lib/select/select.component.scss
@@ -14,6 +14,10 @@
     .hc-select-disabled & {
         @include hc-select-chevron-disabled();
     }
+
+    .hc-select-tight & {
+        @include hc-select-chevron-tight();
+    }
 }
 
 .hc-select-input {
@@ -22,6 +26,10 @@
     .hc-form-field-invalid & {
         @include hc-select-input-invalid();
     }
+
+    .hc-select-tight & {
+        @include hc-select-input-tight();
+    }
 }
 
 /* IE won't render borders for our inputs correctly, so default to a thicker width */
diff --git a/projects/cashmere/src/lib/select/select.component.ts b/projects/cashmere/src/lib/select/select.component.ts
index 2923c223a..151a8e733 100644
--- a/projects/cashmere/src/lib/select/select.component.ts
+++ b/projects/cashmere/src/lib/select/select.component.ts
@@ -32,6 +32,7 @@ export class SelectChangeEvent {
 export class SelectComponent extends HcFormControlComponent implements ControlValueAccessor, DoCheck {
     private _uniqueInputId = `hc-select-${uniqueId++}`;
     private _form: NgForm | FormGroupDirective | null;
+    private _tight: boolean = false;
 
     _componentId = this._uniqueInputId;
 
@@ -85,6 +86,15 @@ export class SelectComponent extends HcFormControlComponent implements ControlVa
         }
     }
 
+    /** If true, condense the default margin and reduce the font size. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+    }
+
     @Output()
     readonly focus: EventEmitter<void> = new EventEmitter<void>();
     @Output()
diff --git a/projects/cashmere/src/lib/stepper/index.ts b/projects/cashmere/src/lib/stepper/index.ts
new file mode 100644
index 000000000..8ab33b81a
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/index.ts
@@ -0,0 +1,2 @@
+export {StepperComponent, StepInterface} from './stepper.component';
+export {StepperModule} from './stepper.module';
diff --git a/projects/cashmere/src/lib/stepper/stepper.component.html b/projects/cashmere/src/lib/stepper/stepper.component.html
new file mode 100644
index 000000000..b73437551
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/stepper.component.html
@@ -0,0 +1,41 @@
+<div [ngClass]="'hc-stepper-' + type">
+    <div class="hc-stepper-track">
+        <ng-content select=".before-steps-content"></ng-content>
+        <div
+            class="hc-step"
+            *ngFor="let step of steps; index as i; last as isLast; first as isFirst"
+            [routerLink]="step.routerLink"
+            [routerLinkActiveOptions]="{exact: true}"
+            routerLinkActive="active"
+            [ngClass]="{
+                'hc-step-arrow-active': type === 'arrow' && i === activeIndex,
+                'hc-step-arrow-incomplete': type === 'arrow' && i > activeIndex,
+                'hc-step-arrow-complete': type === 'arrow' && i < activeIndex - 1,
+                'hc-step-arrow-completed': type === 'arrow' && i === activeIndex - 1,
+                'hc-step-isolated-active': type === 'isolated' && i === activeIndex,
+                'hc-step-isolated-incomplete': type === 'isolated' && i > activeIndex,
+                'hc-step-isolated-complete': type === 'isolated' && i < activeIndex - 1,
+                'hc-step-isolated-completed': type === 'isolated' && i === activeIndex - 1,
+                'hc-step-last': isLast,
+                'hc-step-first': isFirst,
+                'hc-stepper-clickable': step.disabled !== undefined ? !step.disabled : true,
+                'hc-stepper-disabled': step.disabled !== undefined ? step.disabled : false
+            }"
+            (click)="_stepClick(i)"
+        >
+            <span class="hc-step-disk">
+                <ng-container *ngIf="step.iconSet && step.icon; else elseBlock">
+                    <hc-icon [fontSet]="step.iconSet" [fontIcon]="step.icon" class="hc-step-icon"></hc-icon>
+                </ng-container>
+                <ng-template #elseBlock>{{ i + 1 }}</ng-template>
+            </span>
+            <span class="hc-step-label-count" *ngIf="showStepCount">{{ i + 1 }}</span>
+            <span class="hc-step-label">{{ step.label }}</span>
+            <span class="hc-step-arrow"></span>
+        </div>
+        <ng-content select=".after-steps-content"></ng-content>
+    </div>
+    <div *ngIf="useRouterOutlet" class="hc-step-content">
+        <router-outlet *ngIf="_routerEnabled"></router-outlet>
+    </div>
+</div>
diff --git a/projects/cashmere/src/lib/stepper/stepper.component.scss b/projects/cashmere/src/lib/stepper/stepper.component.scss
new file mode 100644
index 000000000..cdfb989ed
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/stepper.component.scss
@@ -0,0 +1,342 @@
+@import '../sass/colors';
+@import '../sass/functions';
+@import '../sass/stepper.scss';
+
+$green-complete: lighten(tint($green, 13%), 3%);
+$blue-complete: lighten(tint($blue, 20%), 3%);
+$purple-complete: lighten(tint($purple, 13%), 3%);
+$orange-complete: lighten(tint($orange, 13%), 3%);
+$red-complete: lighten(tint($red, 20%), 3%);
+
+$track-bg: $slate-gray-100;
+$track-bg-iso: $slate-gray-200;
+$border: $slate-gray-200;
+$disk-bg: $white;
+
+.hc-step {
+    @include hc-step();
+
+    .hc-stepper-arrow & {
+        @include hc-stepper-arrow-step();
+        @include hc-stepper-border-top($track-bg);
+    }
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-step($track-bg-iso);
+    }
+}
+
+.hc-step-disk {
+    .hc-stepper-arrow & {
+        @include hc-stepper-arrow-step-disk();
+        @include hc-disk-border($border);
+        @include hc-stepper-bg-color($disk-bg);
+    }
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-step-disk();
+        @include hc-disk-border($track-bg);
+        @include hc-stepper-bg-color($disk-bg);
+    }
+    .hc-stepper-green .hc-step-arrow-active &,
+    .hc-stepper-green .hc-step-isolated-active &,
+    .hc-stepper-green .hc-step-isolated-complete &,
+    .hc-stepper-green .hc-step-isolated-completed & {
+        @include hc-disk-border($green);
+    }
+    .hc-stepper-blue .hc-step-arrow-active &,
+    .hc-stepper-blue .hc-step-isolated-active &,
+    .hc-stepper-blue .hc-step-isolated-complete &,
+    .hc-stepper-blue .hc-step-isolated-completed & {
+        @include hc-disk-border($blue);
+    }
+    .hc-stepper-purple .hc-step-arrow-active &,
+    .hc-stepper-purple .hc-step-isolated-active &,
+    .hc-stepper-purple .hc-step-isolated-complete &,
+    .hc-stepper-purple .hc-step-isolated-completed & {
+        @include hc-disk-border($purple);
+    }
+    .hc-stepper-orange .hc-step-arrow-active &,
+    .hc-stepper-orange .hc-step-isolated-active &,
+    .hc-stepper-orange .hc-step-isolated-complete &,
+    .hc-stepper-orange .hc-step-isolated-completed & {
+        @include hc-disk-border($orange);
+    }
+    .hc-stepper-red .hc-step-arrow-active &,
+    .hc-stepper-red .hc-step-isolated-active &,
+    .hc-stepper-red .hc-step-isolated-complete &,
+    .hc-stepper-red .hc-step-isolated-completed & {
+        @include hc-disk-border($red);
+    }
+    .hc-stepper-green .hc-step-arrow-complete &,
+    .hc-stepper-green .hc-step-arrow-completed & {
+        @include hc-disk-border($green-complete);
+    }
+    .hc-stepper-blue .hc-step-arrow-complete &,
+    .hc-stepper-blue .hc-step-arrow-completed & {
+        @include hc-disk-border($blue-complete);
+    }
+    .hc-stepper-purple .hc-step-arrow-complete &,
+    .hc-stepper-purple .hc-step-arrow-completed & {
+        @include hc-disk-border($purple-complete);
+    }
+    .hc-stepper-orange .hc-step-arrow-complete &,
+    .hc-stepper-orange .hc-step-arrow-completed & {
+        @include hc-disk-border($orange-complete);
+    }
+    .hc-stepper-red .hc-step-arrow-complete &,
+    .hc-stepper-red .hc-step-arrow-completed & {
+        @include hc-disk-border($red-complete);
+    }
+}
+
+.hc-step-arrow {
+    .hc-step-arrow-incomplete:not(.hc-step-last) &,
+    .hc-step-arrow-active:not(.hc-step-last) & {
+        @include hc-step-arrow($track-bg, null);
+    }
+    .hc-stepper-green .hc-step-arrow-completed & {
+        @include hc-step-arrow($green, null);
+    }
+    .hc-stepper-blue .hc-step-arrow-completed & {
+        @include hc-step-arrow($blue, null);
+    }
+    .hc-stepper-purple .hc-step-arrow-completed & {
+        @include hc-step-arrow($purple, null);
+    }
+    .hc-stepper-orange .hc-step-arrow-completed & {
+        @include hc-step-arrow($orange, null);
+    }
+    .hc-stepper-red .hc-step-arrow-completed & {
+        @include hc-step-arrow($red, null);
+    }
+    .hc-stepper-green .hc-step-arrow-complete:not(.hc-step-last) & {
+        @include hc-step-arrow($green-complete, null);
+    }
+    .hc-stepper-blue .hc-step-arrow-complete:not(.hc-step-last) & {
+        @include hc-step-arrow($blue-complete, null);
+    }
+    .hc-stepper-purple .hc-step-arrow-complete:not(.hc-step-last) & {
+        @include hc-step-arrow($purple-complete, null);
+    }
+    .hc-stepper-orange .hc-step-arrow-complete:not(.hc-step-last) & {
+        @include hc-step-arrow($orange-complete, null);
+    }
+    .hc-stepper-red .hc-step-arrow-complete:not(.hc-step-last) & {
+        @include hc-step-arrow($red-complete, null);
+    }
+}
+
+.hc-step-label-count {
+    .hc-stepper-arrow & {
+        @include hc-stepper-arrow-label-count();
+    }
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-label($text);
+        @include hc-stepper-isolated-label-after();
+    }
+    .hc-step-isolated-active & {
+        @include hc-stepper-font-bold();
+    }
+}
+
+.hc-step-label {
+    .hc-stepper-arrow & {
+        @include hc-stepper-content-color($white);
+    }
+    .hc-step-arrow-incomplete & {
+        @include hc-stepper-content-color(unset);
+    }
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-label($text);
+    }
+    .hc-step-isolated-active & {
+        @include hc-stepper-font-bold();
+    }
+}
+
+.hc-step-icon {
+    .hc-stepper-arrow & {
+        @include hc-stepper-arrow-icon();
+    }
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-icon();
+    }
+    .hc-step-arrow-incomplete &,
+    .hc-step-isolated-incomplete & {
+        @include hc-stepper-content-color($track-bg-iso);
+    }
+    .hc-stepper-green .hc-step-arrow-active &,
+    .hc-stepper-green .hc-step-isolated-active &,
+    .hc-stepper-green .hc-step-isolated-complete &,
+    .hc-stepper-green .hc-step-isolated-completed & {
+        @include hc-stepper-content-color($green);
+    }
+    .hc-stepper-blue .hc-step-arrow-active &,
+    .hc-stepper-blue .hc-step-isolated-active &,
+    .hc-stepper-blue .hc-step-isolated-complete &,
+    .hc-stepper-blue .hc-step-isolated-completed & {
+        @include hc-stepper-content-color($blue);
+    }
+    .hc-stepper-purple .hc-step-arrow-active &,
+    .hc-stepper-purple .hc-step-isolated-active &,
+    .hc-stepper-purple .hc-step-isolated-complete &,
+    .hc-stepper-purple .hc-step-isolated-completed & {
+        @include hc-stepper-content-color($purple);
+    }
+    .hc-stepper-orange .hc-step-arrow-active &,
+    .hc-stepper-orange .hc-step-isolated-active &,
+    .hc-stepper-orange .hc-step-isolated-complete &,
+    .hc-stepper-orange .hc-step-isolated-completed & {
+        @include hc-stepper-content-color($orange);
+    }
+    .hc-stepper-red .hc-step-arrow-active &,
+    .hc-stepper-red .hc-step-isolated-active &,
+    .hc-stepper-red .hc-step-isolated-complete &,
+    .hc-stepper-red .hc-step-isolated-completed & {
+        @include hc-stepper-content-color($red);
+    }
+    .hc-stepper-green .hc-step-arrow-complete &,
+    .hc-stepper-green .hc-step-arrow-completed & {
+        @include hc-stepper-content-color($green-complete);
+    }
+    .hc-stepper-blue .hc-step-arrow-complete &,
+    .hc-stepper-blue .hc-step-arrow-completed & {
+        @include hc-stepper-content-color($blue-complete);
+    }
+    .hc-stepper-purple .hc-step-arrow-complete &,
+    .hc-stepper-purple .hc-step-arrow-completed & {
+        @include hc-stepper-content-color($purple-complete);
+    }
+    .hc-stepper-orange .hc-step-arrow-complete &,
+    .hc-stepper-orange .hc-step-arrow-completed & {
+        @include hc-stepper-content-color($orange-complete);
+    }
+    .hc-stepper-red .hc-step-arrow-complete &,
+    .hc-stepper-red .hc-step-arrow-completed & {
+        @include hc-stepper-content-color($red-complete);
+    }
+}
+
+.hc-stepper-clickable {
+    @include hc-stepper-clickable();
+}
+
+.hc-stepper-disabled {
+    @include hc-stepper-disabled();
+}
+
+.hc-stepper-track {
+    @include hc-stepper-track();
+
+    .hc-stepper-arrow & {
+        @include hc-stepper-bg-color($track-bg);
+    }
+}
+
+.hc-step-first {
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-first();
+    }
+}
+
+.hc-step-last {
+    .hc-stepper-isolated & {
+        @include hc-stepper-isolated-last();
+    }
+}
+
+.hc-step-arrow-active {
+    .hc-stepper-green & {
+        @include hc-stepper-bg-color($green);
+    }
+    .hc-stepper-blue & {
+        @include hc-stepper-bg-color($blue);
+    }
+    .hc-stepper-purple & {
+        @include hc-stepper-bg-color($purple);
+    }
+    .hc-stepper-orange & {
+        @include hc-stepper-bg-color($orange);
+    }
+    .hc-stepper-red & {
+        @include hc-stepper-bg-color($red);
+    }
+}
+
+.hc-step-isolated-active {
+    .hc-stepper-green & {
+        @include hc-stepper-isolated-active($green, $track-bg-iso);
+    }
+    .hc-stepper-blue & {
+        @include hc-stepper-isolated-active($blue, $track-bg-iso);
+    }
+    .hc-stepper-purple & {
+        @include hc-stepper-isolated-active($purple, $track-bg-iso);
+    }
+    .hc-stepper-orange & {
+        @include hc-stepper-isolated-active($orange, $track-bg-iso);
+    }
+    .hc-stepper-red & {
+        @include hc-stepper-isolated-active($red, $track-bg-iso);
+    }
+}
+
+.hc-step-arrow-complete,
+.hc-step-arrow-completed {
+    .hc-stepper-green & {
+        @include hc-stepper-bg-color($green-complete);
+    }
+    .hc-stepper-blue & {
+        @include hc-stepper-bg-color($blue-complete);
+    }
+    .hc-stepper-purple & {
+        @include hc-stepper-bg-color($purple-complete);
+    }
+    .hc-stepper-orange & {
+        @include hc-stepper-bg-color($orange-complete);
+    }
+    .hc-stepper-red & {
+        @include hc-stepper-bg-color($red-complete);
+    }
+}
+
+.hc-step-arrow-complete:not(.hc-step-last),
+.hc-step-arrow-incomplete:not(.hc-step-last) {
+    @include hc-stepper-arrow-after($border, $border);
+}
+
+.hc-step-isolated-complete,
+.hc-step-isolated-completed {
+    .hc-stepper-green & {
+        @include hc-stepper-isolated-complete($green);
+    }
+    .hc-stepper-blue & {
+        @include hc-stepper-isolated-complete($blue);
+    }
+    .hc-stepper-purple & {
+        @include hc-stepper-isolated-complete($purple);
+    }
+    .hc-stepper-orange & {
+        @include hc-stepper-isolated-complete($orange);
+    }
+    .hc-stepper-red & {
+        @include hc-stepper-isolated-complete($red);
+    }
+}
+
+.hc-step-arrow-complete:not(.hc-step-last):not(.hc-step-arrow-completed) {
+    .hc-stepper-green & {
+        @include hc-stepper-arrow-after($green, $green);
+    }
+    .hc-stepper-blue & {
+        @include hc-stepper-arrow-after($blue, $blue);
+    }
+    .hc-stepper-purple & {
+        @include hc-stepper-arrow-after($purple, $purple);
+    }
+    .hc-stepper-orange & {
+        @include hc-stepper-arrow-after($orange, $orange);
+    }
+    .hc-stepper-red & {
+        @include hc-stepper-arrow-after($red, $red);
+    }
+}
diff --git a/projects/cashmere/src/lib/stepper/stepper.component.spec.ts b/projects/cashmere/src/lib/stepper/stepper.component.spec.ts
new file mode 100644
index 000000000..c4e110887
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/stepper.component.spec.ts
@@ -0,0 +1,90 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {StepInterface} from './stepper.component';
+import {StepperModule} from './stepper.module';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+@Component({
+    template: `
+    <hc-stepper
+        [color]="colorVal"
+        [type]="typeVal"
+        [showStepCount]="countVal"
+        [steps]="stepsVal"
+        [useRouterOutlet]="routerVal"
+        [(activeIndex)]="currentStep">
+    </hc-stepper>
+    `
+})
+export class TestStepperComponent {
+    colorVal: string = 'red';
+    typeVal: string = 'isolated';
+    countVal: boolean = true;
+    routerVal: boolean = false;
+    currentStep: number = 1;
+
+    stepsVal: StepInterface[] = [
+        {label: 'One', iconSet: 'fa', icon: 'fa-check'},
+        {label: 'Two'},
+        {label: 'Three', iconSet: 'fa', icon: 'fa-lock', disabled: true}
+    ];
+}
+
+describe('StepperComponent', () => {
+    let component: TestStepperComponent;
+    let fixture: ComponentFixture<TestStepperComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestStepperComponent],
+            imports: [StepperModule, RouterTestingModule]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestStepperComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should set the stepper color based on the color parameter', () => {
+        let comp = fixture.debugElement.query(By.css('hc-stepper'));
+        expect(comp.nativeElement.classList.contains('hc-stepper-red')).toBe(true);
+    });
+
+    it('should throw an error if an index is set out of range', () => {
+        expect(function() {
+            component.currentStep = 10;
+            fixture.detectChanges();
+        }).toThrow(new Error('The hc-stepper activeIndex value of 10 is out of bounds'));
+    });
+
+    it('should set the stepper type based on the type parameter', () => {
+        let comp = fixture.debugElement.query(By.css('div'));
+        expect(comp.nativeElement.classList.contains('hc-stepper-isolated')).toBe(true);
+    });
+
+    it('should show numbers on the steps if showStepCount is set to true', () => {
+        let stepSpans = fixture.debugElement.queryAll(By.css('span'));
+        expect(stepSpans.length).toBe(12);
+    });
+
+    it('should omit the router-outlet if useRouterOutlet is set to false', () => {
+        let outlets = fixture.debugElement.queryAll(By.css('router-outlet'));
+        expect(outlets.length).toBe(0);
+    });
+
+    it('should set the current step based on the activeIndex', () => {
+        component.currentStep = 0;
+        fixture.detectChanges();
+
+        let steps = fixture.debugElement.queryAll(By.css('.hc-step'));
+        expect(steps[0].nativeElement.classList.contains('hc-step-isolated-active')).toBe(true);
+    });
+
+    it('should disable steps if their disabled parameter is set to true', () => {
+        let steps = fixture.debugElement.queryAll(By.css('.hc-step'));
+        expect(steps[2].nativeElement.classList.contains('hc-stepper-disabled')).toBe(true);
+    });
+});
diff --git a/projects/cashmere/src/lib/stepper/stepper.component.ts b/projects/cashmere/src/lib/stepper/stepper.component.ts
new file mode 100644
index 000000000..263a68f69
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/stepper.component.ts
@@ -0,0 +1,135 @@
+import {Component, Input, AfterContentInit, HostBinding, ViewEncapsulation, Output, EventEmitter} from '@angular/core';
+import {Router, NavigationEnd} from '@angular/router';
+import {parseBooleanAttribute} from '../util';
+
+export function throwErrorForMissingRouterLink(stepsWithoutRouterLink: StepInterface[]) {
+    const stepLabels = stepsWithoutRouterLink.map(step => step.label);
+    throw Error(`Routerlink missing on ${stepLabels.join(',')}`);
+}
+
+export interface StepInterface {
+    /** The text to be displayed under the step indicator */
+    label?: string;
+    /** If using a router, the route this step should navigate to */
+    routerLink?: string;
+    /** The icon set the step's hc-icon should use. Must be set if using the icon parameter. */
+    iconSet?: string;
+    /** An glyph that should be displayed inside the step's circle.
+     * If not set, the step number will display in the circle instead. */
+    icon?: string;
+    /** If true, the step will not be clickable */
+    disabled?: boolean;
+}
+
+/** Convey progress through numbered steps, providing a wizard-like workflow.  */
+@Component({
+    selector: 'hc-stepper',
+    templateUrl: './stepper.component.html',
+    styleUrls: ['./stepper.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class StepperComponent implements AfterContentInit {
+    _routerEnabled = false;
+
+    /** An array defining the steps in the stepper */
+    @Input()
+    public steps: StepInterface[];
+
+    /** Sets the layout of the progress stepper. *Defaults to `arrow`.*  */
+    @Input()
+    public type: 'arrow' | 'isolated' = 'arrow';
+
+    /** Sets the highlight color of the progress stepper. *Defaults to `green`.*  */
+    @Input()
+    get color(): 'green' | 'blue' | 'purple' | 'orange' | 'red' | 'none' {
+        return this._color;
+    }
+    set color(value: 'green' | 'blue' | 'purple' | 'orange' | 'red' | 'none') {
+        this._color = value;
+        this._hostClass = 'hc-stepper-' + this._color;
+    }
+    private _color: 'green' | 'blue' | 'purple' | 'orange' | 'red' | 'none' = 'green';
+
+    /** Determines whether numerals should be displayed on each step indicator for the isolated type.
+     * *Defaults to `false`.*  */
+    @Input()
+    get showStepCount(): boolean {
+        return this._showStepCount;
+    }
+    set showStepCount(value) {
+        this._showStepCount = parseBooleanAttribute(value);
+    }
+    private _showStepCount: boolean = false;
+
+    /** If true, include a router outlet with the component. *Defaults to `true`.*  */
+    @Input()
+    get useRouterOutlet(): boolean {
+        return this._useRouterOutlet;
+    }
+    set useRouterOutlet(value) {
+        this._useRouterOutlet = parseBooleanAttribute(value);
+    }
+    private _useRouterOutlet: boolean = true;
+
+    /** Get or set the currently selected zero-based index of the stepper */
+    @Input()
+    get activeIndex(): number {
+        return this._activeIndex;
+    }
+    set activeIndex(value: number) {
+        if (!this.steps) {
+            return;
+        }
+        if (value < 0 || value >= this.steps.length) {
+            throw Error('The hc-stepper activeIndex value of ' + value + ' is out of bounds');
+        }
+        if (this._routerEnabled) {
+            this.router.navigate([this.steps[value].routerLink]);
+        } else {
+            this._activeIndex = value;
+            this.activeIndexChange.emit(this._activeIndex);
+        }
+    }
+    private _activeIndex: number = 0;
+
+    /** Emits the current zero-based index for the active step whenever it changes */
+    @Output()
+    activeIndexChange = new EventEmitter<number>();
+
+    @HostBinding('class') _hostClass = 'hc-stepper-' + this.color;
+
+    constructor(private router: Router) {}
+
+    ngAfterContentInit() {
+        this._checkForRouterUse();
+        this.router.events.forEach(event => {
+            if (event instanceof NavigationEnd) {
+                const url = event && event.url ? event.url : '';
+                this._findCurrentStep(url);
+                this.activeIndexChange.emit(this._activeIndex);
+            }
+        });
+    }
+
+    _stepClick(index) {
+        if (!this._routerEnabled && this.steps[index].disabled !== true) {
+            this._activeIndex = index;
+            this.activeIndexChange.emit(this._activeIndex);
+        }
+    }
+
+    private _checkForRouterUse() {
+        const countUsingRouter = this.steps.filter(step => step.routerLink !== undefined).length;
+        if (countUsingRouter > 0 && countUsingRouter < this.steps.length) {
+            const stepMissingRouterLink = this.steps.filter(step => step.routerLink === undefined);
+            throwErrorForMissingRouterLink(stepMissingRouterLink);
+        } else {
+            this._routerEnabled = countUsingRouter === this.steps.length;
+        }
+    }
+
+    private _findCurrentStep(currentRoute: string) {
+        const foundActiveRoute = this.steps.findIndex(step => currentRoute === step.routerLink);
+        this._activeIndex = foundActiveRoute > -1 ? foundActiveRoute : 0;
+    }
+}
diff --git a/projects/cashmere/src/lib/stepper/stepper.module.ts b/projects/cashmere/src/lib/stepper/stepper.module.ts
new file mode 100644
index 000000000..3babe3510
--- /dev/null
+++ b/projects/cashmere/src/lib/stepper/stepper.module.ts
@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import {StepperComponent} from './stepper.component';
+import {IconModule} from '../icon/icon.module';
+
+export {StepInterface} from './stepper.component';
+
+@NgModule({
+    imports: [CommonModule, RouterModule, IconModule],
+    exports: [StepperComponent],
+    declarations: [StepperComponent]
+})
+export class StepperModule {}
diff --git a/projects/cashmere/src/lib/table/table.component.ts b/projects/cashmere/src/lib/table/table.component.ts
index f89d9d82c..3ad7133c6 100644
--- a/projects/cashmere/src/lib/table/table.component.ts
+++ b/projects/cashmere/src/lib/table/table.component.ts
@@ -50,6 +50,8 @@ export class HcTable<T> extends CdkTable<T> {
     _hostHcTableClass = true;
     @HostBinding('class.hc-table-borders')
     _hostHcBordersClass = true;
+    @HostBinding('class.hc-table-small')
+    _hostHcTableSmall = false;
 
     /** Sets whether the table should have a 2px border around each cell (defaults to true) */
     @Input()
@@ -60,4 +62,13 @@ export class HcTable<T> extends CdkTable<T> {
     set borders(hasBorders) {
         this._hostHcBordersClass = parseBooleanAttribute(hasBorders);
     }
+
+    /** If true, table has less padding and a smaller font size (defaults to false)  */
+    @Input()
+    get tight(): boolean {
+        return this._hostHcTableSmall;
+    }
+    set tight(value) {
+        this._hostHcTableSmall = parseBooleanAttribute(value);
+    }
 }
diff --git a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
index 318dd36ca..18701c062 100644
--- a/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
+++ b/projects/cashmere/src/lib/tabs/tab-set/tab-set.component.ts
@@ -94,6 +94,17 @@ export class TabSetComponent implements AfterContentInit {
 
     _addContentContainer: boolean = true;
 
+    /** If true, condense the default padding on all included tabs. *Defaults to `false`.*  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+        this.setTabDirection();
+    }
+    private _tight = false;
+
     constructor(private router: Router, private route: ActivatedRoute) {}
 
     ngAfterContentInit(): void {
@@ -115,7 +126,10 @@ export class TabSetComponent implements AfterContentInit {
     }
 
     private setTabDirection(): void {
-        setTimeout(() => this._tabs.forEach(t => (t._direction = this.direction)));
+        setTimeout(() => this._tabs.forEach(t => {
+            t._direction = this.direction;
+            t._tight = this.tight;
+        }));
     }
 
     private subscribeToTabClicks(): void {
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.html b/projects/cashmere/src/lib/tabs/tab/tab.component.html
index 521cb9cf5..fe8ef4dda 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.html
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.html
@@ -1,5 +1,6 @@
 <ng-container *ngIf="_direction">
     <a *ngIf="routerLink; else tabWithoutRouting" class="hc-tab-{{_direction}} hc-text-ellipsis"
+        [class.hc-tab-tight]="_tight"
         [routerLink]="routerLink"
         routerLinkActive="active"
         (click)="tabClick.emit()">
@@ -9,6 +10,7 @@
 </ng-container>
 <ng-template #tabWithoutRouting>
     <a class="hc-tab-{{_direction}} hc-text-ellipsis"
+        [class.hc-tab-tight]="_tight"
         [class.active]="_active"
         (click)="tabClick.emit()">
         <ng-container *ngIf="_htmlTitle" [ngTemplateOutlet]="_htmlTitle.tabTitle"></ng-container>
@@ -17,4 +19,4 @@
 </ng-template>
 <ng-template #tabContent>
     <ng-content></ng-content>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.scss b/projects/cashmere/src/lib/tabs/tab/tab.component.scss
index 035e2e945..e1cdc051e 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.scss
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.scss
@@ -10,6 +10,10 @@
     &.active {
         @include hc-tab-vertical-active();
     }
+
+    &.hc-tab-tight {
+        @include hc-tab-vertical-tight();
+    }
 }
 
 .hc-tab-horizontal {
@@ -18,4 +22,8 @@
     &.active {
         @include hc-tab-horizontal-active();
     }
+
+    &.hc-tab-tight {
+        @include hc-tab-horizontal-tight();
+    }
 }
diff --git a/projects/cashmere/src/lib/tabs/tab/tab.component.ts b/projects/cashmere/src/lib/tabs/tab/tab.component.ts
index 0c0b8bde2..52f7627ee 100644
--- a/projects/cashmere/src/lib/tabs/tab/tab.component.ts
+++ b/projects/cashmere/src/lib/tabs/tab/tab.component.ts
@@ -28,6 +28,7 @@ export class TabComponent implements AfterContentInit {
 
     _direction: string;
     _active: boolean = false;
+    _tight: boolean = false;
     _htmlTitle: HcTabTitleComponent;
 
     @ContentChildren(HcTabTitleComponent)
diff --git a/projects/cashmere/src/lib/tile/tile.component.scss b/projects/cashmere/src/lib/tile/tile.component.scss
deleted file mode 100644
index 89e6ed57d..000000000
--- a/projects/cashmere/src/lib/tile/tile.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../sass/tile';
-
-:host {
-    @include hc-tile;
-}
diff --git a/projects/cashmere/src/lib/tile/tile.component.ts b/projects/cashmere/src/lib/tile/tile.component.ts
index bd9f7ec3b..27c3c3f44 100644
--- a/projects/cashmere/src/lib/tile/tile.component.ts
+++ b/projects/cashmere/src/lib/tile/tile.component.ts
@@ -1,14 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, Input, HostBinding} from '@angular/core';
+import {parseBooleanAttribute} from '../util';
 
 /** Container element to help segment content visually against a gray background.
  * The tile will expand to the height and width of the content it contains. */
 @Component({
     selector: 'hc-tile',
-    template: `
-        <ng-content></ng-content>
-    `,
-    styleUrls: ['./tile.component.scss']
+    template: '<ng-content></ng-content>'
 })
 export class TileComponent {
+    @HostBinding('class.hc-tile')
+    _hostClass = true;
+
+    @HostBinding('class.hc-tile-tight')
+    _tight = false;
+
+    /** If true, compress the default padding in the tile. Defaults to false  */
+    @Input()
+    get tight(): boolean {
+        return this._tight;
+    }
+    set tight(value) {
+        this._tight = parseBooleanAttribute(value);
+    }
+
     constructor() {}
 }
diff --git a/projects/cashmere/src/public_api.ts b/projects/cashmere/src/public_api.ts
index 701c34251..644254d84 100644
--- a/projects/cashmere/src/public_api.ts
+++ b/projects/cashmere/src/public_api.ts
@@ -27,6 +27,7 @@ export * from './lib/radio-button/index';
 export * from './lib/scroll-nav/index';
 export * from './lib/select/index';
 export * from './lib/sort/index';
+export * from './lib/stepper/index';
 export * from './lib/subnav/index';
 export * from './lib/table/index';
 export * from './lib/tabs/index';
diff --git a/src/app/components/component-viewer/component-examples/example-viewer/example-viewer.component.html b/src/app/components/component-viewer/component-examples/example-viewer/example-viewer.component.html
index aa1e203a9..7e75c36b2 100644
--- a/src/app/components/component-viewer/component-examples/example-viewer/example-viewer.component.html
+++ b/src/app/components/component-viewer/component-examples/example-viewer/example-viewer.component.html
@@ -1,4 +1,4 @@
-<div class="hc-tile">
+<hc-tile>
     <div class="header">
         <h3 class="docs-api-h3">{{ exampleTitle }}</h3>
         <button hc-button buttonStyle="minimal" size="md" (click)="launchStackBlitz()">
@@ -13,4 +13,4 @@ <h4>{{ example }}-{{ file.name }}</h4>
             <pre> <code [highlight]="file.contents" ></code> </pre>
         </hc-tab>
     </hc-tab-set>
-</div>
+</hc-tile>
diff --git a/src/app/core/document-items.service.ts b/src/app/core/document-items.service.ts
index 78133bbd4..333f934ba 100644
--- a/src/app/core/document-items.service.ts
+++ b/src/app/core/document-items.service.ts
@@ -14,7 +14,7 @@ const docs: DocItem[] = [
         id: 'checkbox',
         name: 'Checkbox',
         category: 'forms',
-        examples: ['checkbox-standard', 'checkbox-indeterminate', 'checkbox-forms'],
+        examples: ['checkbox-standard', 'checkbox-indeterminate', 'checkbox-align', 'checkbox-forms'],
         usageDoc: true
     },
     {id: 'accordion', name: 'Accordion', category: 'layout', examples: ['accordion-overview']},
@@ -53,7 +53,7 @@ const docs: DocItem[] = [
         examples: ['drawer-basic', 'drawer-overlay', 'drawer-side', 'drawer-menu']
     },
     {id: 'ellipsis-pipe', name: 'Ellipsis', category: 'pipes', usageDoc: true, hideApi: true, examples: ['ellipsis-overview']},
-    {id: 'form-field', name: 'Form Field', category: 'forms', examples: ['form-field-overview']},
+    {id: 'form-field', name: 'Form Field', category: 'forms', examples: ['form-field-overview', 'form-field-tight']},
     {id: 'icon', name: 'Icon', category: 'buttons', examples: ['icon-overview']},
     {
         id: 'input',
@@ -114,6 +114,7 @@ const docs: DocItem[] = [
         usageDoc: true
     },
     {id: 'sort', name: 'Sort', category: 'table', usageDoc: true},
+    {id: 'stepper', name: 'Stepper', category: 'layout', examples: ['stepper-overview']},
     {id: 'subnav', name: 'Subnav', category: 'nav', examples: ['subnav-overview']},
     {
         id: 'table',
diff --git a/src/app/shared/cashmere.module.ts b/src/app/shared/cashmere.module.ts
index 36f519d4d..d98c0fd59 100644
--- a/src/app/shared/cashmere.module.ts
+++ b/src/app/shared/cashmere.module.ts
@@ -25,6 +25,7 @@ import {
     ScrollNavModule,
     SelectModule,
     SortModule,
+    StepperModule,
     SubnavModule,
     TabsModule,
     TableModule,
@@ -60,6 +61,7 @@ import {
         ScrollNavModule,
         SelectModule,
         SortModule,
+        StepperModule,
         SubnavModule,
         TableModule,
         TabsModule,