Components

In this section you will find reusable smaller parts like buttons and containers used to create full pages and layouts.


Accordion

Accordions are used to hide and show additional content. This allows the user to quickly scan topics and expand to see more details.

Alerts

Provide contextual feedback messages for typical user actions

Buttons

Allow the member to take an action within forms, dialogs, and other pages.

Collapsible Cards

UI container that controls the background color, border raduis and box shadow. This version has a collapsible content area.

Collapsible Checklist

Brief description of this component

Detail Cards

Brief description of Detail cards

Error Note

Pattern for displaying errors within a layout or as part of another component

Filters Sidebar Accordion

Collapsible Sections of the Available Filters

Flight Training Cards

UI container that controls the background color, border radius and box shadow. This version demonstrates a flight training card.

Footer

Site footer used across all pages.

Forms

Form elements, controls and validation.

Inbox Notice

Brief description of component

Loading Spinner

UI progress indicator.

Modals

Secondary window that pops up within a parent window to focus the user’s attention.

Navigation

Global navigation for the site, including main and utility items. Collapses into a hamburger menu for smaller devices.

Overview Cards

Wet and dry training overview cards

Page Alert

Top level page alert that notifies something urgent website visitors must know.

Page Header

The page header container includes the background color, bottom border and font color styles.

Single Card

Brief description of single card

Tab Controls

Additional navigation allowing the use to change what is being displayed in the content area below.

Tables

Mobile friendly tables

Utilities

Helper classes used throughout the site.

View Controls

A set of buttons used for changing the order, or changing the layout of how the content of a page is displayed.

Workflow Stepper

A step indicator updates users on their progress through a multi-step process.