{"id":982,"date":"2018-05-29T20:38:41","date_gmt":"2018-05-29T20:38:41","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=982"},"modified":"2018-06-27T14:51:33","modified_gmt":"2018-06-27T14:51:33","slug":"modal","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/modal\/","title":{"rendered":"Modal"},"content":{"rendered":"<p>Components<\/p>\n<h1>Modal<\/h1>\n<h4>Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow.<\/h4>\n<ol>\n<li><strong>Header<\/strong>\n<ul>\n<li>Modal title<\/li>\n<li>Dismiss &#8220;X&#8221; icon<\/li>\n<li>Top border<\/li>\n<li>Gray divider<\/li>\n<\/ul>\n<\/li>\n<li><strong>Body<\/strong>\n<ul>\n<li>Content title<\/li>\n<li>Content description (optional)<\/li>\n<\/ul>\n<\/li>\n<li><strong>Footer<\/strong>\n<ul>\n<li>Gray divider<\/li>\n<li>Primary button<\/li>\n<li>Text button<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<pre>.modal-title {\r\nfont-family: Lato-Regular;\r\nfont-size: 18px;\r\ncolor: #002D41;\r\n}\r\n.top-border {\r\nbackground-color: DEPENDS ON MODAL MESSAGE;\r\nborder-radius: 4px 4px 0 0;\r\n}\r\ngray-divider {\r\nborder: 2px solid #EEF1F6;\r\n}\r\n.modal-content-title {\r\nfont-family: Lato-Regular;\r\nfont-size: 24px;\r\ncolor: #002D41;\r\n}\r\n.modal-content-description {\r\nfont-family: Lato-Regular;\r\nfont-size: 14px;\r\ncolor: #3C4144;\r\n}\r\n<\/pre>\n<h2>Types<\/h2>\n<p>Modals include feedback colors so users can further understand what their purpose is. The four types are:<\/p>\n<ul>\n<li>Informational (Blue)<\/li>\n<li>Success (Green)<\/li>\n<li>Warning (Yellow)<\/li>\n<li>Danger (Red)<\/li>\n<\/ul>\n<h2>Overview of CSS Classes<\/h2>\n<h5>Selector<\/h5>\n<h5>Summary<\/h5>\n<h5>Parent Selector<\/h5>\n<p><em>.modal-title<\/em><\/p>\n<p><em>.top-border<\/em><\/p>\n<p><em>.gray-divider<\/em><\/p>\n<p><em>.modal-content-title<\/em><\/p>\n<p><em>.modal-content-description<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Modal Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow. Header Modal title Dismiss &#8220;X&#8221; icon Top border Gray divider Body Content title Content description (optional) Footer Gray divider Primary button Text button .modal-title { font-family:&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-982","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/982","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=982"}],"version-history":[{"count":7,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/982\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/982\/revisions\/1233"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}