Colors

Colors can be used stylistically, but are more often used to communicate meaning. Confirmation and success are generally green, warnings are generally yellow, and errors and generally red. Links and informational messages that require attention are usually treated with a blue color. Primary and secondary colors are mostly presentational and can be adjusted to fit the given context. Try to avoid using state colors as primary or secondary colors if at all possible so that users don't get confused.

Typography

Base typographic elements and vertical rhythm.

Heading 1: Gilroy Bold 44px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2: Gilroy Bold 32px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3: Gilroy Bold Uppercase 20px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 4: Inter Medium 24px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 5: Inter Bold 14px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 6: Inter Medium Italic 16px

Inter Medium 16px. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Forms

Forms are made up of three main components - a form element, form controls (text inputs, checkboxes, radio buttons), and form actions that include a submit button and sometimes a cancel button.

It is also a best practice to include a label for each input. If an input has accompanying help text be sure to set the input's aria-describedby attribute to the id of its help text element.

Text Inputs

Text based input fields are the most common type of form control. For full support, every text field should have its type set.

Select Boxes

Select boxes should be used if the user has more than 4 options to choose from. Otherwise, it's more beneficial to use radio buttons or checkboxes.

Text Areas

Textareas should be used for long form inputs where the user will need to potentially input multiple lines of text.

Checkboxes and Radio Buttons

Checkboxes and radio buttons use the same form-group structure as text inputs. However, many form-group__input elements can be added in succession within the form group to create a list of options.

File Upload Input

Toggles

States & Validation

Icons

Buttons

Use any combination of the available button classes and modifiers to quickly create a styled button.

Default Buttons

Default buttons should be used for any primary user action, such as submit buttons.

Outline Buttons

Outlined buttons have no background color and colored text. All cancel buttons within a form should be outlined buttons.

Link Buttons

Link buttons work particularly well in situations where you might use a small button (e.g. within a table cell) to focus more visual attention on the data rather than a bright colorful button.

Icon Buttons

Icon buttons can be used in a situations where you need to save space, or if there are several secondary actions the that user can take. All icon buttons have a tooltip built in so be sure to set the aria-label="" property for good accessibility.

Rounded Buttons

Rounds the bounds of the button into a pill shape. This class can be added to any of the other button moddifiers to achieve the same effect.

Small Buttons

Small buttons fit well inside of table cells and line items. This class can be added to any of the other button moddifiers to achieve the same effect.

Tables

Tables have several variations depending on the data that is being displayed or what needs to be done. They can be bare, striped and/or have actionable controls.

Basic Tables

All <table> elements are wraped in a .table container for proper styling. Each <table> element shoud consist of a <thead> for all columns headers, a <tbody> for all table data and occasionally a <tfoot> if needed.

Striped Tables

Striped tables have a slight variation in background color on every other row. This helps with legibility, particularly when the table has many rows.

To create a striped table, simply amend the table--striped class to the containing <div class="table"> ... </div>

Tables With Buttons

Some table rows may require certain actions to be taken. For these actionable rows you can wrap all controls in a <div class="table__actions"> ... </div> container in order to put whitespace between the controls if there happens to be more than one.

Condensed Tables

If you prefer a denser view of the table data you can add the table--condensed modifier to the .table container. Condensed tables require the use of the button--sm modifier on any buttons within them.

Cards

Cards are container elements that are used to call out an area of content.

Basic Card

Card with Header and Footer

Card with Controls

Lists

Basic Lists

Basic lists include ordered and unordered lists.

Description Lists

Description lists are used to display a label and its associated content side-by-side. Description lists are comprised of a containing <dl> element, a <dt> for the label and a <dd> for the content. Multiple <dt> and <dd> pairs can be added to a single <dl> element.

Description list label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos et optio perspiciatis nam iure voluptates in totam corporis magnam blanditiis, deleniti qui molestiae voluptatem dolor alias libero accusamus quam fuga.

A really long description list label

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos et optio perspiciatis nam iure voluptates in totam corporis magnam blanditiis, deleniti qui molestiae voluptatem dolor alias libero accusamus quam fuga.

List Groups

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Accordion

A content area that can be expanded or contracted.

Default Accordion

Accordion Card

Alert

Used to display messages to the user.

States