{"id":92,"date":"2020-07-03T19:39:43","date_gmt":"2020-07-03T19:39:43","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=92"},"modified":"2021-01-05T16:35:59","modified_gmt":"2021-01-05T16:35:59","slug":"cta","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/cta\/","title":{"rendered":"CTA\/Buttons"},"content":{"rendered":"\n<h6 class=\"pt-5\">Buttons Large<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-1-tab\" href=\"#example-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-1\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-1-tab\" href=\"#description-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-1\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-1-tab\" href=\"#code-1\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-1\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-1\" role=\"tabpanel\" aria-labelledby=\"example-1-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\t\n<button class=\"m-2 largeActiveButton\">Cancel Subscription<\/button><button class=\"m-2 largeInactiveButton\">Cancel Subscription<\/button>\n<br>\n<button class=\"m-2 largeActiveButton\">Submit<\/button>\t\t<button class=\"m-2 largeInactiveButton\">Cancel<\/button>\n\n<\/div><!-- End col-12 -->\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-1\" role=\"tabpanel\" aria-labelledby=\"description-1-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Buttons are grouped into two main categories.<\/p>\n\n\n\n<p>The Large Buttons have a font-size of 22px.<br>They\u2019re often used in desktop layouts.<br>Primary Buttons \u2013 green.<br>Secondary Buttons \u2013 grey.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-1\" role=\"tabpanel\" aria-labelledby=\"code-1-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n\t&lt;button class=\"largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"largeActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"largeInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Buttons Small<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-2-tab\" href=\"#example-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-2\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-2-tab\" href=\"#description-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-2\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-2-tab\" href=\"#code-2\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-2\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-2\" role=\"tabpanel\" aria-labelledby=\"example-2-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\n\n\t\t\t\t\t\t\t\t<button class=\"m-2 smallActiveButton\">Cancel Subscription<\/button>\n\t\t\t\t\t\t\t\t<button class=\"m-2 smallInactiveButton\">Cancel Subscription<\/button>\n\t\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t\t<button class=\"m-2 smallActiveButton\">Submit<\/button>\n\t\t\t\t\t\t\t\t<button class=\"m-2 smallInactiveButton\">Cancel<\/button>\n\t\t\t\t\t\t\t<\/div>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-2\" role=\"tabpanel\" aria-labelledby=\"description-2-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>The Small Buttons have a font-size of 18px.<br>\nThey&#8217;re often used in mobile layouts. <br> \nPrimary Buttons &#8211; green.<br>\nSecondary Buttons &#8211; grey.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-2\" role=\"tabpanel\" aria-labelledby=\"code-2-tab\">\n            <section>\n                <div class=\"col greyvalidator \">\n                    <pre><code>\n\t&lt;button class=\"smallActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\t\t\n\t&lt;button class=\"smallInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt; \t\n\t&lt;button class=\"smallActiveButton\"&gt;Submit&lt;\/button&gt; \t\n\t&lt;button class=\"smallInactiveButton\"&gt;Cancel&lt;\/button&gt; \t\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n\n\n\n<h6 class=\"pt-5\">Buttons (Disabled)<\/h6>\n\n\n\n<!-- Tabs -->\n    <ul class=\"nav nav-tabs mb-5\">\n        <li class=\"nav-item\">\n            <a class=\"nav-link active\" id=\"example-3-tab\" href=\"#example-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-3\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-3-tab\" href=\"#description-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-3\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-3-tab\" href=\"#code-3\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-3\" aria-selected=\"false\">Code<\/a>\n        <\/li>\n\n    <\/ul>\n\n\n\n<!-- Tab panes -->\n    <div class=\"tab-content mb-5\">\n\n        <!-- Tab Example -->\n        <div class=\"tab-pane active\" id=\"example-3\" role=\"tabpanel\" aria-labelledby=\"example-3-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\n\n\t\t\t\t\t\t\t\t<button class=\"disabled m-2 largeActiveButton\">Cancel Subscription<\/button>\n\t\t\t\t\t\t\t\t<button class=\"disabled m-2 largeInactiveButton\">Cancel Subscription<\/button>\n\t\t\t\t\t\t\t\t<br>\n\t\t\t\t\t\t\t\t<button class=\"disabled m-2 smallActiveButton\">Submit<\/button>\n\t\t\t\t\t\t\t\t<button class=\"disabled m-2 smallInactiveButton\">Cancel<\/button>\n\t\t\t\t\t\t\t<\/div>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Description -->\n        <div class=\"tab-pane\" id=\"description-3\" role=\"tabpanel\" aria-labelledby=\"description-3-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Disabled buttons prevent users from taking an action.<br>\nThere&#8217;s no hover effect, they can not be clicked and are set to 50% opacity.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-3\" role=\"tabpanel\" aria-labelledby=\"code-3-tab\">\n            <section>\n                <div class=\"col  \">\n                    <pre><code>\n&lt;button class=\"disabled m-2 largeActiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\n&lt;button class=\"disabled m-2 largeInactiveButton\"&gt;Cancel Subscription&lt;\/button&gt;\n&lt;br&gt;\n&lt;button class=\"disabled m-2 smallActiveButton\"&gt;Submit&lt;\/button&gt;\n&lt;button class=\"disabled m-2 smallInactiveButton\"&gt;Cancel&lt;\/button&gt;\t\n\t<\/code><\/pre>\n\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Buttons Large Example Description Code Cancel SubscriptionCancel Subscription Submit Cancel Buttons are grouped into two main categories. The Large Buttons have a font-size of 22px.They\u2019re [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/92"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=92"}],"version-history":[{"count":53,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/92\/revisions"}],"predecessor-version":[{"id":1199,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/92\/revisions\/1199"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}