{"id":48,"date":"2018-04-27T14:55:50","date_gmt":"2018-04-27T14:55:50","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=48"},"modified":"2018-05-18T17:14:59","modified_gmt":"2018-05-18T17:14:59","slug":"stepper","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/stepper\/","title":{"rendered":"Stepper"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tStepper<br \/>\n\t<\/h1>\n<h4>\n\t\tSteppers convey progress through a sequence of numbered steps.  They provide a wizard-like workflow by dividing content into logical steps.<br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Horizontal linear stepper\" target=\"_self\"><br \/>\n\t\tHorizontal linear stepper<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Steppers are composed of numbers nested inside circular icons. A line between each stage also helps establish a link and reinforces that each step is connected.<\/p>\n<h2>\n\t\tStep States<br \/>\n\t<\/h2>\n<p>There are 3 different states for steps:<\/p>\n<ul>\n<li>incomplete (default)<\/li>\n<li>active<\/li>\n<li>complete<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Incomplete (default)\" target=\"_self\"><br \/>\n\t\tIncomplete (default)<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<pre>.step_base {\nheight:24px;\nwidth:24px;\nbackground: #B3B3B3;\n}\n.step_label {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #757575;\ntext-align: left;\n}\n.step_line {\nborder: solid 1px rgba(0,0,0,0.12);\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Active\" target=\"_self\"><br \/>\n\t\tActive<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<pre>.step_base: active {\nfont-family: Lato-regular;\nfont-size:12px;\ncolor: #0074D9;\n}\n.step_label: active {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #3C4144;\ntext-align: left;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Complete\" target=\"_self\"><br \/>\n\t\tComplete<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.<\/p>\n<p>\t<b>icon<\/b> : fa-check<\/p>\n<h2>\n\t\tVertical<br \/>\n\t<\/h2>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.step-base<\/em><\/p>\n<p><em>.step-label<\/em><\/p>\n<p><em>.step-line<\/em><\/p>\n<p><em>.step-content<\/em><\/p>\n<p>blue or gray circle that contains number of step or check<\/p>\n<p>label to the right of base that provides context<\/p>\n<p>gray horizontal line that connects steps<\/p>\n<p>number or icon contained in the step-base<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Stepper Steppers convey progress through a sequence of numbered steps. They provide a wizard-like workflow by dividing content into logical steps. Horizontal linear stepper Steppers are composed of numbers nested inside circular icons. A line between each stage also helps establish a link and reinforces that each step is connected. Step States There are&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":880,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/48\/revisions\/880"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}