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

Alerts

Used for adding notices around the interface

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
Link
Colors
Primary
Primary 2
Primary 3
Success
Warning
Danger
Info
As links
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.

Sizes
Small
Standard
Large
Variations
Filled
Outline
Icon
Icon
Colors
Circle Buttons
States
Idle

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

[jumpstart_icon icon_name= »Interface Close » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Search » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Shopping Bag » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Cart » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Map Marker » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Menu » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Minus » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface More » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface More Vertical » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Heart » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Envelope » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Chevron Down » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Chevron Left » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Chevron Right » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Chevron Up » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Clock » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Caret Right » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Caret Up » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Check » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Caret Left » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Caret Down » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Arrow Right » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Calendar » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Arrow Left » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Interface Arrow Down » class= »icon icon-sm text-primary »]

Icons – Social

Common social network icons. For all icons, see the Icons Reference

 
[jumpstart_icon icon_name= »Dribbble Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Facebook Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »GitHub Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Google Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Instagram Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »KickStarter Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »LinkedIn Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Pinterest Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Skype Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Slack Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Spotify Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Twitter Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Unsplash Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »Vimeo Icon » class= »icon icon-sm text-primary »]
[jumpstart_icon icon_name= »YouTube Icon » class= »icon icon-sm text-primary »]

Icons – Usage

Handy utilities for displaying icons around the interface. For all icons, see the Icons Reference

Sizes
icon-xs
Icon For Thunder-move
icon-sm
Icon For Thunder-move
icon
Icon For Thunder-move
icon-lg
Icon For Thunder-move
icon-xl
Icon For Thunder-move
Colors
Icon For Thunder-move
Icon For Thunder-move
Icon For Thunder-move
Icon For Thunder-move
Icon For Thunder-move
Icon For Thunder-move
Icon For Thunder-move
Variations
Icon For Attachment#2
Icon For LTE#2
Icon For Settings-1

Icon Arrangements

Preset arrangements for icons with associated content. Please note these are created with HTML and are for developers only.

 
  • Icon For Layout-left-panel-2
    Multiple Layouts
  • Icon For Box#2
    Modular Components
  • Icon For Thunder-move
    Suits Your Style
  • Unlimited Data
  • Premium Support
  • Unsupported Feature
Icon For Layout-left-panel-2
Multiple Layouts
Non pulvinar neque laoreet suspendisse interdum Catelyn libero id. Olenna imp leo in vitae turpis massa. Sapien habitant Tyrion.
Icon For Box#2
Modular Components
Khaleesi vedit sodales ut eu. Melisandre pellentesque elit eget Gendry est sociis natoque penatibus. Eunuch pulvinar sapien et Loras.
Icon For Thunder-move
Suits Your Style
Drogon sed ut perspiciatis unde omnis iste error sit voluptatem accusantium doloremque laudantium, totam aperiam, eaque Arya.
Icon For Select
Highly Customizable
Eunuch sed blandit libero volutpat sed cras. Cersei quis imperdiet tincidunt unuch pulvinar sapien. Habitasse platea Davos vestibulum.

Media

A small encapsulated element based on the card. Displays small media items that generally live in a group.

Variations
Icon For Route
Fully Responsive
Icon
Kyan Boards
Image
Shelley McNabb avatar image
“Long build times are a thing of the past!”
Quote

Pagination

Indicate a series of related content exists across multiple pages.

Popovers

Display supplemental information upon click. Please note these are created with HTML and are for developers only.

 

Shadows

Preset styles to imply depth on interface components

Small
Standard
Large

Tabs

Navigational element responsible for toggling the display of content in a near-by container. Please note these are created with HTML and are for developers only.
Nav Tabs
Home Tab Content
Profile Tab Content
Contact Tab Content
Nav Pills - Horizontal
Home Tab Content
Profile Tab Content
Contact Tab Content
Nav Pills - Horizontal Filled
Home Tab Content
Profile Tab Content
Contact Tab Content
Nav Pills - Vertical
Home Tab Content
Profile Tab Content
Contact Tab Content
Nav Pills - Buttons
Home Tab Content
Profile Tab Content
Contact Tab Content

Tooltips

Display supplemental information upon hover. Please note these are created with HTML and are for developers only.

Default Display
Top
Bottom
Left
Right
Custom HTML
Tooltip Circle
?
Open Sidebar Open Sidebar
Arrow-up