{"id":206,"date":"2020-08-17T17:25:39","date_gmt":"2020-08-17T17:25:39","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=206"},"modified":"2021-02-04T16:24:04","modified_gmt":"2021-02-04T16:24:04","slug":"selection-button","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/selection-button\/","title":{"rendered":"Selection Button"},"content":{"rendered":"\n<p>Selection Buttons are a common pattern seen on the Questionnaire pages.<\/p>\n\n\n\n<h6 class=\"pt-5\">Selection Button <\/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\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t<input value=\"retail\" type=\"radio\" name=\"\">\n\t\t<span class=\"rblCircle\">\n\t\t\t<span class=\"rblIcon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Retail_170x170.png?v=1\" alt=\"Retail\" title=\"Retail\">\n\t\t\t<\/span>\n\t\t<\/span>\n\t\t<label for=\"\" class=\"rblLabel\">Retail<\/label>\n\t<\/div>\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>Selection Button in its deselected state.<\/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\">Selection Button &#8211; Active<\/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\">\t\n\n\n<div class=\"ansRB\">\n\n\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t<input value=\"retail\" type=\"radio\" name=\"\">\n\t\t<span class=\"rblCircle\">\n\t\t\t<span class=\"rblIcon\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Retail_170x170.png?v=1\" alt=\"Retail\" title=\"Retail\">\n\t\t\t<\/span>\n\t\t<\/span>\n\t\t<label for=\"\" class=\"rblLabel\">Retail<\/label>\n\t<\/div>\n\n\t<span class=\"switchFilter\"><\/span>\t\n\t\n<\/div>\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-2\" role=\"tabpanel\" aria-labelledby=\"description-2-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Selection Button in its Active state.<\/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=\"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\">Selection Button &#8211; Grouped<\/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\">\t\n\n<div id=\"radioButtonContainer\" class=\"ansRB\">\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"retail\" type=\"radio\" name=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Retail_170x170.png?v=1\" alt=\"Retail\" title=\"Retail\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Retail<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"farming and agriculture\" type=\"radio\" name=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Agriculture_170x170.png?v=1\" alt=\"Farming and agriculture\" title=\"Farming and agriculture\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label for=\"\" class=\"rblLabel\">Farming and agriculture<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"construction\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Construction_170x170.png?v=1\" alt=\"Construction\" title=\"Construction\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label for=\"\" class=\"rblLabel\">Construction<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"professional and technical services\" type=\"radio\" name=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/TechnicalSupport_170x170.png?v=1\" alt=\"Professional and technical services\" title=\"Professional and technical services\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"ctl00_Content_ctrlQuestions_ctl28_ctl06_ctl04__3\" for=\"ctl00_Content_ctrlQuestions_ctl28_ctl06_ctl04__3\" class=\"rblLabel\">Professional services<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue selected focused-input\" style=\"\">\n\t\t\t<input value=\"manufacturing\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Manufacturing_170x170.png?v=1\" alt=\"Manufacturing\" title=\"Manufacturing\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Manufacturing<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"food and accommodation services\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Food_170x170.png?v=1\" alt=\"Food and accommodation services\" title=\"Food and accommodation services\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Food and accommodation<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"finance and insurance\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Finance_170x170.png?v=1\" alt=\"Finance and insurance\" title=\"Finance and insurance\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Finance and insurance<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"real estate\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/RealEstate_170x170.png?v=1\" alt=\"Real estate\" title=\"Real estate\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Real estate<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"wholesale trade\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Wholesale_170x170.png?v=1\" alt=\"Wholesale trade\" title=\"Wholesale trade\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Wholesale trade<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"information technology\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/InfoTechnology_170x170.png?v=1\" alt=\"Information technology\" title=\"Information technology\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Information technology<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"art, entertainment, and recreation\" type=\"radio\" name=\"\" id=\"0\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Recreation_170x170.png?v=1\" alt=\"Art, entertainment, and recreation\" title=\"Art, entertainment, and recreation\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"0\" for=\"0\" class=\"rblLabel\">Art, entertainment, and recreation<\/label>\n\t\t<\/div>\n\t\t<div class=\"radioButtonLarge horizontal label-div hasValue\" style=\"\">\n\t\t\t<input value=\"other\" type=\"radio\" name=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Other_170x170.png?v=1\" alt=\"Other\" title=\"Other\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label for=\"\" class=\"rblLabel\">Other<\/label>\n\t\t<\/div>\n\t\t<span class=\"switchFilter activeRadioButtonLargeBorder\"><\/span>\n\t<\/div>\n\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-3\" role=\"tabpanel\" aria-labelledby=\"description-3-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>Selection Buttons grouped.<\/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 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\">Selection Button (Two Lines of Text)<\/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-4-tab\" href=\"#example-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-4\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-4-tab\" href=\"#description-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-4\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-4-tab\" href=\"#code-4\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-4\" 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-4\" role=\"tabpanel\" aria-labelledby=\"example-4-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\t\n\n\n\t\t<div class=\"radioButtonLarge horizontal label-div\">\n\t\t\t<input value=\"food and accommodation services\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-BUSPLN\/Food_170x170.png?v=1\" alt=\"Food and accommodation services\" title=\"Food and accommodation services\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Food and accommodation<\/label>\n\t\t<\/div>\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-4\" role=\"tabpanel\" aria-labelledby=\"description-4-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>When a Selection Button has a longer character count it will break into two lines. An example of this can be seen in Non-Disclosure Agreement and Child Medical Consent.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-4\" role=\"tabpanel\" aria-labelledby=\"code-4-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\">Selection Button (with Description)<\/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-5-tab\" href=\"#example-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"example-5\" aria-selected=\"true\">Example<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"description-5-tab\" href=\"#description-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"description-5\" aria-selected=\"false\">Description<\/a>\n        <\/li>\n        <li class=\"nav-item\">\n            <a class=\"nav-link\" id=\"code-5-tab\" href=\"#code-5\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"code-5\" 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-5\" role=\"tabpanel\" aria-labelledby=\"example-5-tab\">\n            <div class=\"row mt-1 mb-5\">\n\n\n\n<div class=\"col-12\">\t\n\n\n\t<div class=\"ansRB\">\n\t\t<div id=\"\" class=\"radioButtonLarge hasExplanatoryText selected vertical label-div focused-input\" style=\"\">\n\t\t\t<input value=\"1\" type=\"radio\" name=\"\" id=\"\" checked=\"checked\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-POA\/Ordinary.png?v=1\" alt=\"Power of Attorney - Ordinary\" title=\"Ordinary\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"_lb\" for=\"\" class=\"rblLabel\">Ordinary\n\t\t\t\t<span id=\"_exp\" class=\"rblExplanatory\">Valid until you are incapacitated<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t\t<div id=\"_wrap\" class=\"radioButtonLarge hasExplanatoryText vertical label-div\">\n\t\t\t<input value=\"2\" type=\"radio\" name=\"\" id=\"\">\n\t\t\t<span class=\"rblCircle\">\n\t\t\t\t<span class=\"rblIcon\">\n\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.lawdepot.com\/contracts\/DCSDefinitions\/Images\/LD-POA\/Durable.png?v=1\" alt=\"Power of Attorney - Durable\" title=\"Durable\">\n\t\t\t\t<\/span>\n\t\t\t<\/span>\n\t\t\t<label id=\"\" for=\"\" class=\"rblLabel\">Durable\n\t\t\t\t<span id=\"\" class=\"rblExplanatory\">Valid even if you are incapacitated<\/span>\n\t\t\t<\/label>\n\t\t<\/div>\n\t\t<span class=\"switchFilter\"><\/span>\n\t<\/div>\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-5\" role=\"tabpanel\" aria-labelledby=\"description-5-tab\">\n            <div class=\"col-12\">\n\n\n\n<p>A Selection Button can sometimes includes a description beneath it. The Non-Disclousre Agreement and Power of Attorney are examples of buttons with description text.<\/p>\n\n\n\n<\/div>\n        <\/div>\n\n\n\n<!-- Tab Code -->\n        <div class=\"tab-pane\" id=\"code-5\" role=\"tabpanel\" aria-labelledby=\"code-5-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","protected":false},"excerpt":{"rendered":"<p>Selection Buttons are a common pattern seen on the Questionnaire pages. Selection Button Example Description Code Retail Selection Button in its deselected state. &lt;button class=&#8221;largeActiveButton&#8221;&gt;Cancel [&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\/206"}],"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=206"}],"version-history":[{"count":32,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/206\/revisions"}],"predecessor-version":[{"id":1068,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/206\/revisions\/1068"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}