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
Link

Colors

Primary
Primary 2
Primary 3
Success
Warning
Danger
Info

As links

Primary
Primary 2
Primary 3
Success
Warning
Danger
Info

Breadcrumbs

Indicate the current page’s location within a navigational hierarchy

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

Default Style

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

Link Here

On Dark BG

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

Dropdowns

Styles for navigation and context dropdowns. Please note these are created with HTML and are for developers only.

Menu Alignment


Style GuidePluginsNavigation Bars

Style GuidePluginsNavigation Bars

Style GuidePluginsNavigation Bars

Style GuidePluginsNavigation Bars

Dropdown Item Variations

Heading

Style GuidePluginsNavigation Bars
DocumentationChangelogDisabled item

Multi-Level



Next Level

Next Level

Next Level
Level 4!


Multi-Level Hover



Next Level

Next Level

Next Level
Level 4!


Full Width


Hello, I am the fullscreen dropdown content.

Rich Dropdown Content


Style Guide

A guide to Jumpstart’s many components

Plugins

Extend the functionality of your site.

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”][jumpstart_icon icon_name=”Interface Search”][jumpstart_icon icon_name=”Interface Shopping Bag”][jumpstart_icon icon_name=”Interface Cart”][jumpstart_icon icon_name=”Interface Map Marker”][jumpstart_icon icon_name=”Interface Menu”][jumpstart_icon icon_name=”Interface Minus”][jumpstart_icon icon_name=”Interface More”][jumpstart_icon icon_name=”Interface More Vertical”][jumpstart_icon icon_name=”Interface Heart”][jumpstart_icon icon_name=”Interface Envelope”][jumpstart_icon icon_name=”Interface Chevron Down”][jumpstart_icon icon_name=”Interface Chevron Left”][jumpstart_icon icon_name=”Interface Chevron Right”][jumpstart_icon icon_name=”Interface Chevron Up”][jumpstart_icon icon_name=”Interface Clock”][jumpstart_icon icon_name=”Interface Caret Right”][jumpstart_icon icon_name=”Interface Caret Up”][jumpstart_icon icon_name=”Interface Check”][jumpstart_icon icon_name=”Interface Caret Left”][jumpstart_icon icon_name=”Interface Caret Down”][jumpstart_icon icon_name=”Interface Arrow Right”][jumpstart_icon icon_name=”Interface Calendar”][jumpstart_icon icon_name=”Interface Arrow Left”][jumpstart_icon icon_name=”Interface Arrow Down”]

Icons – Social

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

 [jumpstart_icon icon_name=”Dribbble Icon”][jumpstart_icon icon_name=”Facebook Icon”][jumpstart_icon icon_name=”GitHub Icon”][jumpstart_icon icon_name=”Google Icon”][jumpstart_icon icon_name=”Instagram Icon”][jumpstart_icon icon_name=”KickStarter Icon”][jumpstart_icon icon_name=”LinkedIn Icon”][jumpstart_icon icon_name=”Pinterest Icon”][jumpstart_icon icon_name=”Skype Icon”][jumpstart_icon icon_name=”Slack Icon”][jumpstart_icon icon_name=”Spotify Icon”][jumpstart_icon icon_name=”Twitter Icon”][jumpstart_icon icon_name=”Unsplash Icon”][jumpstart_icon icon_name=”Vimeo Icon”][jumpstart_icon icon_name=”YouTube Icon”]

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