Style Guide

An overview of Jumpstart’s styling and interface elements.
Click here to see full documentation.

Colors

Primaries and grays – please note these are for demonstration purposes only

Primary
Primary 2
Primary 3
Success
Warning
Danger
Info
Dark
Body Color
Secondary
Light
White

Typography

Headings, body and other common text elements

Display 1
Display 2
Display 3
Display 4

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
“Here’s an insightful quote from the article that is worth isolating for emphasis.”

Lead Text Lead Link

Body Text Body Link

Small Text Small Link

Tiny Text Tiny Link

Accordions

Toggle element based on the Card for displaying discrete portions of information

Integer ut Oberyn massa. Sed feugiat vitae turpis a porta. Aliquam sagittis interdum Melisandre. Vivamus ornare pharetra diam sit amet tincidunt. Eunuch sit amet pharetra odio. Vivamus in tempor ipsum, sit amet elementum neque. Sed faucibus posuere pharetra. In imperdiet eleifend dui a aliquet. Aliquam imperdiet Tyrion purus vitae rutrum. Donec eu commodo nunc. Mauris dignissim lectus massa, eget cursus quam mollis id. Eddard sit amet ex Jon nibh maximus cursus at vitae mi. Duis tincidunt aliquam mi sed sagittis.
Eunuch nec dapibus ex. Aenean placerat, ex imp convallis dictum, ex nulla rutrum justo, Jon lobortis nisi ex at leo. Sed Tyrion aliquet sem vel pharetra. Vestibulum ante ipsum primis in faucibus Hodor luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a sapien quis quam auctor feugiat. Donec volutpat condimentum risus, eu iaculis nibh dapibus eu.
Volantisi fringilla, unuch eu sagittis sagittis, urna Loras luctus odio, vitae hendrerit massa dui ac est. Donec leo tortor, Tyrion et aliquet at, convallis imp mi. Vivamus turpis diam, ultrices et tempus quis, sollicitudin et risus. Pellentesque nec sapien imp dolor condimentum condimentum ut sed neque. Integer efficitur accumsan risus, vitae posuere massa aliquam at.

Alerts

Used for adding notices around the interface

A simple Primary alert. Here is an example link.

A simple Primary 2 alert. Here is an example link.

A simple Primary 3 alert. Here is an example link.

A simple Success alert. Here is an example link.

A simple Warning alert. Here is an example link.

A simple Danger alert. Here is an example link.

A simple Info alert. Here is an example link.

A simple Light alert. Here is an example link.

A simple Secondary alert. Here is an example link.

Avatars

Represent users or customers around the interface – please note this is for demonstration purposes only.

Sizes
avatar-xs
Avatar
avatar-sm
Avatar
avatar
Avatar
avatar-lg
Avatar
avatar-xl
Avatar
Group
  • Avatar
  • Avatar
  • Avatar
  • Avatar
Badges
Avatar
Avatar
Avatar
Avatar
Check

Background Images

A simple utility to transform an image into a background for an element.

Background Image
That's a background image behind me.

Badges

Combine with other components to display metadata. Please note these are created with HTML and are for developers only.

 
Variations
Badge
Badge Pill
Colors
Primary
Primary 2
Primary 3
Success
Warning
Danger
Info

Buttons

Styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Please note these are created with HTML.

Colors
Circle Buttons
States

Cards

Structural component for displaying boxed content

Dividers

Decorative elements to give your site some dynamic appeal

Horizontal Dividers
Vertical Dividers
Divider on the left
Divider on the right

Forms – Text Inputs

Size and state variations for text inputs. Please note these are created with HTML and are for developers only.

 
Input Sizes
Textareas
States
Labelled Input
* Input hint text
Input Group
https://
@example.com
$
.00

Forms – Selectables

Checkboxes, Radios and Select dropdowns. Please note these are created with HTML and are for developers only.

Checkboxes
Radios
Switches
Select

Icons – Interface

Common interface iconography. For all icons, see the Icons Reference