„upgrade” kifejezésre keresés eredménye:

  • Style Guide

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

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

  • Landing 5

    Feature Showcase

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

    [jumpstart_video_lightbox_button media_url=”https://vimeo.com/40842620″]

    “They changed the game”

    Less work, more flow.

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

    Scales with your business

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

    FAQ

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.