Style Guide

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

Colors

Primaries and grays

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

Colors
Dismissable Alert

Avatars

Represent users or customers around the interface

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
Verified

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

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.

Colors
Circle Buttons
States

Cards

Structural component for displaying boxed content

Default Style

Some quick example text to build on the card title and make up the bulk of the card's content.

Link Here

Light BG

Some quick example text to build on the card title and make up the bulk of the card's content.

Link Here

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

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

Forms - Selectables

Checkboxes, Radios and Select dropdowns

Checkboxes
Radios
Switches
Select
Arrow Down
Arrow Down
Arrow Down

Icons - Interface

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

x icon
plus icon
search icon
shopping-bag icon
shopping-cart icon
map-marker-2 icon
menu icon
minus icon
more-horizontal icon
more-vertical icon
heart icon
home icon
mail icon
chevron-down icon
chevron-left icon
chevron-right icon
chevron-up icon
clock icon
caret-right icon
caret-up icon
check icon
caret-down icon
caret-left icon
arrow-right icon
arrow-up icon
calendar icon
arrow-left icon
arrow-down icon

Icons - Social

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

dribbble
facebook
github
google
instagram
kickstarter
linkedin
pinterest
producthunt
skype
slack
spotify
twitter
unsplash
vimeo
youtube

Icons - Usage

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

Sizes
icon-xs
Icon
icon-sm
Icon
icon
Icon
icon-lg
Icon
icon-xl
Icon
Colors
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Variations
Icon
Icon
Icon
Icon

Icon Arrangements

Preset arrangements for icons with associated content

  • Layouts icon
    Multiple Layouts
  • Box icon
    Modular Components
  • Lightning icon
    Suits Your Style
  •  icon=
    Unlimited Data
  •  icon=
    Premium Support
  •  icon=
    Unsupported Feature
Layouts icon
Multiple Layouts
Non pulvinar neque laoreet suspendisse interdum Catelyn libero id. Olenna imp leo in vitae turpis massa. Sapien habitant Tyrion.
Box icon
Modular Components
Khaleesi vedit sodales ut eu. Melisandre pellentesque elit eget Gendry est sociis natoque penatibus. Eunuch pulvinar sapien et Loras.
Lightning icon
Suits Your Style
Drogon sed ut perspiciatis unde omnis iste error sit voluptatem accusantium doloremque laudantium, totam aperiam, eaque Arya.
Selection interface icon
Highly Customizable
Eunuch sed blandit libero volutpat sed cras. Cersei quis imperdiet tincidunt unuch pulvinar sapien. Habitasse platea Davos vestibulum.
Bookmark icon
Well Documented
Duis convallis convallis tellus imp interdum. Non diam phasellus vestibulum lorem sed risus ultricies Tyrion. Enim blandit volutpat.
Binoculars icon
Fully Responsive
Ned ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque Arya.

Media

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

Variations
Binoculars icon
Fully Responsive
Icon
Kyan logo
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

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

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

Default Display
Tooltip Circle
?
Open Sidebar Open Sidebar
Base
Components
Icon