Colors

Typography

Base typographic elements and vertical rhythm.

Heading 1: Inter Bold 30px

Inter Regular 14px. 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: Inter Regular 20px

Inter Regular 14px. 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: Inter Bold 14px

Inter Regular 14px. 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 Regular 16px

Inter Regular 14px. 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 12px

Inter Regular 14px. 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 RegularItalic 12px

Inter Regular 14px. 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.

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

Text Areas

With Labels

It is also a best practice to include a label for each text 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.

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

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.

Small Buttons

Small buttons fit well inside of table cells and line items.

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 is important to wrap all controls in a <div class="table__actions"> ... </div> container in order to keep the table row height consistent with default tables. The container will also 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--small modifier on any buttons within them.

Panels

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

Basic Panel

Panel with Header and Footer

Panel 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.

List Groups with Content

To extend the list group with more content, simply add a <div class="list-group__item-body"> container within the <div class="list-group__item"> ... </div> element.