From 3db268193e7d29558efd923c54bdb4fbc0a5f57f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:01:04 +0000
Subject: [PATCH] deploy: c22d2578fd82fa350636dfc99d8df56d01a1bee1

---
 _state.json                     | 20 +++++++++++++++++++-
 _tokens/_all/design/icons.html  | 22 ++++++++++++++++++++++
 _tokens/dark/design/icons.html  | 22 ++++++++++++++++++++++
 _tokens/light/design/icons.html | 22 ++++++++++++++++++++++
 index.html                      |  2 +-
 svg/icons.svg                   |  2 ++
 svg/icons/keypad-clear.svg      |  1 +
 svg/icons/keypad-plus.svg       |  1 +
 8 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 svg/icons/keypad-clear.svg
 create mode 100644 svg/icons/keypad-plus.svg

diff --git a/_state.json b/_state.json
index 5ac74de..ecc529b 100644
--- a/_state.json
+++ b/_state.json
@@ -2,7 +2,7 @@
   "config": {
     "name": "BTCPay Server Design System",
     "version": "0.1.0",
-    "update": 1730099287193,
+    "update": 1730113259839,
     "logo": "/resources/design-files/btcpay-logo.svg",
     "source": {
       "components": [
@@ -1909,6 +1909,24 @@
             }
           ]
         },
+        {
+          "type": "category",
+          "name": "keypad",
+          "tokens": [
+            {
+              "type": "icon",
+              "name": "keypad-clear",
+              "variable": "keypad-clear",
+              "value": "<svg role=\"img\"><use href=\"/svg/icons.svg#keypad-clear\"/></svg>"
+            },
+            {
+              "type": "icon",
+              "name": "keypad-plus",
+              "variable": "keypad-plus",
+              "value": "<svg role=\"img\"><use href=\"/svg/icons.svg#keypad-plus\"/></svg>"
+            }
+          ]
+        },
         {
           "type": "category",
           "name": "logo",
diff --git a/_tokens/_all/design/icons.html b/_tokens/_all/design/icons.html
index 1c02779..84de85f 100644
--- a/_tokens/_all/design/icons.html
+++ b/_tokens/_all/design/icons.html
@@ -497,6 +497,28 @@ <h2 class="uie-tokens__title">forms</h2>
           </figure>
       </div>
       </section>
+      <section class="uie-tokens__category" id="keypad">
+          <h2 class="uie-tokens__title">keypad</h2>
+        
+          <div class="uie-tokens__grid">
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-clear"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-clear
+            </figcaption>
+          </figure>
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-plus"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-plus
+            </figcaption>
+          </figure>
+      </div>
+      </section>
       <section class="uie-tokens__category" id="logo">
           <h2 class="uie-tokens__title">logo</h2>
         
diff --git a/_tokens/dark/design/icons.html b/_tokens/dark/design/icons.html
index 72df383..83be896 100644
--- a/_tokens/dark/design/icons.html
+++ b/_tokens/dark/design/icons.html
@@ -497,6 +497,28 @@ <h2 class="uie-tokens__title">forms</h2>
           </figure>
       </div>
       </section>
+      <section class="uie-tokens__category" id="keypad">
+          <h2 class="uie-tokens__title">keypad</h2>
+        
+          <div class="uie-tokens__grid">
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-clear"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-clear
+            </figcaption>
+          </figure>
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-plus"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-plus
+            </figcaption>
+          </figure>
+      </div>
+      </section>
       <section class="uie-tokens__category" id="logo">
           <h2 class="uie-tokens__title">logo</h2>
         
diff --git a/_tokens/light/design/icons.html b/_tokens/light/design/icons.html
index a92130a..ed57317 100644
--- a/_tokens/light/design/icons.html
+++ b/_tokens/light/design/icons.html
@@ -497,6 +497,28 @@ <h2 class="uie-tokens__title">forms</h2>
           </figure>
       </div>
       </section>
+      <section class="uie-tokens__category" id="keypad">
+          <h2 class="uie-tokens__title">keypad</h2>
+        
+          <div class="uie-tokens__grid">
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-clear"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-clear
+            </figcaption>
+          </figure>
+          <figure class="uie-icon-token">
+            <div class="uie-icon-token__icon">
+              <svg role="img"><use href="/svg/icons.svg#keypad-plus"/></svg>
+            </div>
+            <figcaption class="uie-icon-token__name">
+              keypad-plus
+            </figcaption>
+          </figure>
+      </div>
+      </section>
       <section class="uie-tokens__category" id="logo">
           <h2 class="uie-tokens__title">logo</h2>
         
diff --git a/index.html b/index.html
index 0d6382c..00b3dd6 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <script>
       window.UIengine = {
         base: "/",
-        state: {"config":{"name":"BTCPay Server Design System","version":"0.1.0","update":1730099287193,"logo":"/resources/design-files/btcpay-logo.svg","source":{"components":["/home/runner/work/btcpayserver-design/btcpayserver-design/src/components","/home/runner/work/btcpayserver-design/btcpayserver-design/src/views"],"templates":"/home/runner/work/btcpayserver-design/btcpayserver-design/src/templates","pages":"/home/runner/work/btcpayserver-design/btcpayserver-design/pages","additionalWatches":["/home/runner/work/btcpayserver-design/btcpayserver-design/src/design"],"base":"/home/runner/work/btcpayserver-design/btcpayserver-design","configFile":"/home/runner/work/btcpayserver-design/btcpayserver-design/uiengine.config.js"},"target":"/home/runner/work/btcpayserver-design/btcpayserver-design/dist","adapters":{"html":{"module":"@uiengine/adapter-html","options":{"basedir":"./src/components","skipScaffold":false}}},"template":"patternlib.html","themes":[{"id":"light","title":"Light"},{"id":"dark","title":"Dark"}],"ui":{"lang":"en","customStylesFile":"/styles/patternlib-overrides.css","repoBaseUrl":"https://github.com/btcpayserver/btcpayserver-design/blob/master/","viewports":{"Phone":{"width":320},"Tablet":{"width":768},"Desktop":{"width":1280}},"breakpoints":{"XS":320,"S":560,"M":768,"L":960,"XL":1280},"base":"/"},"browserSync":{"open":false},"plugins":[]},"plugins":{"ui":{"js":[],"css":[],"tabs":[],"actions":[],"iframe_js":[]}},"pages":{"index":{"childIds":["design","components","resources","development"],"id":"index","title":"BTCPay Server Design System","isTitleFromHeading":true,"path":"","sourcePath":"pages","sourceFile":"pages/page.config.js","readmeFile":"pages/README.md","type":"documentation","content":"\u003ch1 id=\"btcpay-server-design-system\" tabindex=\"-1\"\u003eBTCPay Server Design System\u003c/h1\u003e\n\u003cp\u003eCodified design guidelines for the BTCPay Server webpages.\u003c/p\u003e\n\u003ch2 id=\"related-resources\" tabindex=\"-1\"\u003eRelated resources\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-design/\"\u003eRepository on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.figma.com/file/C7Xyq0FlxgFW8vaBr8ht1z/BTCPAY\"\u003eDesign Specifications on Figma\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-media\"\u003eMedia asset for BTCPay Server\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-doc\"\u003eOfficial Documentation\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e"},"components":{"childIds":[],"componentIds":["header","theme-switch","bootstrap","pills","toggle","footer"],"id":"components","title":"Components","isTitleFromHeading":true,"path":"components","sourcePath":"pages/components","sourceFile":"pages/components/page.config.js","readmeFile":"pages/components/README.md","type":"documentation","content":"\u003ch1 id=\"components\" tabindex=\"-1\"\u003eComponents\u003c/h1\u003e"},"design":{"childIds":["design/colors","design/fonts","design/icons","design/spaces","design/variables"],"id":"design","title":"Design","isTitleFromHeading":true,"path":"design","sourcePath":"pages/design","sourceFile":"pages/design/page.config.js","readmeFile":"pages/design/README.md","type":"documentation","content":"\u003ch1 id=\"design\" tabindex=\"-1\"\u003eDesign\u003c/h1\u003e"},"development":{"childIds":[],"id":"development","title":"Development","isTitleFromHeading":true,"path":"development","sourcePath":"pages/development","readmeFile":"pages/development/README.md","type":"documentation","content":"\u003ch1 id=\"development\" tabindex=\"-1\"\u003eDevelopment\u003c/h1\u003e\n\u003ch2 id=\"setup\" tabindex=\"-1\"\u003eSetup\u003c/h2\u003e\n\u003cp\u003eDependencies are managed via npm.\nOnce you have cloned \u003ca href=\"https://github.com/btcpayserver/btcpayserver-design/\"\u003ethis repo\u003c/a\u003e, you can setup the packages:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm install\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eCreate a build and rebuild on file change:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm start\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis will bring up the dev server and pattern library on \u003ca href=\"http://localhost:3000\"\u003elocalhost:3000\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"how-to-create-a-component%3F\" tabindex=\"-1\"\u003eHow to create a component?\u003c/h2\u003e\n\u003cp\u003eTo generate the basic files of a component you can use the \u003ccode\u003ecomponent\u003c/code\u003e command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine component COMPONENT_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis will also generate a default variant named after the component.\nIn case you want to directly add some variants, you can list them like so:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine component COMPONENT_ID VARIANT_1 VARIANT_2 VARIANT_3\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"how-to-create-a-variant%3F\" tabindex=\"-1\"\u003eHow to create a variant?\u003c/h2\u003e\n\u003cp\u003eA variant needs at least a file to render.\nYou create a variant by adding a file renderable by one of the configured adapters to the \u003ccode\u003evariants\u003c/code\u003e directory of a component.\u003c/p\u003e\n\u003cp\u003eTo render a variant, we also need a layout.\nThe \u003ccode\u003enpx uiengine init\u003c/code\u003e command created a basic html layout file in \u003ccode\u003esrc/templates/uiengine.html\u003c/code\u003e.\nIt includes the \u003ccode\u003e\u0026lt;!-- uiengine:content --\u0026gt;\u003c/code\u003e comment, which will be replaced with the HTML of the rendered variant.\nYou can go ahead and extend the layout to fit your needs and include the correct HTML and style and script references.\u003c/p\u003e\n\u003cp\u003eThis layout file is just there to get you started.\nFeel free to change its content and use an other adapter to fit your projects needs.\u003c/p\u003e\n\u003ch2 id=\"how-to-create-a-page%3F\" tabindex=\"-1\"\u003eHow to create a page?\u003c/h2\u003e\n\u003cp\u003eTo generate the basic files and folders of a page you can use the \u003ccode\u003epage\u003c/code\u003e command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page PAGE_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis generate a \u003ccode\u003eREADME.md\u003c/code\u003e and a \u003ccode\u003epage.config.js\u003c/code\u003e file inside the folder matching the page id in you pages source directory.\nIn case you want to directly add some pages, you can list them like so:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page PAGE_1_ID PAGE_2_ID PAGE_3_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eSay you would like to create pages for grouping your components with the \u003ca href=\"http://atomicdesign.bradfrost.com/chapter-2/\"\u003eAtomic Design Methodology\u003c/a\u003e:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page atoms molecules organisms templates pages\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"how-to-generate-the-project%3F\" tabindex=\"-1\"\u003eHow to generate the project?\u003c/h2\u003e\n\u003cp\u003eThe site can be generated with the following command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm start\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIt rebuilds files on change and spawns a server for the generated site.\u003c/p\u003e\n\u003cp\u003eUnder the hood \u003ca href=\"https://www.browsersync.io/\"\u003eBrowserSync\u003c/a\u003e is used to provide serving and watching the files.\nFor information on how to configure the server and pass additional options, see the \u003ca href=\"https://uiengine.uix.space/basics/config/#BrowserSync\"\u003econfiguration documentation\u003c/a\u003e.\u003c/p\u003e"},"resources":{"childIds":["resources/css","resources/favicon","resources/design-files","resources/supporters"],"id":"resources","title":"Resources","isTitleFromHeading":false,"path":"resources","sourcePath":"pages/resources","sourceFile":"pages/resources/page.config.js","type":"documentation"},"views":{"childIds":[],"componentIds":["kitchensink"],"id":"views","title":"Views","isTitleFromHeading":true,"path":"views","sourcePath":"pages/views","sourceFile":"pages/views/page.config.js","readmeFile":"pages/views/README.md","type":"documentation","content":"\u003ch1 id=\"views\" tabindex=\"-1\"\u003eViews\u003c/h1\u003e"},"design/colors":{"childIds":[],"tokens":[{"type":"category","name":"Brand","tokens":[{"category":"Brand","name":"Brand Primary","value":"#51b13e","variable":"--btcpay-brand-primary","type":"color"},{"category":"Brand","name":"Brand Secondary","value":"#CEDC21","variable":"--btcpay-brand-secondary","type":"color"},{"category":"Brand","name":"Brand Tertiary","value":"#1e7a44","variable":"--btcpay-brand-tertiary","type":"color"},{"category":"Brand","name":"Brand Dark","value":"#0F3B21","variable":"--btcpay-brand-dark","type":"color"}]},{"type":"category","name":"Primitives","tokens":[{"category":"Primitives","name":"White","value":"#ffffff","variable":"--btcpay-white","type":"color"},{"category":"Primitives","name":"White RGB","value":"255, 255, 255","variable":"--btcpay-white-rgb","type":"color"},{"category":"Primitives","name":"Black","value":"#000000","variable":"--btcpay-black","type":"color"},{"category":"Primitives","name":"Black RGB","value":"0, 0, 0","variable":"--btcpay-black-rgb","type":"color"}]},{"type":"category","name":"Neutral Light","tokens":[{"value":"#f8f9fa","category":"Neutral Light","name":"Neutral Light 100","variable":"--btcpay-neutral-light-100","reference":null,"type":"color"},{"value":"248,249,250","category":"Neutral Light","name":"Neutral Light 100","variable":"--btcpay-neutral-light-100-rgb","reference":null,"type":"color"},{"value":"#e9ecef","category":"Neutral Light","name":"Neutral Light 200","variable":"--btcpay-neutral-light-200","reference":null,"type":"color"},{"value":"233,236,239","category":"Neutral Light","name":"Neutral Light 200","variable":"--btcpay-neutral-light-200-rgb","reference":null,"type":"color"},{"value":"#dee2e6","category":"Neutral Light","name":"Neutral Light 300","variable":"--btcpay-neutral-light-300","reference":null,"type":"color"},{"value":"222,226,230","category":"Neutral Light","name":"Neutral Light 300","variable":"--btcpay-neutral-light-300-rgb","reference":null,"type":"color"},{"value":"#ced4da","category":"Neutral Light","name":"Neutral Light 400","variable":"--btcpay-neutral-light-400","reference":null,"type":"color"},{"value":"206,212,218","category":"Neutral Light","name":"Neutral Light 400","variable":"--btcpay-neutral-light-400-rgb","reference":null,"type":"color"},{"value":"#8f979e","category":"Neutral Light","name":"Neutral Light 500","variable":"--btcpay-neutral-light-500","reference":null,"type":"color"},{"value":"143,151,158","category":"Neutral Light","name":"Neutral Light 500","variable":"--btcpay-neutral-light-500-rgb","reference":null,"type":"color"},{"value":"#6c757d","category":"Neutral Light","name":"Neutral Light 600","variable":"--btcpay-neutral-light-600","reference":null,"type":"color"},{"value":"108,117,125","category":"Neutral Light","name":"Neutral Light 600","variable":"--btcpay-neutral-light-600-rgb","reference":null,"type":"color"},{"value":"#495057","category":"Neutral Light","name":"Neutral Light 700","variable":"--btcpay-neutral-light-700","reference":null,"type":"color"},{"value":"73,80,87","category":"Neutral Light","name":"Neutral Light 700","variable":"--btcpay-neutral-light-700-rgb","reference":null,"type":"color"},{"value":"#343a40","category":"Neutral Light","name":"Neutral Light 800","variable":"--btcpay-neutral-light-800","reference":null,"type":"color"},{"value":"52,58,64","category":"Neutral Light","name":"Neutral Light 800","variable":"--btcpay-neutral-light-800-rgb","reference":null,"type":"color"},{"value":"#292929","category":"Neutral Light","name":"Neutral Light 900","variable":"--btcpay-neutral-light-900","reference":null,"type":"color"},{"value":"41,41,41","category":"Neutral Light","name":"Neutral Light 900","variable":"--btcpay-neutral-light-900-rgb","reference":null,"type":"color"},{"value":"143,151,158","category":"Neutral Light","name":"Neutral Light RGB","variable":"--btcpay-neutral-light-rgb","type":"color"}]},{"type":"category","name":"Neutral Dark","tokens":[{"value":"#F0F6FC","category":"Neutral Dark","name":"Neutral Dark 100","variable":"--btcpay-neutral-dark-100","reference":null,"type":"color"},{"value":"240,246,252","category":"Neutral Dark","name":"Neutral Dark 100","variable":"--btcpay-neutral-dark-100-rgb","reference":null,"type":"color"},{"value":"#C9D1D9","category":"Neutral Dark","name":"Neutral Dark 200","variable":"--btcpay-neutral-dark-200","reference":null,"type":"color"},{"value":"201,209,217","category":"Neutral Dark","name":"Neutral Dark 200","variable":"--btcpay-neutral-dark-200-rgb","reference":null,"type":"color"},{"value":"#B1BAC4","category":"Neutral Dark","name":"Neutral Dark 300","variable":"--btcpay-neutral-dark-300","reference":null,"type":"color"},{"value":"177,186,196","category":"Neutral Dark","name":"Neutral Dark 300","variable":"--btcpay-neutral-dark-300-rgb","reference":null,"type":"color"},{"value":"#8B949E","category":"Neutral Dark","name":"Neutral Dark 400","variable":"--btcpay-neutral-dark-400","reference":null,"type":"color"},{"value":"139,148,158","category":"Neutral Dark","name":"Neutral Dark 400","variable":"--btcpay-neutral-dark-400-rgb","reference":null,"type":"color"},{"value":"#6E7681","category":"Neutral Dark","name":"Neutral Dark 500","variable":"--btcpay-neutral-dark-500","reference":null,"type":"color"},{"value":"110,118,129","category":"Neutral Dark","name":"Neutral Dark 500","variable":"--btcpay-neutral-dark-500-rgb","reference":null,"type":"color"},{"value":"#484F58","category":"Neutral Dark","name":"Neutral Dark 600","variable":"--btcpay-neutral-dark-600","reference":null,"type":"color"},{"value":"72,79,88","category":"Neutral Dark","name":"Neutral Dark 600","variable":"--btcpay-neutral-dark-600-rgb","reference":null,"type":"color"},{"value":"#30363D","category":"Neutral Dark","name":"Neutral Dark 700","variable":"--btcpay-neutral-dark-700","reference":null,"type":"color"},{"value":"48,54,61","category":"Neutral Dark","name":"Neutral Dark 700","variable":"--btcpay-neutral-dark-700-rgb","reference":null,"type":"color"},{"value":"#21262D","category":"Neutral Dark","name":"Neutral Dark 800","variable":"--btcpay-neutral-dark-800","reference":null,"type":"color"},{"value":"33,38,45","category":"Neutral Dark","name":"Neutral Dark 800","variable":"--btcpay-neutral-dark-800-rgb","reference":null,"type":"color"},{"value":"#161B22","category":"Neutral Dark","name":"Neutral Dark 900","variable":"--btcpay-neutral-dark-900","reference":null,"type":"color"},{"value":"22,27,34","category":"Neutral Dark","name":"Neutral Dark 900","variable":"--btcpay-neutral-dark-900-rgb","reference":null,"type":"color"},{"value":"110,118,129","category":"Neutral Dark","name":"Neutral Dark RGB","variable":"--btcpay-neutral-dark-rgb","type":"color"}]},{"type":"category","name":"Primary","tokens":[{"value":"#c7e6c1","category":"Primary","name":"Primary 100","variable":"--btcpay-primary-100","reference":null,"type":"color"},{"value":"199,230,193","category":"Primary","name":"Primary 100","variable":"--btcpay-primary-100-rgb","reference":null,"type":"color"},{"value":"#b5dead","category":"Primary","name":"Primary 200","variable":"--btcpay-primary-200","reference":null,"type":"color"},{"value":"181,222,173","category":"Primary","name":"Primary 200","variable":"--btcpay-primary-200-rgb","reference":null,"type":"color"},{"value":"#9dd392","category":"Primary","name":"Primary 300","variable":"--btcpay-primary-300","reference":null,"type":"color"},{"value":"157,211,146","category":"Primary","name":"Primary 300","variable":"--btcpay-primary-300-rgb","reference":null,"type":"color"},{"value":"#7cc46e","category":"Primary","name":"Primary 400","variable":"--btcpay-primary-400","reference":null,"type":"color"},{"value":"124,196,110","category":"Primary","name":"Primary 400","variable":"--btcpay-primary-400-rgb","reference":null,"type":"color"},{"value":"#44a431","category":"Primary","name":"Primary 500","variable":"--btcpay-primary-500","reference":null,"type":"color"},{"value":"68,164,49","category":"Primary","name":"Primary 500","variable":"--btcpay-primary-500-rgb","reference":null,"type":"color"},{"value":"#389725","category":"Primary","name":"Primary 600","variable":"--btcpay-primary-600","reference":null,"type":"color"},{"value":"56,151,37","category":"Primary","name":"Primary 600","variable":"--btcpay-primary-600-rgb","reference":null,"type":"color"},{"value":"#2e8a1b","category":"Primary","name":"Primary 700","variable":"--btcpay-primary-700","reference":null,"type":"color"},{"value":"46,138,27","category":"Primary","name":"Primary 700","variable":"--btcpay-primary-700-rgb","reference":null,"type":"color"},{"value":"#247d12","category":"Primary","name":"Primary 800","variable":"--btcpay-primary-800","reference":null,"type":"color"},{"value":"36,125,18","category":"Primary","name":"Primary 800","variable":"--btcpay-primary-800-rgb","reference":null,"type":"color"},{"value":"#1c710b","category":"Primary","name":"Primary 900","variable":"--btcpay-primary-900","reference":null,"type":"color"},{"value":"28,113,11","category":"Primary","name":"Primary 900","variable":"--btcpay-primary-900-rgb","reference":null,"type":"color"},{"value":"68,164,49","category":"Primary","name":"Primary RGB","variable":"--btcpay-primary-rgb","type":"color"}]},{"type":"category","name":"Green","tokens":[{"value":"#EEFAEB","category":"Green","name":"Green 100","variable":"--btcpay-green-100","reference":null,"type":"color"},{"value":"238,250,235","category":"Green","name":"Green 100","variable":"--btcpay-green-100-rgb","reference":null,"type":"color"},{"value":"#C7E8C0","category":"Green","name":"Green 200","variable":"--btcpay-green-200","reference":null,"type":"color"},{"value":"199,232,192","category":"Green","name":"Green 200","variable":"--btcpay-green-200-rgb","reference":null,"type":"color"},{"value":"#A0D695","category":"Green","name":"Green 300","variable":"--btcpay-green-300","reference":null,"type":"color"},{"value":"160,214,149","category":"Green","name":"Green 300","variable":"--btcpay-green-300-rgb","reference":null,"type":"color"},{"value":"#78C369","category":"Green","name":"Green 400","variable":"--btcpay-green-400","reference":null,"type":"color"},{"value":"120,195,105","category":"Green","name":"Green 400","variable":"--btcpay-green-400-rgb","reference":null,"type":"color"},{"value":"#51B13E","category":"Green","name":"Green 500","variable":"--btcpay-green-500","reference":null,"type":"color"},{"value":"81,177,62","category":"Green","name":"Green 500","variable":"--btcpay-green-500-rgb","reference":null,"type":"color"},{"value":"#419437","category":"Green","name":"Green 600","variable":"--btcpay-green-600","reference":null,"type":"color"},{"value":"65,148,55","category":"Green","name":"Green 600","variable":"--btcpay-green-600-rgb","reference":null,"type":"color"},{"value":"#307630","category":"Green","name":"Green 700","variable":"--btcpay-green-700","reference":null,"type":"color"},{"value":"48,118,48","category":"Green","name":"Green 700","variable":"--btcpay-green-700-rgb","reference":null,"type":"color"},{"value":"#205928","category":"Green","name":"Green 800","variable":"--btcpay-green-800","reference":null,"type":"color"},{"value":"32,89,40","category":"Green","name":"Green 800","variable":"--btcpay-green-800-rgb","reference":null,"type":"color"},{"value":"#0F3B21","category":"Green","name":"Green 900","variable":"--btcpay-green-900","reference":null,"type":"color"},{"value":"15,59,33","category":"Green","name":"Green 900","variable":"--btcpay-green-900-rgb","reference":null,"type":"color"},{"value":"81,177,62","category":"Green","name":"Green RGB","variable":"--btcpay-green-rgb","type":"color"}]},{"type":"category","name":"Blue","tokens":[{"value":"#b5e1e8","category":"Blue","name":"Blue 100","variable":"--btcpay-blue-100","reference":null,"type":"color"},{"value":"181,225,232","category":"Blue","name":"Blue 100","variable":"--btcpay-blue-100-rgb","reference":null,"type":"color"},{"value":"#9dd7e1","category":"Blue","name":"Blue 200","variable":"--btcpay-blue-200","reference":null,"type":"color"},{"value":"157,215,225","category":"Blue","name":"Blue 200","variable":"--btcpay-blue-200-rgb","reference":null,"type":"color"},{"value":"#7ccad7","category":"Blue","name":"Blue 300","variable":"--btcpay-blue-300","reference":null,"type":"color"},{"value":"124,202,215","category":"Blue","name":"Blue 300","variable":"--btcpay-blue-300-rgb","reference":null,"type":"color"},{"value":"#51b9c9","category":"Blue","name":"Blue 400","variable":"--btcpay-blue-400","reference":null,"type":"color"},{"value":"81,185,201","category":"Blue","name":"Blue 400","variable":"--btcpay-blue-400-rgb","reference":null,"type":"color"},{"value":"#17a2b8","category":"Blue","name":"Blue 500","variable":"--btcpay-blue-500","reference":null,"type":"color"},{"value":"23,162,184","category":"Blue","name":"Blue 500","variable":"--btcpay-blue-500-rgb","reference":null,"type":"color"},{"value":"#03899e","category":"Blue","name":"Blue 600","variable":"--btcpay-blue-600","reference":null,"type":"color"},{"value":"3,137,158","category":"Blue","name":"Blue 600","variable":"--btcpay-blue-600-rgb","reference":null,"type":"color"},{"value":"#007d91","category":"Blue","name":"Blue 700","variable":"--btcpay-blue-700","reference":null,"type":"color"},{"value":"0,125,145","category":"Blue","name":"Blue 700","variable":"--btcpay-blue-700-rgb","reference":null,"type":"color"},{"value":"#007284","category":"Blue","name":"Blue 800","variable":"--btcpay-blue-800","reference":null,"type":"color"},{"value":"0,114,132","category":"Blue","name":"Blue 800","variable":"--btcpay-blue-800-rgb","reference":null,"type":"color"},{"value":"#006778","category":"Blue","name":"Blue 900","variable":"--btcpay-blue-900","reference":null,"type":"color"},{"value":"0,103,120","category":"Blue","name":"Blue 900","variable":"--btcpay-blue-900-rgb","reference":null,"type":"color"},{"value":"23,162,184","category":"Blue","name":"Blue RGB","variable":"--btcpay-blue-rgb","type":"color"}]},{"type":"category","name":"Yellow","tokens":[{"value":"#FFFAF0","category":"Yellow","name":"Yellow 100","variable":"--btcpay-yellow-100","reference":null,"type":"color"},{"value":"255,250,240","category":"Yellow","name":"Yellow 100","variable":"--btcpay-yellow-100-rgb","reference":null,"type":"color"},{"value":"#FFF2D9","category":"Yellow","name":"Yellow 200","variable":"--btcpay-yellow-200","reference":null,"type":"color"},{"value":"255,242,217","category":"Yellow","name":"Yellow 200","variable":"--btcpay-yellow-200-rgb","reference":null,"type":"color"},{"value":"#FFE3AC","category":"Yellow","name":"Yellow 300","variable":"--btcpay-yellow-300","reference":null,"type":"color"},{"value":"255,227,172","category":"Yellow","name":"Yellow 300","variable":"--btcpay-yellow-300-rgb","reference":null,"type":"color"},{"value":"#FFCF70","category":"Yellow","name":"Yellow 400","variable":"--btcpay-yellow-400","reference":null,"type":"color"},{"value":"255,207,112","category":"Yellow","name":"Yellow 400","variable":"--btcpay-yellow-400-rgb","reference":null,"type":"color"},{"value":"#FFC043","category":"Yellow","name":"Yellow 500","variable":"--btcpay-yellow-500","reference":null,"type":"color"},{"value":"255,192,67","category":"Yellow","name":"Yellow 500","variable":"--btcpay-yellow-500-rgb","reference":null,"type":"color"},{"value":"#B57E12","category":"Yellow","name":"Yellow 600","variable":"--btcpay-yellow-600","reference":null,"type":"color"},{"value":"181,126,18","category":"Yellow","name":"Yellow 600","variable":"--btcpay-yellow-600-rgb","reference":null,"type":"color"},{"value":"#997328","category":"Yellow","name":"Yellow 700","variable":"--btcpay-yellow-700","reference":null,"type":"color"},{"value":"153,115,40","category":"Yellow","name":"Yellow 700","variable":"--btcpay-yellow-700-rgb","reference":null,"type":"color"},{"value":"#674D1B","category":"Yellow","name":"Yellow 800","variable":"--btcpay-yellow-800","reference":null,"type":"color"},{"value":"103,77,27","category":"Yellow","name":"Yellow 800","variable":"--btcpay-yellow-800-rgb","reference":null,"type":"color"},{"value":"#543D10","category":"Yellow","name":"Yellow 900","variable":"--btcpay-yellow-900","reference":null,"type":"color"},{"value":"84,61,16","category":"Yellow","name":"Yellow 900","variable":"--btcpay-yellow-900-rgb","reference":null,"type":"color"},{"value":"255,192,67","category":"Yellow","name":"Yellow RGB","variable":"--btcpay-yellow-rgb","type":"color"}]},{"type":"category","name":"Red","tokens":[{"value":"#FFEFED","category":"Red","name":"Red 100","variable":"--btcpay-red-100","reference":null,"type":"color"},{"value":"255,239,237","category":"Red","name":"Red 100","variable":"--btcpay-red-100-rgb","reference":null,"type":"color"},{"value":"#FED7D2","category":"Red","name":"Red 200","variable":"--btcpay-red-200","reference":null,"type":"color"},{"value":"254,215,210","category":"Red","name":"Red 200","variable":"--btcpay-red-200-rgb","reference":null,"type":"color"},{"value":"#F1998E","category":"Red","name":"Red 300","variable":"--btcpay-red-300","reference":null,"type":"color"},{"value":"241,153,142","category":"Red","name":"Red 300","variable":"--btcpay-red-300-rgb","reference":null,"type":"color"},{"value":"#E85C4A","category":"Red","name":"Red 400","variable":"--btcpay-red-400","reference":null,"type":"color"},{"value":"232,92,74","category":"Red","name":"Red 400","variable":"--btcpay-red-400-rgb","reference":null,"type":"color"},{"value":"#E11900","category":"Red","name":"Red 500","variable":"--btcpay-red-500","reference":null,"type":"color"},{"value":"225,25,0","category":"Red","name":"Red 500","variable":"--btcpay-red-500-rgb","reference":null,"type":"color"},{"value":"#AB1300","category":"Red","name":"Red 600","variable":"--btcpay-red-600","reference":null,"type":"color"},{"value":"171,19,0","category":"Red","name":"Red 600","variable":"--btcpay-red-600-rgb","reference":null,"type":"color"},{"value":"#870F00","category":"Red","name":"Red 700","variable":"--btcpay-red-700","reference":null,"type":"color"},{"value":"135,15,0","category":"Red","name":"Red 700","variable":"--btcpay-red-700-rgb","reference":null,"type":"color"},{"value":"#5A0A00","category":"Red","name":"Red 800","variable":"--btcpay-red-800","reference":null,"type":"color"},{"value":"90,10,0","category":"Red","name":"Red 800","variable":"--btcpay-red-800-rgb","reference":null,"type":"color"},{"value":"#420105","category":"Red","name":"Red 900","variable":"--btcpay-red-900","reference":null,"type":"color"},{"value":"66,1,5","category":"Red","name":"Red 900","variable":"--btcpay-red-900-rgb","reference":null,"type":"color"},{"value":"225,25,0","category":"Red","name":"Red RGB","variable":"--btcpay-red-rgb","type":"color"}]}],"id":"design/colors","title":"Colors","isTitleFromHeading":true,"path":"design/colors","sourcePath":"pages/design/colors","sourceFile":"pages/design/colors/page.config.js","readmeFile":"pages/design/colors/README.md","type":"tokens","content":"\u003ch1 id=\"colors\" tabindex=\"-1\"\u003eColors\u003c/h1\u003e"},"design/fonts":{"childIds":[],"tokens":[{"type":"category","name":"Font sizes","tokens":[{"name":"XS","value":"10px","variable":"--btcpay-font-size-xs"},{"name":"S","value":"12px","variable":"--btcpay-font-size-s"},{"name":"M","value":"14px","variable":"--btcpay-font-size-m"},{"name":"L","value":"20px","variable":"--btcpay-font-size-l"},{"name":"XL","value":"28px","variable":"--btcpay-font-size-xl"},{"name":"XXL","value":"36px","variable":"--btcpay-font-size-xxl"}]},{"type":"category","name":"Font weights","tokens":[{"name":"Regular","value":400,"variable":"--btcpay-font-weight-normal"},{"name":"Semibold","value":600,"variable":"--btcpay-font-weight-semibold"},{"name":"Bold","value":700,"variable":"--btcpay-font-weight-bold"}]},{"type":"category","name":"Font families","tokens":[{"type":"category","name":"Base","tokens":[{"type":"font","fontweight":"Regular / 400","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 400; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Semibold / 600","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 600; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Bold / 700","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 700; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"}]},{"type":"category","name":"Monospace","tokens":[{"type":"font","fontweight":"Regular / 400","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 400; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Semibold / 600","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 600; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Bold / 700","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 700; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"}]}]}],"id":"design/fonts","title":"Fonts","isTitleFromHeading":true,"path":"design/fonts","sourcePath":"pages/design/fonts","sourceFile":"pages/design/fonts/page.config.js","readmeFile":"pages/design/fonts/README.md","type":"tokens","content":"\u003ch1 id=\"fonts\" tabindex=\"-1\"\u003eFonts\u003c/h1\u003e\n\u003cp\u003eThe different fonts can be use via the combination of the CSS properties \u003ccode\u003efont-family\u003c/code\u003e and \u003ccode\u003efont-weight\u003c/code\u003e.\u003c/p\u003e"},"design/icons":{"childIds":[],"title":"Icons","tokens":[{"type":"category","name":"actions","tokens":[{"type":"icon","name":"actions-add","variable":"actions-add","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-add\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-archive","variable":"actions-archive","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-archive\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-comment","variable":"actions-comment","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-comment\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-copy","variable":"actions-copy","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-copy\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-download","variable":"actions-download","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-download\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-drag","variable":"actions-drag","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-drag\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-email","variable":"actions-email","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-email\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-hide","variable":"actions-hide","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-hide\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-refresh","variable":"actions-refresh","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-refresh\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-remove","variable":"actions-remove","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-remove\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-search","variable":"actions-search","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-search\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-send","variable":"actions-send","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-send\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-show","variable":"actions-show","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-show\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-alpha-asc","variable":"actions-sort-alpha-asc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-alpha-asc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-alpha-desc","variable":"actions-sort-alpha-desc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-alpha-desc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-asc-alt","variable":"actions-sort-asc-alt","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-asc-alt\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-asc","variable":"actions-sort-asc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-asc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-desc-alt","variable":"actions-sort-desc-alt","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-desc-alt\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-desc","variable":"actions-sort-desc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-desc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort","variable":"actions-sort","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-trash","variable":"actions-trash","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-trash\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"general","tokens":[{"type":"icon","name":"api","variable":"api","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#api\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"back","variable":"back","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#back\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"block","variable":"block","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#block\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"calendar","variable":"calendar","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#calendar\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkmark","variable":"checkmark","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkmark\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"close","variable":"close","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#close\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"cross","variable":"cross","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#cross\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"docs","variable":"docs","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#docs\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"donate","variable":"donate","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#donate\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"done","variable":"done","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#done\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"dots","variable":"dots","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#dots\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"info","variable":"info","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#info\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"key","variable":"key","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#key\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lightning-node","variable":"lightning-node","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lightning-node\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lightning","variable":"lightning","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lightning\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lock","variable":"lock","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lock\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"minus","variable":"minus","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#minus\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"plus","variable":"plus","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#plus\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"qr-code","variable":"qr-code","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#qr-code\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"scan-qr","variable":"scan-qr","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#scan-qr\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"settings","variable":"settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"time","variable":"time","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#time\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"warning","variable":"warning","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#warning\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"caret","tokens":[{"type":"icon","name":"caret-down","variable":"caret-down","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-left","variable":"caret-left","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-left\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-right","variable":"caret-right","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-up","variable":"caret-up","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-up\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"checkout","tokens":[{"type":"icon","name":"checkout-complete","variable":"checkout-complete","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-complete\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkout-expired","variable":"checkout-expired","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-expired\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkout-sent","variable":"checkout-sent","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-sent\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"forms","tokens":[{"type":"icon","name":"forms-checkbox","variable":"forms-checkbox","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-checkbox\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-date","variable":"forms-date","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-date\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-number","variable":"forms-number","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-number\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-select","variable":"forms-select","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-select\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-text","variable":"forms-text","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-text\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"logo","tokens":[{"type":"icon","name":"logo-btcpay","variable":"logo-btcpay","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-btcpay\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-lightningterminal","variable":"logo-lightningterminal","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-lightningterminal\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-rtl","variable":"logo-rtl","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-rtl\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-shopify","variable":"logo-shopify","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-shopify\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-thunderhub","variable":"logo-thunderhub","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-thunderhub\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-tor","variable":"logo-tor","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-tor\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"nav","tokens":[{"type":"icon","name":"nav-account","variable":"nav-account","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-account\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-contact","variable":"nav-contact","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-contact\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-crowdfund","variable":"nav-crowdfund","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-crowdfund\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-dashboard","variable":"nav-dashboard","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-dashboard\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-explore","variable":"nav-explore","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-explore\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-invoice","variable":"nav-invoice","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-invoice\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-invoices","variable":"nav-invoices","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-invoices\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-keypad","variable":"nav-keypad","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-keypad\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-lightning-address","variable":"nav-lightning-address","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-lightning-address\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-menu","variable":"nav-menu","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-menu\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-mobile-menu","variable":"nav-mobile-menu","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-mobile-menu\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-notifications","variable":"nav-notifications","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-notifications\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pay-button","variable":"nav-pay-button","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pay-button\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-payment-requests","variable":"nav-payment-requests","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-payment-requests\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-payouts","variable":"nav-payouts","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-payouts\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugin","variable":"nav-plugin","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugin\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugins-explore","variable":"nav-plugins-explore","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugins-explore\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugins-manage","variable":"nav-plugins-manage","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugins-manage\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pointofsale","variable":"nav-pointofsale","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pointofsale\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-products","variable":"nav-products","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-products\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pull-payments","variable":"nav-pull-payments","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pull-payments\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-reporting","variable":"nav-reporting","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-reporting\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-server-settings","variable":"nav-server-settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-server-settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-store-settings","variable":"nav-store-settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-store-settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-store","variable":"nav-store","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-store\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-transactions","variable":"nav-transactions","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-transactions\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"notifications","tokens":[{"type":"icon","name":"notifications-account","variable":"notifications-account","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-account\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-invoice-failure","variable":"notifications-invoice-failure","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-invoice-failure\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-invoice-settled","variable":"notifications-invoice-settled","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-invoice-settled\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-new-version","variable":"notifications-new-version","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-new-version\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-payout-approved","variable":"notifications-payout-approved","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-payout-approved\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-payout","variable":"notifications-payout","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-payout\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-plugin-disabled","variable":"notifications-plugin-disabled","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-plugin-disabled\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-plugin-released","variable":"notifications-plugin-released","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-plugin-released\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"payment","tokens":[{"type":"icon","name":"payment-receive","variable":"payment-receive","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#payment-receive\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"payment-send","variable":"payment-send","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#payment-send\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"pos","tokens":[{"type":"icon","name":"pos-cart","variable":"pos-cart","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-cart\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-light","variable":"pos-light","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-light\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-print","variable":"pos-print","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-print\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-static","variable":"pos-static","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-static\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"review","tokens":[{"type":"icon","name":"review-empty","variable":"review-empty","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-empty\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"review-full","variable":"review-full","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-full\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"review-half","variable":"review-half","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-half\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"social","tokens":[{"type":"icon","name":"social-github","variable":"social-github","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-github\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-mattermost","variable":"social-mattermost","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-mattermost\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-nostr","variable":"social-nostr","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-nostr\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-telegram","variable":"social-telegram","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-telegram\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-twitter","variable":"social-twitter","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-twitter\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"themes","tokens":[{"type":"icon","name":"themes-dark","variable":"themes-dark","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-dark\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"themes-light","variable":"themes-light","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-light\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"themes-system","variable":"themes-system","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-system\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"wallet","tokens":[{"type":"icon","name":"wallet-existing","variable":"wallet-existing","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-existing\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-file","variable":"wallet-file","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-file\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-hardware","variable":"wallet-hardware","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-hardware\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-hot","variable":"wallet-hot","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-hot\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-new","variable":"wallet-new","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-new\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-seed","variable":"wallet-seed","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-seed\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-wallet","variable":"wallet-wallet","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-wallet\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-watchonly","variable":"wallet-watchonly","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-watchonly\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-xpub","variable":"wallet-xpub","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-xpub\"/\u003e\u003c/svg\u003e"}]}],"id":"design/icons","path":"design/icons","sourcePath":"pages/design/icons","sourceFile":"pages/design/icons/page.config.js","readmeFile":"pages/design/icons/README.md","type":"tokens","content":""},"design/spaces":{"childIds":[],"tokens":[{"type":"size","name":"XS","value":"4px","variable":"--btcpay-space-xs"},{"type":"size","name":"S","value":"8px","variable":"--btcpay-space-s"},{"type":"size","name":"M","value":"16px","variable":"--btcpay-space-m"},{"type":"size","name":"L","value":"32px","variable":"--btcpay-space-l"},{"type":"size","name":"XL","value":"64px","variable":"--btcpay-space-xl"},{"type":"size","name":"XXL","value":"80px","variable":"--btcpay-space-xxl"}],"id":"design/spaces","title":"Spaces","isTitleFromHeading":true,"path":"design/spaces","sourcePath":"pages/design/spaces","sourceFile":"pages/design/spaces/page.config.js","readmeFile":"pages/design/spaces/README.md","type":"tokens","content":"\u003ch1 id=\"spaces\" tabindex=\"-1\"\u003eSpaces\u003c/h1\u003e\n\u003cp\u003eThe spacings should be used via the CSS custom properties:\u003c/p\u003e\n\u003cpre class=\"hljs lang-css\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-selector-class\"\u003e.my-component\u003c/span\u003e {\n  \u003cspan class=\"hljs-attribute\"\u003emargin-left\u003c/span\u003e: \u003cspan class=\"hljs-built_in\"\u003evar\u003c/span\u003e(--btcpay-space-m);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIn addition to that there are also utility classes like \u003ccode\u003ebtcpay-space-x\u003c/code\u003e, which apply the space as \u003ccode\u003emargin-bottom\u003c/code\u003e:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ediv\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003eclass\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;btcpay-space-x\u0026quot;\u003c/span\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ediv\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e"},"design/variables":{"childIds":[],"tokens":[{"type":"category","name":"Borders","tokens":[{"category":"Borders","name":"Border Radius","value":".25rem","variable":"--btcpay-border-radius","type":"border-radius"},{"category":"Borders","name":"Border Radius L","value":".5rem","variable":"--btcpay-border-radius-l","type":"border-radius"},{"category":"Borders","name":"Border Radius XL","value":"1rem","variable":"--btcpay-border-radius-xl","type":"border-radius"},{"category":"Borders","name":"Border Radius XXL","value":"1.5rem","variable":"--btcpay-border-radius-xxl","type":"border-radius"}]},{"type":"category","name":"Transition","tokens":[{"category":"Transition","name":"Transition fast","value":".2s","variable":"--btcpay-transition-duration-fast"},{"category":"Transition","name":"Transition default","value":".3s","variable":"--btcpay-transition-duration-default"},{"category":"Transition","name":"Transition slow","value":".5s","variable":"--btcpay-transition-duration-slow"}]}],"id":"design/variables","title":"Variables","isTitleFromHeading":true,"path":"design/variables","sourcePath":"pages/design/variables","sourceFile":"pages/design/variables/page.config.js","readmeFile":"pages/design/variables/README.md","type":"tokens","content":"\u003ch1 id=\"variables\" tabindex=\"-1\"\u003eVariables\u003c/h1\u003e"},"resources/css":{"childIds":[],"id":"resources/css","title":"CSS","isTitleFromHeading":true,"path":"resources/css","sourcePath":"pages/resources/css","readmeFile":"pages/resources/css/README.md","type":"documentation","content":"\u003ch1 id=\"css\" tabindex=\"-1\"\u003eCSS\u003c/h1\u003e\n\u003cp\u003eTo keep the different apps and websites consistent, we offer these stylesheets you should use to build upon.\u003c/p\u003e\n\u003cp\u003eYou can download the CSS files using the references below and copy them to the styles folder of your project.\u003c/p\u003e\n\u003cp\u003eThen use this HTML snippet inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section to integrate the stylesheets you want to use:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-variables.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-bootstrap.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-main.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"variables\" tabindex=\"-1\"\u003eVariables\u003c/h2\u003e\n\u003cp\u003eThe codified version of what you find in the design section:\nThis stylesheet does not do anything on its own, but gives you access to the design variables via \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\"\u003eCSS Custom Properties\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThis file should be the first to include, as every other of the following resources uses the variables it defines.\u003c/p\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-variables.css\"\u003ebtcpayserver-variables.css\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"main-styles\" tabindex=\"-1\"\u003eMain styles\u003c/h2\u003e\n\u003cp\u003eThe most basic set of CSS styles we can share across the different websites.\nThey include the font references and setting for the light/dark color themes.\u003c/p\u003e\n\u003cp\u003eThe general approach regarding the themes is:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eLight mode is the default\u003c/li\u003e\n\u003cli\u003eIf the browser supports the \u003ca href=\"https://web.dev/prefers-color-scheme/\"\u003eprefers-color-scheme media query\u003c/a\u003e, we use the users preference\u003c/li\u003e\n\u003cli\u003eSupport an \u003ca href=\"/components/theme-switch/\"\u003eexplicit setting\u003c/a\u003e saved in the browsers \u003ccode\u003elocalStorage\u003c/code\u003e, that the user can change via a switch\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-main.css\"\u003ebtcpayserver-main.css\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"bootstrap\" tabindex=\"-1\"\u003eBootstrap\u003c/h2\u003e\n\u003cp\u003eThis is our forked version of \u003ca href=\"https://getbootstrap.com/\"\u003eBootstrap\u003c/a\u003e.\nIncluding this is optional and only required if you want to build upon what Bootstrap offers.\u003c/p\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-bootstrap.css\"\u003ebtcpayserver-bootstrap.css\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"why-do-we-use-a-fork%3F\" tabindex=\"-1\"\u003eWhy do we use a fork?\u003c/h3\u003e\n\u003cp\u003eBootstrap v5 unfortunately doesn’t fully support CSS Custom Properties (\u003ca href=\"https://github.com/twbs/bootstrap/commit/ac58c25dc8b65928ac817b8a2bf7c0e46a58de97\"\u003eyet\u003c/a\u003e), but that is what we need for our theming approach.\nSo the idea was to maintain this fork at a central place and use it as our custom version.\u003c/p\u003e\n\u003ch2 id=\"old-themes\" tabindex=\"-1\"\u003eOld themes\u003c/h2\u003e\n\u003cp\u003eWe have deprecated these previous themes, but keep them here for reference:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/styles/btcpayserver-theme-classic.css\"\u003eClassic\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/styles/btcpayserver-theme-casa.css\"\u003eCasa\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e"},"resources/design-files":{"childIds":[],"id":"resources/design-files","title":"Design files","isTitleFromHeading":true,"path":"resources/design-files","sourcePath":"pages/resources/design-files","readmeFile":"pages/resources/design-files/README.md","type":"documentation","content":"\u003ch1 id=\"design-files\" tabindex=\"-1\"\u003eDesign files\u003c/h1\u003e\n\u003ch2 id=\"color-palette\" tabindex=\"-1\"\u003eColor Palette\u003c/h2\u003e\n\u003cp\u003eYou can \u003ca href=\"./btcpay.gpl\"\u003edownload the color palette for GIMP/Inkscape\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"logo\" tabindex=\"-1\"\u003eLogo\u003c/h2\u003e\n\u003cp\u003eYou can \u003ca href=\"./btcpay-logo.ai\"\u003edownload the logo for Adobe Illustrator\u003c/a\u003e.\u003c/p\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eImage\u003c/th\u003e\n\u003cth\u003eDownloads\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo-black-txt.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo-black-txt.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo-black-txt.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo-white-txt.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo-white-txt.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo-white-txt.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003cstyle\u003e\n  table img { height: 4em !important; margin: .2em 1em !important; display: block !important; }\n  table td { vertical-align: middle !important; }\n  table td:first-child { background: var(--uie-color-bg-medium) !important; }\n\u003c/style\u003e\n\u003ch2 id=\"further-resources\" tabindex=\"-1\"\u003eFurther resources\u003c/h2\u003e\n\u003cp\u003eAlso see the \u003ca href=\"https://github.com/btcpayserver/btcpayserver-media\"\u003emedia asset repository for BTCPay Server\u003c/a\u003e.\u003c/p\u003e","files":["/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-icon.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-black-txt.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-black-txt.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-white-txt.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-white-txt.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.ai","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay.gpl"]},"resources/favicon":{"childIds":[],"id":"resources/favicon","title":"Favicon","isTitleFromHeading":true,"path":"resources/favicon","sourcePath":"pages/resources/favicon","readmeFile":"pages/resources/favicon/README.md","type":"documentation","content":"\u003ch1 id=\"favicon\" tabindex=\"-1\"\u003eFavicon\u003c/h1\u003e\n\u003cp\u003eYou can \u003ca href=\"./favicon.zip\"\u003edownload the favicon files\u003c/a\u003e and copy them to the root folder of your project.\u003c/p\u003e\n\u003cp\u003eThen use this HTML snippet inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section to integrate the favicon:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;180x180\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;image/png\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;32x32\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/favicon-32x32.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;image/png\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;16x16\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/favicon-16x16.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;manifest\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/site.webmanifest\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;mask-icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/safari-pinned-tab.svg\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ecolor\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#51b13e\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;msapplication-TileColor\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003econtent\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#0f3b21\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;theme-color\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003econtent\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#ffffff\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e","files":["/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/favicon/favicon.zip"]},"resources/supporters":{"childIds":[],"title":"Supporters","tokens":[{"type":"icon","name":"bailliegifford","variable":"bailliegifford","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#bailliegifford\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"coincards","variable":"coincards","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#coincards\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"esc","variable":"esc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#esc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"hrf","variable":"hrf","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#hrf\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"ivpn","variable":"ivpn","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#ivpn\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lunanode","variable":"lunanode","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#lunanode\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"opensats","variable":"opensats","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#opensats\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"spiral","variable":"spiral","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#spiral\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"strike","variable":"strike","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#strike\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"walletofsatoshi","variable":"walletofsatoshi","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#walletofsatoshi\"/\u003e\u003c/svg\u003e"}],"id":"resources/supporters","path":"resources/supporters","sourcePath":"pages/resources/supporters","sourceFile":"pages/resources/supporters/page.config.js","readmeFile":"pages/resources/supporters/README.md","type":"tokens","content":"\u003cp\u003eThe BTCPay Server Project is proudly supported by these entities through the BTCPay Server Foundation\u003c/p\u003e"}},"components":{"bootstrap":{"id":"bootstrap","title":"Bootstrap v5","isTitleFromHeading":true,"content":"\u003ch1 id=\"bootstrap-v5\" tabindex=\"-1\"\u003eBootstrap v5\u003c/h1\u003e\n\u003cp\u003eThis is a \u003ca href=\"https://getbootstrap.com/docs/\"\u003eBootstrap\u003c/a\u003e kitchensink page that showcases everything and all together.\nIt is intended to be used as a quick overview/reference and to check the themes.\u003c/p\u003e","variants":[{"file":"typography.html","id":"bootstrap/typography.html-1","componentId":"bootstrap","title":"Typography","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"display-1\"\u003eDisplay 1\u003c/p\u003e\n\u003cp class=\"display-2\"\u003eDisplay 2\u003c/p\u003e\n\u003cp class=\"display-3\"\u003eDisplay 3\u003c/p\u003e\n\u003cp class=\"display-4\"\u003eDisplay 4\u003c/p\u003e\n\u003cp class=\"display-5\"\u003eDisplay 5\u003c/p\u003e\n\u003cp class=\"display-6\"\u003eDisplay 6\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"h1\"\u003eHeading 1\u003c/p\u003e\n\u003cp class=\"h2\"\u003eHeading 2\u003c/p\u003e\n\u003cp class=\"h3\"\u003eHeading 3\u003c/p\u003e\n\u003cp class=\"h4\"\u003eHeading 4\u003c/p\u003e\n\u003cp class=\"h5\"\u003eHeading 5\u003c/p\u003e\n\u003cp class=\"h6\"\u003eHeading 6\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"lead\"\u003e\n  This is a lead paragraph. It stands out from regular paragraphs.\n\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp\u003eYou can \u003ca href=\"#\"\u003elink\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eYou can use the mark tag to \u003cmark\u003ehighlight\u003c/mark\u003e text.\u003c/p\u003e\n\u003cp\u003e\u003cdel\u003eThis line of text is meant to be treated as deleted text.\u003c/del\u003e\u003c/p\u003e\n\u003cp\u003e\u003cs\u003eThis line of text is meant to be treated as no longer accurate.\u003c/s\u003e\u003c/p\u003e\n\u003cp\u003e\u003cins\u003eThis line of text is meant to be treated as an addition to the document.\u003c/ins\u003e\u003c/p\u003e\n\u003cp\u003e\u003cu\u003eThis line of text will render as underlined.\u003c/u\u003e\u003c/p\u003e\n\u003cp\u003e\u003csmall\u003eThis line of text is meant to be treated as fine print.\u003c/small\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThis line rendered as bold text.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis line rendered as italicized text.\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cblockquote class=\"blockquote\"\u003e\n  \u003cp\u003eA well-known quote, contained in a blockquote element.\u003c/p\u003e\n  \u003cfooter class=\"blockquote-footer\"\u003eSomeone famous in \u003ccite title=\"Source Title\"\u003eSource Title\u003c/cite\u003e\u003c/footer\u003e\n\u003c/blockquote\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cul class=\"list-unstyled\"\u003e\n  \u003cli\u003eThis is a list.\u003c/li\u003e\n  \u003cli\u003eIt appears completely unstyled.\u003c/li\u003e\n  \u003cli\u003eStructurally, it's still a list.\u003c/li\u003e\n  \u003cli\u003eHowever, this style only applies to immediate child elements.\u003c/li\u003e\n  \u003cli\u003eNested lists:\n    \u003cul\u003e\n      \u003cli\u003eare unaffected by this style\u003c/li\u003e\n      \u003cli\u003ewill still show a bullet\u003c/li\u003e\n      \u003cli\u003eand have appropriate left margin\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eThis may still come in handy in some situations.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cul class=\"list-inline\"\u003e\n  \u003cli class=\"list-inline-item\"\u003eThis is a list item.\u003c/li\u003e\n  \u003cli class=\"list-inline-item\"\u003eAnd another one.\u003c/li\u003e\n  \u003cli class=\"list-inline-item\"\u003eBut they're displayed inline.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e"},{"file":"images.html","id":"bootstrap/images.html-2","componentId":"bootstrap","title":"Images","extension":"html","raw":"\u003carticle class=\"my-3\" id=\"images\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eImages\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/images/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg img-fluid\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Responsive image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eResponsive image\u003c/text\u003e\u003c/svg\u003e\n\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003csvg class=\"bd-placeholder-img img-thumbnail\" width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003eA generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003e200x200\u003c/text\u003e\u003c/svg\u003e\n\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"figures\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eFigures\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/figures/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cfigure class=\"figure\"\u003e\n      \u003csvg class=\"bd-placeholder-img figure-img img-fluid rounded\" width=\"400\" height=\"300\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: 400x300\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003e400x300\u003c/text\u003e\u003c/svg\u003e\n\n      \u003cfigcaption class=\"figure-caption\"\u003eA caption for the above image.\u003c/figcaption\u003e\n    \u003c/figure\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e"},{"file":"tables.html","id":"bootstrap/tables.html-3","componentId":"bootstrap","title":"Tables","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-dark table-borderless\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-hover\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003eClass\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHeading\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHeading\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003eDefault\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n\n    \u003ctr class=\"table-primary\"\u003e\n      \u003cth scope=\"row\"\u003ePrimary\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-secondary\"\u003e\n      \u003cth scope=\"row\"\u003eSecondary\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-success\"\u003e\n      \u003cth scope=\"row\"\u003eSuccess\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-danger\"\u003e\n      \u003cth scope=\"row\"\u003eDanger\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-warning\"\u003e\n      \u003cth scope=\"row\"\u003eWarning\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-info\"\u003e\n      \u003cth scope=\"row\"\u003eInfo\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-light\"\u003e\n      \u003cth scope=\"row\"\u003eLight\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-dark\"\u003e\n      \u003cth scope=\"row\"\u003eDark\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-sm table-bordered\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e"},{"file":"forms.html","id":"bootstrap/forms.html-4","componentId":"bootstrap","title":"Forms","extension":"html","raw":"\u003carticle class=\"my-3\" id=\"overview\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eOverview\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/overview/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"exampleInputEmail1\" class=\"form-label\"\u003eEmail address\u003c/label\u003e\n        \u003cinput type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\"\u003e\n        \u003cdiv id=\"emailHelp\" class=\"form-text\"\u003eWe'll never share your email with anyone else.\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"exampleInputPassword1\" class=\"form-label\"\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3 form-check\"\u003e\n        \u003cinput type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"exampleCheck1\"\u003eCheck me out\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"form-label\" data-required=\"\" for=\"DefaultCurrency\"\u003eDefault currency\u003c/label\u003e\n        \u003cinput class=\"form-control\" style=\"max-width:12.5ch;\" type=\"text\" data-val=\"true\"\n          data-val-maxlength=\"The field Default currency must be a string or array type with a maximum length of '10'.\"\n          data-val-maxlength-max=\"10\" data-val-required=\"The Default currency field is required.\" id=\"DefaultCurrency\"\n          maxlength=\"10\" name=\"DefaultCurrency\" value=\"USD\" list=\"currency-selection-suggestion\"\u003e\u003cdatalist\n          id=\"currency-selection-suggestion\"\u003e\n          \u003coption value=\"BTC\"\u003e\u003c/option\u003e\n          \u003coption value=\"SATS\"\u003e\u003c/option\u003e\n          \u003coption value=\"USD\"\u003e\u003c/option\u003e\n          \u003coption value=\"EUR\"\u003e\u003c/option\u003e\n          \u003coption value=\"JPY\"\u003e\u003c/option\u003e\n        \u003c/datalist\u003e\n        \u003cspan class=\"text-danger field-validation-valid\" data-valmsg-for=\"DefaultCurrency\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cfieldset class=\"mb-3\"\u003e\n        \u003clegend class=\"h3 my-3\"\u003eRadios buttons\u003c/legend\u003e\n        \u003cdiv class=\"form-check\"\u003e\n          \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"exampleRadio1\"\u003e\n          \u003clabel class=\"form-check-label\" for=\"exampleRadio1\"\u003eDefault radio\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3 form-check\"\u003e\n          \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"exampleRadio2\"\u003e\n          \u003clabel class=\"form-check-label\" for=\"exampleRadio2\"\u003eAnother radio\u003c/label\u003e\n        \u003c/div\u003e\n      \u003c/fieldset\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"customFile\"\u003eUpload\u003c/label\u003e\n        \u003cinput type=\"file\" class=\"form-control\" id=\"customFile\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3 form-check form-switch\"\u003e\n        \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\" checked\u003e\n        \u003clabel class=\"form-check-label\" for=\"flexSwitchCheckChecked\"\u003eChecked switch checkbox input\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"customRange3\" class=\"form-label\"\u003eExample range\u003c/label\u003e\n        \u003cinput type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" step=\"0.5\" id=\"customRange3\"\u003e\n      \u003c/div\u003e\n      \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"disabled-forms\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eDisabled forms\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cfieldset disabled aria-label=\"Disabled fieldset example\"\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledTextInput\" class=\"form-label\"\u003eDisabled input\u003c/label\u003e\n          \u003cinput type=\"text\" id=\"disabledTextInput\" class=\"form-control\" placeholder=\"Disabled input\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledSelect\" class=\"form-label\"\u003eDisabled select menu\u003c/label\u003e\n          \u003cselect id=\"disabledSelect\" class=\"form-select\"\u003e\n            \u003coption\u003eDisabled select\u003c/option\u003e\n          \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003cdiv class=\"form-check\"\u003e\n            \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"disabledFieldsetCheck\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledFieldsetCheck\"\u003e\n              Can't check this\n            \u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cfieldset class=\"mb-3\"\u003e\n          \u003clegend class=\"h3 my-3\"\u003eDisabled radios buttons\u003c/legend\u003e\n          \u003cdiv class=\"form-check\"\u003e\n            \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"disabledRadio1\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledRadio1\"\u003eDisabled radio\u003c/label\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"mb-3 form-check\"\u003e\n            \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"disabledRadio2\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledRadio2\"\u003eAnother radio\u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/fieldset\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel class=\"form-label\" for=\"disabledCustomFile\"\u003eUpload\u003c/label\u003e\n          \u003cinput type=\"file\" class=\"form-control\" id=\"disabledCustomFile\" disabled\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3 form-check form-switch\"\u003e\n          \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"disabledSwitchCheckChecked\" checked disabled\u003e\n          \u003clabel class=\"form-check-label\" for=\"disabledSwitchCheckChecked\"\u003eDisabled checked switch checkbox input\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledRange\" class=\"form-label\"\u003eDisabled range\u003c/label\u003e\n          \u003cinput type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" step=\"0.5\" id=\"disabledRange\"\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e\n      \u003c/fieldset\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"sizing\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eSizing\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/form-control/#sizing\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput class=\"form-control form-control-lg\" type=\"text\" placeholder=\".form-control-lg\" aria-label=\".form-control-lg example\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cselect class=\"form-select form-select-lg mb-3\" aria-label=\".form-select-lg example\"\u003e\n        \u003coption selected\u003eOpen this select menu\u003c/option\u003e\n        \u003coption value=\"1\"\u003eOne\u003c/option\u003e\n        \u003coption value=\"2\"\u003eTwo\u003c/option\u003e\n        \u003coption value=\"3\"\u003eThree\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput type=\"file\" class=\"form-control form-control-lg\" aria-label=\"Large file input example\"\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput class=\"form-control form-control-sm\" type=\"text\" placeholder=\".form-control-sm\" aria-label=\".form-control-sm example\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cselect class=\"form-select form-select-sm\" aria-label=\".form-select-sm example\"\u003e\n        \u003coption selected\u003eOpen this select menu\u003c/option\u003e\n        \u003coption value=\"1\"\u003eOne\u003c/option\u003e\n        \u003coption value=\"2\"\u003eTwo\u003c/option\u003e\n        \u003coption value=\"3\"\u003eThree\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput type=\"file\" class=\"form-control form-control-sm\" aria-label=\"Small file input example\"\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"input-group\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eInput group\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/input-group/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon1\"\u003e@\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Username\" aria-label=\"Username\" aria-describedby=\"basic-addon1\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Recipient's username\" aria-label=\"Recipient's username\" aria-describedby=\"basic-addon2\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon2\"\u003e@example.com\u003c/span\u003e\n    \u003c/div\u003e\n    \u003clabel for=\"basic-url\" class=\"form-label\"\u003eYour vanity URL\u003c/label\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon3\"\u003ehttps://example.com/users/\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" id=\"basic-url\" aria-describedby=\"basic-addon3\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\"\u003e$\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" aria-label=\"Amount (to the nearest dollar)\"\u003e\n      \u003cspan class=\"input-group-text\"\u003e.00\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group\"\u003e\n      \u003cspan class=\"input-group-text\"\u003eWith textarea\u003c/span\u003e\n      \u003ctextarea class=\"form-control\" aria-label=\"With textarea\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"floating-labels\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eFloating labels\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/floating-labels/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cdiv class=\"form-floating mb-3\"\u003e\n        \u003cinput type=\"email\" class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\"\u003e\n        \u003clabel for=\"floatingInput\"\u003eEmail address\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-floating\"\u003e\n        \u003cinput type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\"\u003e\n        \u003clabel for=\"floatingPassword\"\u003ePassword\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"validation\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eValidation\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/validation/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform class=\"row g-3\"\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServer01\" class=\"form-label\"\u003eFirst name\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-valid\" id=\"validationServer01\" value=\"Mark\" required\u003e\n        \u003cdiv class=\"valid-feedback\"\u003e\n          Looks good!\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServer02\" class=\"form-label\"\u003eLast name\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-valid\" id=\"validationServer02\" value=\"Otto\" required\u003e\n        \u003cdiv class=\"valid-feedback\"\u003e\n          Looks good!\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServerUsername\" class=\"form-label\"\u003eUsername\u003c/label\u003e\n        \u003cdiv class=\"input-group has-validation\"\u003e\n          \u003cspan class=\"input-group-text\" id=\"inputGroupPrepend3\"\u003e@\u003c/span\u003e\n          \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServerUsername\" aria-describedby=\"inputGroupPrepend3\" required\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\n            Please choose a username.\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-6\"\u003e\n        \u003clabel for=\"validationServer03\" class=\"form-label\"\u003eCity\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServer03\" required\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please provide a valid city.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-3\"\u003e\n        \u003clabel for=\"validationServer04\" class=\"form-label\"\u003eState\u003c/label\u003e\n        \u003cselect class=\"form-select is-invalid\" id=\"validationServer04\" required\u003e\n          \u003coption selected disabled value=\"\"\u003eChoose...\u003c/option\u003e\n          \u003coption\u003e...\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please select a valid state.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-3\"\u003e\n        \u003clabel for=\"validationServer05\" class=\"form-label\"\u003eZip\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServer05\" required\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please provide a valid zip.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-12\"\u003e\n        \u003cdiv class=\"form-check\"\u003e\n          \u003cinput class=\"form-check-input is-invalid\" type=\"checkbox\" value=\"\" id=\"invalidCheck3\" required\u003e\n          \u003clabel class=\"form-check-label\" for=\"invalidCheck3\"\u003e\n            Agree to terms and conditions\n          \u003c/label\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\n            You must agree before submitting.\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-12\"\u003e\n        \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit form\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e"},{"file":"navs.html","id":"bootstrap/navs.html-5","componentId":"bootstrap","title":"Navs","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cnav class=\"nav\"\u003e\n          \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eActive\u003c/a\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cnav\u003e\n          \u003cdiv class=\"nav nav-tabs mb-3\" id=\"nav-tab\" role=\"tablist\"\u003e\n            \u003ca class=\"nav-link active\" id=\"nav-home-tab\" data-bs-toggle=\"tab\" href=\"#nav-home\" role=\"tab\" aria-controls=\"nav-home\" aria-selected=\"true\"\u003eHome\u003c/a\u003e\n            \u003ca class=\"nav-link\" id=\"nav-profile-tab\" data-bs-toggle=\"tab\" href=\"#nav-profile\" role=\"tab\" aria-controls=\"nav-profile\" aria-selected=\"false\"\u003eProfile\u003c/a\u003e\n            \u003ca class=\"nav-link\" id=\"nav-contact-tab\" data-bs-toggle=\"tab\" href=\"#nav-contact\" role=\"tab\" aria-controls=\"nav-contact\" aria-selected=\"false\"\u003eContact\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n        \u003cdiv class=\"tab-content\" id=\"nav-tabContent\"\u003e\n          \u003cdiv class=\"tab-pane fade show active\" id=\"nav-home\" role=\"tabpanel\" aria-labelledby=\"nav-home-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"tab-pane fade\" id=\"nav-profile\" role=\"tabpanel\" aria-labelledby=\"nav-profile-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"tab-pane fade\" id=\"nav-contact\" role=\"tabpanel\" aria-labelledby=\"nav-contact-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"nav nav-pills\"\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eActive\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cnav class=\"navbar navbar-expand-lg navbar-light bg-light\"\u003e\n          \u003cdiv class=\"container-fluid\"\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n              \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n              \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item dropdown\"\u003e\n                  \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n                    Dropdown\n                  \u003c/a\u003e\n                  \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cform class=\"d-flex\"\u003e\n                \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n                \u003cbutton class=\"btn btn-outline-dark\" type=\"submit\"\u003eSearch\u003c/button\u003e\n              \u003c/form\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n\n        \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-primary mt-5\"\u003e\n          \u003cdiv class=\"container-fluid\"\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent2\" aria-controls=\"navbarSupportedContent2\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n              \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent2\"\u003e\n              \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item dropdown\"\u003e\n                  \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown2\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n                    Dropdown\n                  \u003c/a\u003e\n                  \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown2\"\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cform class=\"d-flex\"\u003e\n                \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n                \u003cbutton class=\"btn btn-outline-light\" type=\"submit\"\u003eSearch\u003c/button\u003e\n              \u003c/form\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e"},{"file":"accordion.html","id":"bootstrap/accordion.html-6","componentId":"bootstrap","title":"Accordion","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"accordion\" id=\"accordionExample\"\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingOne\"\u003e\n              \u003cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\"\u003e\n                Accordion Item #1\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the first item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingTwo\"\u003e\n              \u003cbutton class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\"\u003e\n                Accordion Item #2\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the second item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingThree\"\u003e\n              \u003cbutton class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\"\u003e\n                Accordion Item #3\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingThree\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the third item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"alerts.html","id":"bootstrap/alerts.html-7","componentId":"bootstrap","title":"Alerts","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\n\u003cdiv class=\"alert alert-primary alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple primary alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-secondary alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple secondary alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-success alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple success alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple danger alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple warning alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-info alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple info alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-light alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple light alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-dark alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple dark alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"alert alert-success\" role=\"alert\"\u003e\n  \u003ch4 class=\"alert-heading\"\u003eWell done!\u003c/h4\u003e\n  \u003cp\u003eAww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.\u003c/p\u003e\n  \u003chr\u003e\n  \u003cp class=\"mb-0\"\u003eWhenever you need to, be sure to use margin utilities to keep things nice and tidy.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e"},{"file":"badges.html","id":"bootstrap/badges.html-8","componentId":"bootstrap","title":"Badges","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cp class=\"h1\"\u003eExample heading \u003cspan class=\"badge bg-primary\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h2\"\u003eExample heading \u003cspan class=\"badge bg-secondary\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h3\"\u003eExample heading \u003cspan class=\"badge bg-success\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h4\"\u003eExample heading \u003cspan class=\"badge bg-danger\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h5\"\u003eExample heading \u003cspan class=\"badge bg-warning\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-info\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-light\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-dark\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-primary\"\u003ePrimary\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-secondary\"\u003eSecondary\u003c/span\u003e--\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-success\"\u003eSuccess\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-danger\"\u003eDanger\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-warning\"\u003eWarning\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-info\"\u003eInfo\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-light\"\u003eLight\u003c/span\u003e--\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-dark\"\u003eDark\u003c/span\u003e--\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-primary\"\u003ePrimary\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-secondary\"\u003eSecondary\u003c/span\u003e--\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-success\"\u003eSuccess\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-danger\"\u003eDanger\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-warning\"\u003eWarning\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-info\"\u003eInfo\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-light\"\u003eLight\u003c/span\u003e--\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-dark\"\u003eDark\u003c/span\u003e--\u003e\n        \u003c/div\u003e"},{"file":"buttons.html","id":"bootstrap/buttons.html-9","componentId":"bootstrap","title":"Buttons","extension":"html","raw":"\u003cstyle\u003e\n  .button-example { margin-bottom: 3rem; }\n  .button-example th { vertical-align: top; font-weight: bold; }\n  .button-example td, .button-example th { padding: .5rem 1rem .5rem 0; }\n\u003c/style\u003e\n\n\u003ch4\u003ePrimary\u003c/h4\u003e\n\u003ctable class=\"button-example\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eActive\u003c/th\u003e\n    \u003cth\u003eDisabled\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eLarge\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eMedium\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eSmall\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch4\u003eSecondary\u003c/h4\u003e\n\u003ctable class=\"button-example\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eActive\u003c/th\u003e\n    \u003cth\u003eDisabled\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eLarge\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eMedium\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eSmall\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch4\u003eOthers\u003c/h4\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cbutton type=\"button\" class=\"btn btn-success\"\u003eSuccess\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-danger\"\u003eDanger\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-info\"\u003eInfo\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-light\"\u003eLight\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-dark\"\u003eDark\u003c/button\u003e\n\n\u003cbutton type=\"button\" class=\"btn btn-link\"\u003eLink\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\n\u003cbutton type=\"button\" class=\"btn btn-outline-success\"\u003eSuccess\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-danger\"\u003eDanger\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-warning\"\u003eWarning\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-info\"\u003eInfo\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-light\"\u003eLight\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-dark\"\u003eDark\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar with button groups\"\u003e\n  \u003cdiv class=\"btn-group me-2\" role=\"group\" aria-label=\"First group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e1\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e2\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e3\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e4\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group me-2\" role=\"group\" aria-label=\"Second group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e5\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e6\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e7\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group\" role=\"group\" aria-label=\"Third group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e8\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e"},{"file":"breadcrumb.html","id":"bootstrap/breadcrumb.html-10","componentId":"bootstrap","title":"Breadcrumb","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cnav aria-label=\"breadcrumb\"\u003e\n          \u003col class=\"breadcrumb\"\u003e\n            \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eLibrary\u003c/a\u003e\u003c/li\u003e\n            \u003cli class=\"breadcrumb-item active\" aria-current=\"page\"\u003eData\u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e"},{"file":"card.html","id":"bootstrap/card.html-11","componentId":"bootstrap","title":"Card","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"row  row-cols-1 row-cols-md-2 g-4\"\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003csvg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"180\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Image cap\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eImage cap\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n                \u003ca href=\"#\" class=\"btn btn-primary\"\u003eGo somewhere\u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"card-header\"\u003e\n                Featured\n              \u003c/div\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n                \u003ca href=\"#\" class=\"btn btn-primary\"\u003eGo somewhere\u003c/a\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"card-footer text-muted\"\u003e\n                2 days ago\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n              \u003c/div\u003e\n              \u003cul class=\"list-group list-group-flush\"\u003e\n                \u003cli class=\"list-group-item\"\u003eAn item\u003c/li\u003e\n                \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n                \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ca href=\"#\" class=\"card-link\"\u003eCard link\u003c/a\u003e\n                \u003ca href=\"#\" class=\"card-link\"\u003eAnother link\u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"row g-0\"\u003e\n                \u003cdiv class=\"col-md-4\"\u003e\n                  \u003csvg class=\"bd-placeholder-img\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eImage\u003c/text\u003e\u003c/svg\u003e\n\n                \u003c/div\u003e\n                \u003cdiv class=\"col-md-8\"\u003e\n                  \u003cdiv class=\"card-body\"\u003e\n                    \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                    \u003cp class=\"card-text\"\u003eThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\u003c/p\u003e\n                    \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"code.html","id":"bootstrap/code.html-12","componentId":"bootstrap","title":"Code","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cp\u003eA \u003ccode\u003ePOST\u003c/code\u003e callback will be sent to notification with the following form will be sent to \u003ccode\u003enotificationUrl\u003c/code\u003e once the enough is paid and once again once there is enough confirmations to the payment:\u003c/p\u003e\n\u003c/div\u003e\n\n\n\u003cdiv class=\"bd-example\"\u003e\u003cpre\u003e\u003ccode class=\"html hljs xml\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003eform\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003emethod\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"POST\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003eaction\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://localhost:14142/apps/2waqS3jYMpPhTEUp8vfomTfDQwu5/pos\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"amount\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"100\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"email\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"customer@example.com\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"orderId\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"CustomOrderId\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"notificationUrl\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://example.com/callbacks\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"redirectUrl\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://example.com/thanksyou\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003ebutton\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"submit\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003eBuy now\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003ebutton\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003eform\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e"},{"file":"dropdowns.html","id":"bootstrap/dropdowns.html-13","componentId":"bootstrap","title":"Dropdowns","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group w-100 align-items-center justify-content-between flex-wrap\"\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret\" type=\"button\"\n        id=\"dropdownMenuButtonSM\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButtonSM\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item active\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item dropdown-item-custom-active\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary btn-lg dropdown-toggle\" type=\"button\" id=\"dropdownMenuButtonLG\"\n        data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButtonLG\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-success\"\u003eSuccess\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-success dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-info\"\u003eInfo\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-info dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-warning dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-danger\"\u003eDanger\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group w-100 align-items-center justify-content-between flex-wrap\"\u003e\n    \u003cdiv class=\"dropend\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropendMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropend button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropendMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropup\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropupMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropup button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropupMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropstart\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropstartMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropstart button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropstartMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownRightMenuButton\"\n        data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        End-aligned menu\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"dropdownRightMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"listgroups.html","id":"bootstrap/listgroups.html-14","componentId":"bootstrap","title":"Listgroups","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"list-group\"\u003e\n          \u003cli class=\"list-group-item disabled\" aria-disabled=\"true\"\u003eA disabled item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA fourth item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eAnd a fifth one\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"list-group list-group-flush\"\u003e\n          \u003cli class=\"list-group-item\"\u003eAn item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA fourth item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eAnd a fifth one\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"list-group\"\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\u003eA simple default list group item\u003c/a\u003e\n\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-primary\"\u003eA simple primary list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-secondary\"\u003eA simple secondary list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-success\"\u003eA simple success list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-danger\"\u003eA simple danger list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-warning\"\u003eA simple warning list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-info\"\u003eA simple info list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-light\"\u003eA simple light list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-dark\"\u003eA simple dark list group item\u003c/a\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"pagination.html","id":"bootstrap/pagination.html-15","componentId":"bootstrap","title":"Pagination","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Standard pagination example\"\u003e\n    \u003cul class=\"pagination\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" aria-label=\"Previous\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026laquo;\u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" aria-label=\"Next\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026raquo;\u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav class=\"d-flex flex-wrap gap-3 justify-content-between\"\u003e\n    \u003cul class=\"pagination me-auto\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003cspan class=\"page-link px-0\"\u003e\n          1 – 500 \u003c/span\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003cul class=\"pagination ms-auto\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003cspan class=\"page-link\"\u003ePage Size\u003c/span\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=50\"\u003e50\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=100\"\u003e100\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=250\"\u003e250\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=500\"\u003e500\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Pagination example\"\u003e\n    \u003cul class=\"pagination pagination-sm\"\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Another pagination example\"\u003e\n    \u003cul class=\"pagination pagination-lg flex-wrap\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003ePrevious\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003eNext\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e"},{"file":"popovers.html","id":"bootstrap/popovers.html-16","componentId":"bootstrap","title":"Popovers","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-lg btn-danger\" data-bs-toggle=\"popover\" title=\"Popover title\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\"\u003eClick to toggle popover\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on top\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on end\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"bottom\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on bottom\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on start\n        \u003c/button\u003e\n        \u003c/div\u003e"},{"file":"progress.html","id":"bootstrap/progress.html-17","componentId":"bootstrap","title":"Progress","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e0%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-success w-25\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e25%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-info text-dark w-50\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e50%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-warning text-dark w-75\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e75%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress\"\u003e\n          \u003cdiv class=\"progress-bar bg-danger w-100\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e100%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"progress\"\u003e\n          \u003cdiv class=\"progress-bar\" role=\"progressbar\" style=\"width: 15%\" aria-valuenow=\"15\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"progress-bar progress-bar-striped progress-bar-animated bg-success\" role=\"progressbar\" style=\"width: 40%\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"modal.html","id":"bootstrap/modal.html-18","componentId":"bootstrap","title":"Modal","extension":"html","raw":"\u003cdiv class=\"bd-example\" style=\"min-height:400px\"\u003e\n  \u003cdiv class=\"d-flex justify-content-between flex-wrap\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalDefault\"\u003e\n      Launch demo modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#staticBackdropLive\"\u003e\n      Launch static backdrop modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalCenteredScrollable\"\u003e\n      Vertically centered scrollable modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreen\"\u003e\n      Full screen\n    \u003c/button\u003e\n  \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"modal fade\" id=\"exampleModalDefault\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"exampleModalLabel\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        ...\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"staticBackdropLive\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"staticBackdropLiveLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"staticBackdropLiveLabel\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003eI will not close if you click outside me. Don't even try to press escape key.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eUnderstood\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"exampleModalCenteredScrollable\" tabindex=\"-1\" aria-labelledby=\"exampleModalCenteredScrollableTitle\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"exampleModalCenteredScrollableTitle\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003ePlaceholder text for this demonstration of a vertically centered modal dialog.\u003c/p\u003e\n        \u003cp\u003eIn this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.\u003c/p\u003e\n        \u003cp\u003eWhat follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.\u003c/p\u003e\n        \u003cp\u003eWe're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"exampleModalFullscreen\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog modal-fullscreen\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title h4\" id=\"exampleModalFullscreenLabel\"\u003eFull screen modal\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003eWhat follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.\u003c/p\u003e\n        \u003cp\u003eLast Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.\u003c/p\u003e\n        \u003cp\u003eDon't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.\u003c/p\u003e\n        \u003cp\u003eYo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.\u003c/p\u003e\n        \u003cp\u003eI'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.\u003c/p\u003e\n        \u003cp\u003eGrowing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.\u003c/p\u003e\n        \u003cp\u003eMake it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.\u003c/p\u003e\n        \u003cp\u003eWe can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"scrollspy.html","id":"bootstrap/scrollspy.html-19","componentId":"bootstrap","title":"Scrollspy","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n          \u003cnav id=\"navbar-example2\" class=\"navbar navbar-light bg-light px-3\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n            \u003cul class=\"nav nav-pills\"\u003e\n              \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link\" href=\"#fat\"\u003e@fat\u003c/a\u003e\n              \u003c/li\u003e\n              \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link\" href=\"#mdo\"\u003e@mdo\u003c/a\u003e\n              \u003c/li\u003e\n              \u003cli class=\"nav-item dropdown\"\u003e\n                \u003ca class=\"nav-link dropdown-toggle\" data-bs-toggle=\"dropdown\" href=\"#\" role=\"button\" aria-expanded=\"false\"\u003eDropdown\u003c/a\u003e\n                \u003cul class=\"dropdown-menu\"\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#one\"\u003eone\u003c/a\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#two\"\u003etwo\u003c/a\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#three\"\u003ethree\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n              \u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/nav\u003e\n          \u003cdiv data-bs-spy=\"scroll\" data-bs-target=\"#navbar-example2\" data-bs-offset=\"0\" class=\"scrollspy-example\" tabindex=\"0\"\u003e\n            \u003ch4 id=\"fat\"\u003e@fat\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.\u003c/p\u003e\n            \u003ch4 id=\"mdo\"\u003e@mdo\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.\u003c/p\u003e\n            \u003ch4 id=\"one\"\u003eone\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.\u003c/p\u003e\n            \u003ch4 id=\"two\"\u003etwo\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.\u003c/p\u003e\n            \u003ch4 id=\"three\"\u003ethree\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.\u003c/p\u003e\n            \u003cp\u003eAnd some more placeholder content, for good measure.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"spinners.html","id":"bootstrap/spinners.html-20","componentId":"bootstrap","title":"Spinners","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\n        \u003cdiv class=\"spinner-border text-primary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-secondary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-success\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-danger\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-warning\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-info\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-light\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-dark\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n\n        \u003cdiv class=\"spinner-grow text-primary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-secondary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-success\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-danger\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-warning\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-info\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-light\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-dark\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"toasts.html","id":"bootstrap/toasts.html-21","componentId":"bootstrap","title":"Toasts","extension":"html","raw":"\u003cdiv class=\"bd-example bg-dark p-5 align-items-center\"\u003e\n        \u003cdiv class=\"toast\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"\u003e\n          \u003cdiv class=\"toast-header\"\u003e\n            \u003csvg class=\"bd-placeholder-img rounded me-2\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#007aff\"/\u003e\u003c/svg\u003e\n\n            \u003cstrong class=\"me-auto\"\u003eBootstrap\u003c/strong\u003e\n            \u003csmall class=\"text-muted\"\u003e11 mins ago\u003c/small\u003e\n            \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"toast\" aria-label=\"Close\"\u003e\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"toast-body\"\u003e\n            Hello, world! This is a toast message.\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"tooltips.html","id":"bootstrap/tooltips.html-22","componentId":"bootstrap","title":"Tooltips","extension":"html","raw":"\u003cdiv class=\"bd-example tooltip-demo\" style=\"min-height:200px; padding: 3em\"\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\"\u003eTooltip on top\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" title=\"Tooltip on end\"\u003eTooltip on end\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\" title=\"Tooltip on bottom\"\u003eTooltip on bottom\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" title=\"Tooltip on start\"\u003eTooltip on start\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-html=\"true\" title=\"\u003cem\u003eTooltip\u003c/em\u003e \u003cu\u003ewith\u003c/u\u003e \u003cb\u003eHTML\u003c/b\u003e\"\u003eTooltip with HTML\u003c/button\u003e\n\u003c/div\u003e"},{"file":"carousel.html","id":"bootstrap/carousel.html-23","componentId":"bootstrap","title":"Carousel","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv id=\"carouselExampleCaptions\" class=\"carousel slide\" data-bs-ride=\"carousel\"\u003e\n          \u003col class=\"carousel-indicators\"\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"0\" class=\"active\"\u003e\u003c/li\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"1\"\u003e\u003c/li\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"2\"\u003e\u003c/li\u003e\n          \u003c/ol\u003e\n          \u003cdiv class=\"carousel-inner\"\u003e\n            \u003cdiv class=\"carousel-item active\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: First slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#777\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#555\" dy=\".3em\"\u003eFirst slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eFirst slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the first slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Second slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#666\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#444\" dy=\".3em\"\u003eSecond slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eSecond slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the second slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Third slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#555\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#333\" dy=\".3em\"\u003eThird slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eThird slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the third slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003ca class=\"carousel-control-prev\" href=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\"\u003e\n            \u003cspan class=\"carousel-control-prev-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n            \u003cspan class=\"visually-hidden\"\u003ePrevious\u003c/span\u003e\n          \u003c/a\u003e\n          \u003ca class=\"carousel-control-next\" href=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\"\u003e\n            \u003cspan class=\"carousel-control-next-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n            \u003cspan class=\"visually-hidden\"\u003eNext\u003c/span\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"shadows.html","id":"bootstrap/shadows.html-24","componentId":"bootstrap","title":"Shadows","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"shadow-none p-3 m-5 rounded bg-tile\"\u003eNo shadow\u003c/div\u003e\n\u003cdiv class=\"shadow-sm p-3 m-5 rounded bg-tile\"\u003eSmall shadow\u003c/div\u003e\n\u003cdiv class=\"shadow p-3 m-5 rounded bg-tile\"\u003eRegular shadow\u003c/div\u003e\n\u003cdiv class=\"shadow-lg p-3 m-5 rounded bg-tile\"\u003eLarger shadow\u003c/div\u003e\n\u003c/div\u003e"},{"file":"utils.html","id":"bootstrap/utils.html-25","componentId":"bootstrap","title":"Utils","extension":"html","raw":"\u003cdiv class=\"bd-example bg-body\"\u003e\n\u003cp\u003eBG Body\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example bg-black\"\u003e\n\u003cp\u003eBG Black\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example bg-white\"\u003e\n\u003cp\u003eBG White\u003c/p\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/bootstrap","sourceFile":"src/components/bootstrap/component.config.js","readmeFile":"src/components/bootstrap/README.md","type":"component"},"footer":{"id":"footer","title":"Footer","isTitleFromHeading":true,"content":"\u003ch1 id=\"footer\" tabindex=\"-1\"\u003eFooter\u003c/h1\u003e","variants":[{"file":"footer.html","id":"footer/footer.html-1","componentId":"footer","title":"Footer","extension":"html","raw":"\u003cdiv class=\"btcpay-footer\"\u003e\n  \u003cdiv class=\"btcpay-footer-columns\"\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eSoftware\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/\"\u003eIntroduction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/btcpay-basics/usecase\"\u003eUse Case\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/features/apps\"\u003eApps\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/deployment/deployment\"\u003eDeployment\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/btcpay-basics/gettingstarted\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eResources\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/\"\u003eDocumentation\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/development\"\u003eDevelopment\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/support-and-community/support\"\u003eSupport\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/faq-and-common-issues/faq\"\u003eFAQ\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eCommunity\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://blog.btcpayserver.org\"\u003eBlog\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://chat.btcpayserver.org\"\u003eChat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://directory.btcpayserver.org\"\u003eDirectory\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/support-and-community/contribute\"\u003eContribute\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://btcpayserver.org/donate/\"\u003eDonate\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cp\u003e\n    Content Released under MIT license.\n    \u003cbr\u003e\n    This website does not use cookies nor collect personal data.\n  \u003c/p\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/footer","sourceFile":"src/components/footer/component.config.js","readmeFile":"src/components/footer/README.md","type":"component"},"header":{"id":"header","title":"Header","isTitleFromHeading":true,"content":"\u003ch1 id=\"header\" tabindex=\"-1\"\u003eHeader\u003c/h1\u003e","variants":[{"file":"header.html","id":"header/header.html-1","componentId":"header","title":"Header","extension":"html","raw":"\u003cdiv class=\"btcpay-header\"\u003e\n  \u003cdiv class=\"btcpay-header-columns\"\u003e\n    \u003ca href=\"#\"\u003e\n      \u003cimg src=\"/svg/logo.svg\" class=\"btcpay-header-logo\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u003c!--#include file=\"/theme-switch/variants/theme-switch.html\" --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/header","sourceFile":"src/components/header/component.config.js","readmeFile":"src/components/header/README.md","type":"component"},"pills":{"id":"pills","title":"Pills","isTitleFromHeading":false,"variants":[{"file":"labels.html","id":"pills/labels.html-1","componentId":"pills","title":"Labels","extension":"html","raw":"\u003cform action=\"#\"\u003e\n  \u003cdiv class=\"nav btcpay-pills pb-1\"\u003e\n    \u003cinput id=\"Internal\" value=\"Internal\" type=\"radio\" name=\"node\" checked=\"checked\"\u003e\n    \u003clabel for=\"Internal\" \u003eUse internal node\u003c/label\u003e\n    \u003cinput id=\"Custom\" value=\"Custom\" type=\"radio\" name=\"node\"\u003e\n    \u003clabel for=\"Custom\"\u003eUse custom node\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/form\u003e"},{"file":"links.html","id":"pills/links.html-2","componentId":"pills","title":"Links","extension":"html","raw":"\u003cnav class=\"nav pb-1 btcpay-pills\"\u003e\n  \u003ca class=\"btcpay-pill\" href=\"#\"\u003eBTC (On-Chain)\u003c/a\u003e\n  \u003ca class=\"btcpay-pill active\" href=\"#\"\u003eBTC (Off-Chain)\u003c/a\u003e\n\u003c/nav\u003e"}],"sourcePath":"src/components/pills","sourceFile":"src/components/pills/component.config.js","type":"component"},"responsive-helper":{"id":"responsive-helper","title":"Responsive Helper","isTitleFromHeading":false,"variants":[],"sourcePath":"src/components/responsive-helper","type":"component"},"status":{"id":"status","title":"Status","isTitleFromHeading":false,"variants":[],"sourcePath":"src/components/status","type":"component"},"theme-switch":{"id":"theme-switch","title":"Theme Switch","isTitleFromHeading":true,"content":"\u003ch1 id=\"theme-switch\" tabindex=\"-1\"\u003eTheme Switch\u003c/h1\u003e\n\u003cp\u003eUse the Theme Switch in the header to offer the user the ability to set the color mode explicitely.\u003c/p\u003e\n\u003cp\u003eSee the \u003ca href=\"/scripts/theme-switch.js\"\u003etheme-switch.js\u003c/a\u003e for a vanilla JavaScript implementation.\u003c/p\u003e","variants":[{"file":"theme-switch.html","id":"theme-switch/theme-switch.html-1","componentId":"theme-switch","title":"Theme Switch","extension":"html","raw":"\u003cdiv class=\"btcpay-theme-switch\"\u003e\n  \u003cspan class=\"btcpay-theme-switch-label\"\u003eTheme\u003c/span\u003e\n  \u003cdiv class=\"btcpay-theme-switch-themes\"\u003e\n      \u003cbutton type=\"button\" title=\"System\" data-theme=\"system\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-system\"\u003e\u003cuse href=\"/svg/icons.svg#themes-system\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" title=\"Light\" data-theme=\"light\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-light\"\u003e\u003cuse href=\"/svg/icons.svg#themes-light\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" title=\"Dark\" data-theme=\"dark\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-dark\"\u003e\u003cuse href=\"/svg/icons.svg#themes-dark\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript src=\"/scripts/theme-switch.js\"\u003e\u003c/script\u003e\n\u003cnoscript\u003e\u003cstyle\u003e.btcpay-theme-switch { display: none; }\u003c/style\u003e\u003c/noscript\u003e"}],"sourcePath":"src/components/theme-switch","sourceFile":"src/components/theme-switch/component.config.js","readmeFile":"src/components/theme-switch/README.md","type":"component"},"toggle":{"id":"toggle","title":"Toggle","isTitleFromHeading":false,"variants":[{"file":"simple.html","id":"toggle/simple.html-1","componentId":"toggle","title":"Simple","extension":"html","raw":"\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"PayJoinEnabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" /\u003e\n  \u003clabel for=\"PayJoinEnabled\" class=\"form-label mb-0 me-1\"\u003ePayJoin enabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"PayJoinEnabledOn\" type=\"checkbox\" class=\"btcpay-toggle me-2\" checked /\u003e\n  \u003clabel for=\"PayJoinEnabledOn\" class=\"form-label mb-0 me-1\"\u003ePayJoin enabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"Disabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" disabled /\u003e\n  \u003clabel for=\"Disabled\" class=\"form-label mb-0 me-1\"\u003eDisabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center mb-0\"\u003e\n  \u003cinput id=\"Disabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" disabled checked /\u003e\n  \u003clabel for=\"Disabled\" class=\"form-label mb-0 me-1\"\u003eDisabled active\u003c/label\u003e\n\u003c/div\u003e"},{"file":"helptext.html","id":"toggle/helptext.html-2","componentId":"toggle","title":"Helptext","extension":"html","raw":"\u003cdiv class=\"d-flex align-items-center\"\u003e\n  \u003cinput id=\"IsRecurring\" type=\"checkbox\" class=\"btcpay-toggle me-3\" /\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"IsRecurring\" class=\"form-label mb-0\"\u003eRecurring Goal\u003c/label\u003e\n    \u003cdiv class=\"form-text\"\u003eReset goal after a specific period of time, based on your crowdfund's start date.\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"expand.html","id":"toggle/expand.html-3","componentId":"toggle","title":"Expand","extension":"html","raw":"\u003cdiv class=\"d-flex align-items-center\"\u003e\n  \u003cinput id=\"EnableTips\" type=\"checkbox\" class=\"btcpay-toggle me-3\" data-bs-toggle=\"collapse\"\n    data-bs-target=\"#CustomTipsSettings\" aria-expanded=\"false\" aria-controls=\"CustomTipsSettings\" /\u003e\n  \u003clabel for=\"EnableTips\" class=\"form-label mb-0\"\u003eEnable tips\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"collapse\" id=\"CustomTipsSettings\"\u003e\n  \u003cdiv class=\"form-group pt-3\"\u003e\n    \u003clabel id=\"CustomTipText\" class=\"form-label\" data-required\u003eCustom tip text\u003c/label\u003e\n    \u003cinput for=\"CustomTipText\" class=\"form-control\" required /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/toggle","sourceFile":"src/components/toggle/component.config.js","type":"component"},"kitchensink":{"id":"kitchensink","title":"Kitchensink","isTitleFromHeading":true,"content":"\u003ch1 id=\"kitchensink\" tabindex=\"-1\"\u003eKitchensink\u003c/h1\u003e\n\u003cp\u003eJust a page that showcases everything and all together.\u003c/p\u003e","variants":[{"file":"kitchensink.html","id":"kitchensink/kitchensink.html-1","componentId":"kitchensink","title":"Kitchensink","extension":"html","raw":"\u003c!--#include file=\"/header/variants/header.html\" --\u003e\n\n\u003ch1\u003eChancellor on Brink of Second Bailout for Banks\u003c/h1\u003e\n\u003ch2\u003eBillions may be needed as lending squeeze tightens\u003c/h2\u003e\n\u003cp\u003eAlistair Darling has been forced to consider a second bailout for banks as the lending drought worsens.\u003c/p\u003e\n\u003cp\u003eThe Chancellor will decide within weeks whether to pump billions more into the economy as evidence mounts that the \u003ccode\u003e£37 billion\u003c/code\u003e part-nationalisation last year has failed to keep credit flowing. Options include cash injections, offering banks cheaper state guarantees to raise money privately or buying up “toxic assets”, The Times has learnt.\u003c/p\u003e\n\u003cpre\u003econst test = 123;\u003c/pre\u003e\n\u003cp\u003eThe Bank of England revealed yesterday that, despite intense pressure, the banks curbed lending in the final quarter of last year and plan even tighter restrictions in the coming months. Its findings will alarm the Treasury.\u003c/pre\u003e\n\n\u003c!--#include file=\"/footer/variants/footer.html\" --\u003e"}],"sourcePath":"src/views/kitchensink","sourceFile":"src/views/kitchensink/component.config.js","readmeFile":"src/views/kitchensink/README.md","type":"component"}},"navigation":{"index":{"childIds":["design","components","resources","development"],"id":"index","itemId":"index","path":"/","type":"documentation","title":"BTCPay Server Design System"},"components":{"prevSiblingId":"design","nextSiblingId":"resources","childIds":["components/header","components/theme-switch","components/bootstrap","components/pills","components/toggle","components/footer"],"parentId":"index","id":"components","itemId":"components","isStructural":true,"path":"/components/","type":"documentation","title":"Components"},"components/header":{"nextSiblingId":"components/theme-switch","parentId":"components","id":"components/header","itemId":"header","path":"/components/header/","type":"component","title":"Header","keywords":[null]},"components/theme-switch":{"prevSiblingId":"components/header","nextSiblingId":"components/bootstrap","parentId":"components","id":"components/theme-switch","itemId":"theme-switch","path":"/components/theme-switch/","type":"component","title":"Theme Switch","keywords":[null]},"components/bootstrap":{"prevSiblingId":"components/theme-switch","nextSiblingId":"components/pills","parentId":"components","id":"components/bootstrap","itemId":"bootstrap","path":"/components/bootstrap/","type":"component","title":"Bootstrap v5","keywords":[null]},"components/pills":{"prevSiblingId":"components/bootstrap","nextSiblingId":"components/toggle","parentId":"components","id":"components/pills","itemId":"pills","path":"/components/pills/","type":"component","title":"Pills","keywords":[null]},"components/toggle":{"prevSiblingId":"components/pills","nextSiblingId":"components/footer","parentId":"components","id":"components/toggle","itemId":"toggle","path":"/components/toggle/","type":"component","title":"Toggle","keywords":[null]},"components/footer":{"prevSiblingId":"components/toggle","parentId":"components","id":"components/footer","itemId":"footer","path":"/components/footer/","type":"component","title":"Footer","keywords":[null]},"design":{"nextSiblingId":"components","childIds":["design/colors","design/fonts","design/icons","design/spaces","design/variables"],"parentId":"index","id":"design","itemId":"design","isStructural":true,"path":"/design/","type":"documentation","title":"Design"},"development":{"prevSiblingId":"resources","parentId":"index","id":"development","itemId":"development","path":"/development/","type":"documentation","title":"Development"},"resources":{"prevSiblingId":"components","nextSiblingId":"development","childIds":["resources/css","resources/favicon","resources/design-files","resources/supporters"],"parentId":"index","id":"resources","itemId":"resources","isStructural":true,"path":"/resources/","type":"documentation","title":"Resources"},"views":{"nextSiblingId":"design","childIds":["views/kitchensink"],"parentId":"index","id":"views","itemId":"views","isStructural":true,"path":"/views/","type":"documentation","title":"Views"},"views/kitchensink":{"parentId":"views","id":"views/kitchensink","itemId":"kitchensink","path":"/views/kitchensink/","type":"component","title":"Kitchensink","keywords":[null]},"design/colors":{"nextSiblingId":"design/fonts","parentId":"design","id":"design/colors","itemId":"design/colors","path":"/design/colors/","type":"tokens","title":"Colors"},"design/fonts":{"prevSiblingId":"design/colors","nextSiblingId":"design/icons","parentId":"design","id":"design/fonts","itemId":"design/fonts","path":"/design/fonts/","type":"tokens","title":"Fonts"},"design/icons":{"prevSiblingId":"design/fonts","nextSiblingId":"design/spaces","parentId":"design","id":"design/icons","itemId":"design/icons","path":"/design/icons/","type":"tokens","title":"Icons"},"design/spaces":{"prevSiblingId":"design/icons","nextSiblingId":"design/variables","parentId":"design","id":"design/spaces","itemId":"design/spaces","path":"/design/spaces/","type":"tokens","title":"Spaces"},"design/variables":{"prevSiblingId":"design/spaces","parentId":"design","id":"design/variables","itemId":"design/variables","path":"/design/variables/","type":"tokens","title":"Variables"},"resources/css":{"nextSiblingId":"resources/favicon","parentId":"resources","id":"resources/css","itemId":"resources/css","path":"/resources/css/","type":"documentation","title":"CSS"},"resources/design-files":{"prevSiblingId":"resources/favicon","nextSiblingId":"resources/supporters","parentId":"resources","id":"resources/design-files","itemId":"resources/design-files","path":"/resources/design-files/","type":"documentation","title":"Design files"},"resources/favicon":{"prevSiblingId":"resources/css","nextSiblingId":"resources/design-files","parentId":"resources","id":"resources/favicon","itemId":"resources/favicon","path":"/resources/favicon/","type":"documentation","title":"Favicon"},"resources/supporters":{"prevSiblingId":"resources/design-files","parentId":"resources","id":"resources/supporters","itemId":"resources/supporters","path":"/resources/supporters/","type":"tokens","title":"Supporters"}}},
+        state: {"config":{"name":"BTCPay Server Design System","version":"0.1.0","update":1730113259839,"logo":"/resources/design-files/btcpay-logo.svg","source":{"components":["/home/runner/work/btcpayserver-design/btcpayserver-design/src/components","/home/runner/work/btcpayserver-design/btcpayserver-design/src/views"],"templates":"/home/runner/work/btcpayserver-design/btcpayserver-design/src/templates","pages":"/home/runner/work/btcpayserver-design/btcpayserver-design/pages","additionalWatches":["/home/runner/work/btcpayserver-design/btcpayserver-design/src/design"],"base":"/home/runner/work/btcpayserver-design/btcpayserver-design","configFile":"/home/runner/work/btcpayserver-design/btcpayserver-design/uiengine.config.js"},"target":"/home/runner/work/btcpayserver-design/btcpayserver-design/dist","adapters":{"html":{"module":"@uiengine/adapter-html","options":{"basedir":"./src/components","skipScaffold":false}}},"template":"patternlib.html","themes":[{"id":"light","title":"Light"},{"id":"dark","title":"Dark"}],"ui":{"lang":"en","customStylesFile":"/styles/patternlib-overrides.css","repoBaseUrl":"https://github.com/btcpayserver/btcpayserver-design/blob/master/","viewports":{"Phone":{"width":320},"Tablet":{"width":768},"Desktop":{"width":1280}},"breakpoints":{"XS":320,"S":560,"M":768,"L":960,"XL":1280},"base":"/"},"browserSync":{"open":false},"plugins":[]},"plugins":{"ui":{"js":[],"css":[],"tabs":[],"actions":[],"iframe_js":[]}},"pages":{"index":{"childIds":["design","components","resources","development"],"id":"index","title":"BTCPay Server Design System","isTitleFromHeading":true,"path":"","sourcePath":"pages","sourceFile":"pages/page.config.js","readmeFile":"pages/README.md","type":"documentation","content":"\u003ch1 id=\"btcpay-server-design-system\" tabindex=\"-1\"\u003eBTCPay Server Design System\u003c/h1\u003e\n\u003cp\u003eCodified design guidelines for the BTCPay Server webpages.\u003c/p\u003e\n\u003ch2 id=\"related-resources\" tabindex=\"-1\"\u003eRelated resources\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-design/\"\u003eRepository on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.figma.com/file/C7Xyq0FlxgFW8vaBr8ht1z/BTCPAY\"\u003eDesign Specifications on Figma\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-media\"\u003eMedia asset for BTCPay Server\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/btcpayserver-doc\"\u003eOfficial Documentation\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e"},"components":{"childIds":[],"componentIds":["header","theme-switch","bootstrap","pills","toggle","footer"],"id":"components","title":"Components","isTitleFromHeading":true,"path":"components","sourcePath":"pages/components","sourceFile":"pages/components/page.config.js","readmeFile":"pages/components/README.md","type":"documentation","content":"\u003ch1 id=\"components\" tabindex=\"-1\"\u003eComponents\u003c/h1\u003e"},"design":{"childIds":["design/colors","design/fonts","design/icons","design/spaces","design/variables"],"id":"design","title":"Design","isTitleFromHeading":true,"path":"design","sourcePath":"pages/design","sourceFile":"pages/design/page.config.js","readmeFile":"pages/design/README.md","type":"documentation","content":"\u003ch1 id=\"design\" tabindex=\"-1\"\u003eDesign\u003c/h1\u003e"},"development":{"childIds":[],"id":"development","title":"Development","isTitleFromHeading":true,"path":"development","sourcePath":"pages/development","readmeFile":"pages/development/README.md","type":"documentation","content":"\u003ch1 id=\"development\" tabindex=\"-1\"\u003eDevelopment\u003c/h1\u003e\n\u003ch2 id=\"setup\" tabindex=\"-1\"\u003eSetup\u003c/h2\u003e\n\u003cp\u003eDependencies are managed via npm.\nOnce you have cloned \u003ca href=\"https://github.com/btcpayserver/btcpayserver-design/\"\u003ethis repo\u003c/a\u003e, you can setup the packages:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm install\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eCreate a build and rebuild on file change:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm start\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis will bring up the dev server and pattern library on \u003ca href=\"http://localhost:3000\"\u003elocalhost:3000\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"how-to-create-a-component%3F\" tabindex=\"-1\"\u003eHow to create a component?\u003c/h2\u003e\n\u003cp\u003eTo generate the basic files of a component you can use the \u003ccode\u003ecomponent\u003c/code\u003e command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine component COMPONENT_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis will also generate a default variant named after the component.\nIn case you want to directly add some variants, you can list them like so:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine component COMPONENT_ID VARIANT_1 VARIANT_2 VARIANT_3\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"how-to-create-a-variant%3F\" tabindex=\"-1\"\u003eHow to create a variant?\u003c/h2\u003e\n\u003cp\u003eA variant needs at least a file to render.\nYou create a variant by adding a file renderable by one of the configured adapters to the \u003ccode\u003evariants\u003c/code\u003e directory of a component.\u003c/p\u003e\n\u003cp\u003eTo render a variant, we also need a layout.\nThe \u003ccode\u003enpx uiengine init\u003c/code\u003e command created a basic html layout file in \u003ccode\u003esrc/templates/uiengine.html\u003c/code\u003e.\nIt includes the \u003ccode\u003e\u0026lt;!-- uiengine:content --\u0026gt;\u003c/code\u003e comment, which will be replaced with the HTML of the rendered variant.\nYou can go ahead and extend the layout to fit your needs and include the correct HTML and style and script references.\u003c/p\u003e\n\u003cp\u003eThis layout file is just there to get you started.\nFeel free to change its content and use an other adapter to fit your projects needs.\u003c/p\u003e\n\u003ch2 id=\"how-to-create-a-page%3F\" tabindex=\"-1\"\u003eHow to create a page?\u003c/h2\u003e\n\u003cp\u003eTo generate the basic files and folders of a page you can use the \u003ccode\u003epage\u003c/code\u003e command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page PAGE_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis generate a \u003ccode\u003eREADME.md\u003c/code\u003e and a \u003ccode\u003epage.config.js\u003c/code\u003e file inside the folder matching the page id in you pages source directory.\nIn case you want to directly add some pages, you can list them like so:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page PAGE_1_ID PAGE_2_ID PAGE_3_ID\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eSay you would like to create pages for grouping your components with the \u003ca href=\"http://atomicdesign.bradfrost.com/chapter-2/\"\u003eAtomic Design Methodology\u003c/a\u003e:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpx uiengine page atoms molecules organisms templates pages\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"how-to-generate-the-project%3F\" tabindex=\"-1\"\u003eHow to generate the project?\u003c/h2\u003e\n\u003cp\u003eThe site can be generated with the following command:\u003c/p\u003e\n\u003cpre class=\"hljs lang-bash\"\u003e\u003ccode\u003enpm start\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIt rebuilds files on change and spawns a server for the generated site.\u003c/p\u003e\n\u003cp\u003eUnder the hood \u003ca href=\"https://www.browsersync.io/\"\u003eBrowserSync\u003c/a\u003e is used to provide serving and watching the files.\nFor information on how to configure the server and pass additional options, see the \u003ca href=\"https://uiengine.uix.space/basics/config/#BrowserSync\"\u003econfiguration documentation\u003c/a\u003e.\u003c/p\u003e"},"resources":{"childIds":["resources/css","resources/favicon","resources/design-files","resources/supporters"],"id":"resources","title":"Resources","isTitleFromHeading":false,"path":"resources","sourcePath":"pages/resources","sourceFile":"pages/resources/page.config.js","type":"documentation"},"views":{"childIds":[],"componentIds":["kitchensink"],"id":"views","title":"Views","isTitleFromHeading":true,"path":"views","sourcePath":"pages/views","sourceFile":"pages/views/page.config.js","readmeFile":"pages/views/README.md","type":"documentation","content":"\u003ch1 id=\"views\" tabindex=\"-1\"\u003eViews\u003c/h1\u003e"},"design/colors":{"childIds":[],"tokens":[{"type":"category","name":"Brand","tokens":[{"category":"Brand","name":"Brand Primary","value":"#51b13e","variable":"--btcpay-brand-primary","type":"color"},{"category":"Brand","name":"Brand Secondary","value":"#CEDC21","variable":"--btcpay-brand-secondary","type":"color"},{"category":"Brand","name":"Brand Tertiary","value":"#1e7a44","variable":"--btcpay-brand-tertiary","type":"color"},{"category":"Brand","name":"Brand Dark","value":"#0F3B21","variable":"--btcpay-brand-dark","type":"color"}]},{"type":"category","name":"Primitives","tokens":[{"category":"Primitives","name":"White","value":"#ffffff","variable":"--btcpay-white","type":"color"},{"category":"Primitives","name":"White RGB","value":"255, 255, 255","variable":"--btcpay-white-rgb","type":"color"},{"category":"Primitives","name":"Black","value":"#000000","variable":"--btcpay-black","type":"color"},{"category":"Primitives","name":"Black RGB","value":"0, 0, 0","variable":"--btcpay-black-rgb","type":"color"}]},{"type":"category","name":"Neutral Light","tokens":[{"value":"#f8f9fa","category":"Neutral Light","name":"Neutral Light 100","variable":"--btcpay-neutral-light-100","reference":null,"type":"color"},{"value":"248,249,250","category":"Neutral Light","name":"Neutral Light 100","variable":"--btcpay-neutral-light-100-rgb","reference":null,"type":"color"},{"value":"#e9ecef","category":"Neutral Light","name":"Neutral Light 200","variable":"--btcpay-neutral-light-200","reference":null,"type":"color"},{"value":"233,236,239","category":"Neutral Light","name":"Neutral Light 200","variable":"--btcpay-neutral-light-200-rgb","reference":null,"type":"color"},{"value":"#dee2e6","category":"Neutral Light","name":"Neutral Light 300","variable":"--btcpay-neutral-light-300","reference":null,"type":"color"},{"value":"222,226,230","category":"Neutral Light","name":"Neutral Light 300","variable":"--btcpay-neutral-light-300-rgb","reference":null,"type":"color"},{"value":"#ced4da","category":"Neutral Light","name":"Neutral Light 400","variable":"--btcpay-neutral-light-400","reference":null,"type":"color"},{"value":"206,212,218","category":"Neutral Light","name":"Neutral Light 400","variable":"--btcpay-neutral-light-400-rgb","reference":null,"type":"color"},{"value":"#8f979e","category":"Neutral Light","name":"Neutral Light 500","variable":"--btcpay-neutral-light-500","reference":null,"type":"color"},{"value":"143,151,158","category":"Neutral Light","name":"Neutral Light 500","variable":"--btcpay-neutral-light-500-rgb","reference":null,"type":"color"},{"value":"#6c757d","category":"Neutral Light","name":"Neutral Light 600","variable":"--btcpay-neutral-light-600","reference":null,"type":"color"},{"value":"108,117,125","category":"Neutral Light","name":"Neutral Light 600","variable":"--btcpay-neutral-light-600-rgb","reference":null,"type":"color"},{"value":"#495057","category":"Neutral Light","name":"Neutral Light 700","variable":"--btcpay-neutral-light-700","reference":null,"type":"color"},{"value":"73,80,87","category":"Neutral Light","name":"Neutral Light 700","variable":"--btcpay-neutral-light-700-rgb","reference":null,"type":"color"},{"value":"#343a40","category":"Neutral Light","name":"Neutral Light 800","variable":"--btcpay-neutral-light-800","reference":null,"type":"color"},{"value":"52,58,64","category":"Neutral Light","name":"Neutral Light 800","variable":"--btcpay-neutral-light-800-rgb","reference":null,"type":"color"},{"value":"#292929","category":"Neutral Light","name":"Neutral Light 900","variable":"--btcpay-neutral-light-900","reference":null,"type":"color"},{"value":"41,41,41","category":"Neutral Light","name":"Neutral Light 900","variable":"--btcpay-neutral-light-900-rgb","reference":null,"type":"color"},{"value":"143,151,158","category":"Neutral Light","name":"Neutral Light RGB","variable":"--btcpay-neutral-light-rgb","type":"color"}]},{"type":"category","name":"Neutral Dark","tokens":[{"value":"#F0F6FC","category":"Neutral Dark","name":"Neutral Dark 100","variable":"--btcpay-neutral-dark-100","reference":null,"type":"color"},{"value":"240,246,252","category":"Neutral Dark","name":"Neutral Dark 100","variable":"--btcpay-neutral-dark-100-rgb","reference":null,"type":"color"},{"value":"#C9D1D9","category":"Neutral Dark","name":"Neutral Dark 200","variable":"--btcpay-neutral-dark-200","reference":null,"type":"color"},{"value":"201,209,217","category":"Neutral Dark","name":"Neutral Dark 200","variable":"--btcpay-neutral-dark-200-rgb","reference":null,"type":"color"},{"value":"#B1BAC4","category":"Neutral Dark","name":"Neutral Dark 300","variable":"--btcpay-neutral-dark-300","reference":null,"type":"color"},{"value":"177,186,196","category":"Neutral Dark","name":"Neutral Dark 300","variable":"--btcpay-neutral-dark-300-rgb","reference":null,"type":"color"},{"value":"#8B949E","category":"Neutral Dark","name":"Neutral Dark 400","variable":"--btcpay-neutral-dark-400","reference":null,"type":"color"},{"value":"139,148,158","category":"Neutral Dark","name":"Neutral Dark 400","variable":"--btcpay-neutral-dark-400-rgb","reference":null,"type":"color"},{"value":"#6E7681","category":"Neutral Dark","name":"Neutral Dark 500","variable":"--btcpay-neutral-dark-500","reference":null,"type":"color"},{"value":"110,118,129","category":"Neutral Dark","name":"Neutral Dark 500","variable":"--btcpay-neutral-dark-500-rgb","reference":null,"type":"color"},{"value":"#484F58","category":"Neutral Dark","name":"Neutral Dark 600","variable":"--btcpay-neutral-dark-600","reference":null,"type":"color"},{"value":"72,79,88","category":"Neutral Dark","name":"Neutral Dark 600","variable":"--btcpay-neutral-dark-600-rgb","reference":null,"type":"color"},{"value":"#30363D","category":"Neutral Dark","name":"Neutral Dark 700","variable":"--btcpay-neutral-dark-700","reference":null,"type":"color"},{"value":"48,54,61","category":"Neutral Dark","name":"Neutral Dark 700","variable":"--btcpay-neutral-dark-700-rgb","reference":null,"type":"color"},{"value":"#21262D","category":"Neutral Dark","name":"Neutral Dark 800","variable":"--btcpay-neutral-dark-800","reference":null,"type":"color"},{"value":"33,38,45","category":"Neutral Dark","name":"Neutral Dark 800","variable":"--btcpay-neutral-dark-800-rgb","reference":null,"type":"color"},{"value":"#161B22","category":"Neutral Dark","name":"Neutral Dark 900","variable":"--btcpay-neutral-dark-900","reference":null,"type":"color"},{"value":"22,27,34","category":"Neutral Dark","name":"Neutral Dark 900","variable":"--btcpay-neutral-dark-900-rgb","reference":null,"type":"color"},{"value":"110,118,129","category":"Neutral Dark","name":"Neutral Dark RGB","variable":"--btcpay-neutral-dark-rgb","type":"color"}]},{"type":"category","name":"Primary","tokens":[{"value":"#c7e6c1","category":"Primary","name":"Primary 100","variable":"--btcpay-primary-100","reference":null,"type":"color"},{"value":"199,230,193","category":"Primary","name":"Primary 100","variable":"--btcpay-primary-100-rgb","reference":null,"type":"color"},{"value":"#b5dead","category":"Primary","name":"Primary 200","variable":"--btcpay-primary-200","reference":null,"type":"color"},{"value":"181,222,173","category":"Primary","name":"Primary 200","variable":"--btcpay-primary-200-rgb","reference":null,"type":"color"},{"value":"#9dd392","category":"Primary","name":"Primary 300","variable":"--btcpay-primary-300","reference":null,"type":"color"},{"value":"157,211,146","category":"Primary","name":"Primary 300","variable":"--btcpay-primary-300-rgb","reference":null,"type":"color"},{"value":"#7cc46e","category":"Primary","name":"Primary 400","variable":"--btcpay-primary-400","reference":null,"type":"color"},{"value":"124,196,110","category":"Primary","name":"Primary 400","variable":"--btcpay-primary-400-rgb","reference":null,"type":"color"},{"value":"#44a431","category":"Primary","name":"Primary 500","variable":"--btcpay-primary-500","reference":null,"type":"color"},{"value":"68,164,49","category":"Primary","name":"Primary 500","variable":"--btcpay-primary-500-rgb","reference":null,"type":"color"},{"value":"#389725","category":"Primary","name":"Primary 600","variable":"--btcpay-primary-600","reference":null,"type":"color"},{"value":"56,151,37","category":"Primary","name":"Primary 600","variable":"--btcpay-primary-600-rgb","reference":null,"type":"color"},{"value":"#2e8a1b","category":"Primary","name":"Primary 700","variable":"--btcpay-primary-700","reference":null,"type":"color"},{"value":"46,138,27","category":"Primary","name":"Primary 700","variable":"--btcpay-primary-700-rgb","reference":null,"type":"color"},{"value":"#247d12","category":"Primary","name":"Primary 800","variable":"--btcpay-primary-800","reference":null,"type":"color"},{"value":"36,125,18","category":"Primary","name":"Primary 800","variable":"--btcpay-primary-800-rgb","reference":null,"type":"color"},{"value":"#1c710b","category":"Primary","name":"Primary 900","variable":"--btcpay-primary-900","reference":null,"type":"color"},{"value":"28,113,11","category":"Primary","name":"Primary 900","variable":"--btcpay-primary-900-rgb","reference":null,"type":"color"},{"value":"68,164,49","category":"Primary","name":"Primary RGB","variable":"--btcpay-primary-rgb","type":"color"}]},{"type":"category","name":"Green","tokens":[{"value":"#EEFAEB","category":"Green","name":"Green 100","variable":"--btcpay-green-100","reference":null,"type":"color"},{"value":"238,250,235","category":"Green","name":"Green 100","variable":"--btcpay-green-100-rgb","reference":null,"type":"color"},{"value":"#C7E8C0","category":"Green","name":"Green 200","variable":"--btcpay-green-200","reference":null,"type":"color"},{"value":"199,232,192","category":"Green","name":"Green 200","variable":"--btcpay-green-200-rgb","reference":null,"type":"color"},{"value":"#A0D695","category":"Green","name":"Green 300","variable":"--btcpay-green-300","reference":null,"type":"color"},{"value":"160,214,149","category":"Green","name":"Green 300","variable":"--btcpay-green-300-rgb","reference":null,"type":"color"},{"value":"#78C369","category":"Green","name":"Green 400","variable":"--btcpay-green-400","reference":null,"type":"color"},{"value":"120,195,105","category":"Green","name":"Green 400","variable":"--btcpay-green-400-rgb","reference":null,"type":"color"},{"value":"#51B13E","category":"Green","name":"Green 500","variable":"--btcpay-green-500","reference":null,"type":"color"},{"value":"81,177,62","category":"Green","name":"Green 500","variable":"--btcpay-green-500-rgb","reference":null,"type":"color"},{"value":"#419437","category":"Green","name":"Green 600","variable":"--btcpay-green-600","reference":null,"type":"color"},{"value":"65,148,55","category":"Green","name":"Green 600","variable":"--btcpay-green-600-rgb","reference":null,"type":"color"},{"value":"#307630","category":"Green","name":"Green 700","variable":"--btcpay-green-700","reference":null,"type":"color"},{"value":"48,118,48","category":"Green","name":"Green 700","variable":"--btcpay-green-700-rgb","reference":null,"type":"color"},{"value":"#205928","category":"Green","name":"Green 800","variable":"--btcpay-green-800","reference":null,"type":"color"},{"value":"32,89,40","category":"Green","name":"Green 800","variable":"--btcpay-green-800-rgb","reference":null,"type":"color"},{"value":"#0F3B21","category":"Green","name":"Green 900","variable":"--btcpay-green-900","reference":null,"type":"color"},{"value":"15,59,33","category":"Green","name":"Green 900","variable":"--btcpay-green-900-rgb","reference":null,"type":"color"},{"value":"81,177,62","category":"Green","name":"Green RGB","variable":"--btcpay-green-rgb","type":"color"}]},{"type":"category","name":"Blue","tokens":[{"value":"#b5e1e8","category":"Blue","name":"Blue 100","variable":"--btcpay-blue-100","reference":null,"type":"color"},{"value":"181,225,232","category":"Blue","name":"Blue 100","variable":"--btcpay-blue-100-rgb","reference":null,"type":"color"},{"value":"#9dd7e1","category":"Blue","name":"Blue 200","variable":"--btcpay-blue-200","reference":null,"type":"color"},{"value":"157,215,225","category":"Blue","name":"Blue 200","variable":"--btcpay-blue-200-rgb","reference":null,"type":"color"},{"value":"#7ccad7","category":"Blue","name":"Blue 300","variable":"--btcpay-blue-300","reference":null,"type":"color"},{"value":"124,202,215","category":"Blue","name":"Blue 300","variable":"--btcpay-blue-300-rgb","reference":null,"type":"color"},{"value":"#51b9c9","category":"Blue","name":"Blue 400","variable":"--btcpay-blue-400","reference":null,"type":"color"},{"value":"81,185,201","category":"Blue","name":"Blue 400","variable":"--btcpay-blue-400-rgb","reference":null,"type":"color"},{"value":"#17a2b8","category":"Blue","name":"Blue 500","variable":"--btcpay-blue-500","reference":null,"type":"color"},{"value":"23,162,184","category":"Blue","name":"Blue 500","variable":"--btcpay-blue-500-rgb","reference":null,"type":"color"},{"value":"#03899e","category":"Blue","name":"Blue 600","variable":"--btcpay-blue-600","reference":null,"type":"color"},{"value":"3,137,158","category":"Blue","name":"Blue 600","variable":"--btcpay-blue-600-rgb","reference":null,"type":"color"},{"value":"#007d91","category":"Blue","name":"Blue 700","variable":"--btcpay-blue-700","reference":null,"type":"color"},{"value":"0,125,145","category":"Blue","name":"Blue 700","variable":"--btcpay-blue-700-rgb","reference":null,"type":"color"},{"value":"#007284","category":"Blue","name":"Blue 800","variable":"--btcpay-blue-800","reference":null,"type":"color"},{"value":"0,114,132","category":"Blue","name":"Blue 800","variable":"--btcpay-blue-800-rgb","reference":null,"type":"color"},{"value":"#006778","category":"Blue","name":"Blue 900","variable":"--btcpay-blue-900","reference":null,"type":"color"},{"value":"0,103,120","category":"Blue","name":"Blue 900","variable":"--btcpay-blue-900-rgb","reference":null,"type":"color"},{"value":"23,162,184","category":"Blue","name":"Blue RGB","variable":"--btcpay-blue-rgb","type":"color"}]},{"type":"category","name":"Yellow","tokens":[{"value":"#FFFAF0","category":"Yellow","name":"Yellow 100","variable":"--btcpay-yellow-100","reference":null,"type":"color"},{"value":"255,250,240","category":"Yellow","name":"Yellow 100","variable":"--btcpay-yellow-100-rgb","reference":null,"type":"color"},{"value":"#FFF2D9","category":"Yellow","name":"Yellow 200","variable":"--btcpay-yellow-200","reference":null,"type":"color"},{"value":"255,242,217","category":"Yellow","name":"Yellow 200","variable":"--btcpay-yellow-200-rgb","reference":null,"type":"color"},{"value":"#FFE3AC","category":"Yellow","name":"Yellow 300","variable":"--btcpay-yellow-300","reference":null,"type":"color"},{"value":"255,227,172","category":"Yellow","name":"Yellow 300","variable":"--btcpay-yellow-300-rgb","reference":null,"type":"color"},{"value":"#FFCF70","category":"Yellow","name":"Yellow 400","variable":"--btcpay-yellow-400","reference":null,"type":"color"},{"value":"255,207,112","category":"Yellow","name":"Yellow 400","variable":"--btcpay-yellow-400-rgb","reference":null,"type":"color"},{"value":"#FFC043","category":"Yellow","name":"Yellow 500","variable":"--btcpay-yellow-500","reference":null,"type":"color"},{"value":"255,192,67","category":"Yellow","name":"Yellow 500","variable":"--btcpay-yellow-500-rgb","reference":null,"type":"color"},{"value":"#B57E12","category":"Yellow","name":"Yellow 600","variable":"--btcpay-yellow-600","reference":null,"type":"color"},{"value":"181,126,18","category":"Yellow","name":"Yellow 600","variable":"--btcpay-yellow-600-rgb","reference":null,"type":"color"},{"value":"#997328","category":"Yellow","name":"Yellow 700","variable":"--btcpay-yellow-700","reference":null,"type":"color"},{"value":"153,115,40","category":"Yellow","name":"Yellow 700","variable":"--btcpay-yellow-700-rgb","reference":null,"type":"color"},{"value":"#674D1B","category":"Yellow","name":"Yellow 800","variable":"--btcpay-yellow-800","reference":null,"type":"color"},{"value":"103,77,27","category":"Yellow","name":"Yellow 800","variable":"--btcpay-yellow-800-rgb","reference":null,"type":"color"},{"value":"#543D10","category":"Yellow","name":"Yellow 900","variable":"--btcpay-yellow-900","reference":null,"type":"color"},{"value":"84,61,16","category":"Yellow","name":"Yellow 900","variable":"--btcpay-yellow-900-rgb","reference":null,"type":"color"},{"value":"255,192,67","category":"Yellow","name":"Yellow RGB","variable":"--btcpay-yellow-rgb","type":"color"}]},{"type":"category","name":"Red","tokens":[{"value":"#FFEFED","category":"Red","name":"Red 100","variable":"--btcpay-red-100","reference":null,"type":"color"},{"value":"255,239,237","category":"Red","name":"Red 100","variable":"--btcpay-red-100-rgb","reference":null,"type":"color"},{"value":"#FED7D2","category":"Red","name":"Red 200","variable":"--btcpay-red-200","reference":null,"type":"color"},{"value":"254,215,210","category":"Red","name":"Red 200","variable":"--btcpay-red-200-rgb","reference":null,"type":"color"},{"value":"#F1998E","category":"Red","name":"Red 300","variable":"--btcpay-red-300","reference":null,"type":"color"},{"value":"241,153,142","category":"Red","name":"Red 300","variable":"--btcpay-red-300-rgb","reference":null,"type":"color"},{"value":"#E85C4A","category":"Red","name":"Red 400","variable":"--btcpay-red-400","reference":null,"type":"color"},{"value":"232,92,74","category":"Red","name":"Red 400","variable":"--btcpay-red-400-rgb","reference":null,"type":"color"},{"value":"#E11900","category":"Red","name":"Red 500","variable":"--btcpay-red-500","reference":null,"type":"color"},{"value":"225,25,0","category":"Red","name":"Red 500","variable":"--btcpay-red-500-rgb","reference":null,"type":"color"},{"value":"#AB1300","category":"Red","name":"Red 600","variable":"--btcpay-red-600","reference":null,"type":"color"},{"value":"171,19,0","category":"Red","name":"Red 600","variable":"--btcpay-red-600-rgb","reference":null,"type":"color"},{"value":"#870F00","category":"Red","name":"Red 700","variable":"--btcpay-red-700","reference":null,"type":"color"},{"value":"135,15,0","category":"Red","name":"Red 700","variable":"--btcpay-red-700-rgb","reference":null,"type":"color"},{"value":"#5A0A00","category":"Red","name":"Red 800","variable":"--btcpay-red-800","reference":null,"type":"color"},{"value":"90,10,0","category":"Red","name":"Red 800","variable":"--btcpay-red-800-rgb","reference":null,"type":"color"},{"value":"#420105","category":"Red","name":"Red 900","variable":"--btcpay-red-900","reference":null,"type":"color"},{"value":"66,1,5","category":"Red","name":"Red 900","variable":"--btcpay-red-900-rgb","reference":null,"type":"color"},{"value":"225,25,0","category":"Red","name":"Red RGB","variable":"--btcpay-red-rgb","type":"color"}]}],"id":"design/colors","title":"Colors","isTitleFromHeading":true,"path":"design/colors","sourcePath":"pages/design/colors","sourceFile":"pages/design/colors/page.config.js","readmeFile":"pages/design/colors/README.md","type":"tokens","content":"\u003ch1 id=\"colors\" tabindex=\"-1\"\u003eColors\u003c/h1\u003e"},"design/fonts":{"childIds":[],"tokens":[{"type":"category","name":"Font sizes","tokens":[{"name":"XS","value":"10px","variable":"--btcpay-font-size-xs"},{"name":"S","value":"12px","variable":"--btcpay-font-size-s"},{"name":"M","value":"14px","variable":"--btcpay-font-size-m"},{"name":"L","value":"20px","variable":"--btcpay-font-size-l"},{"name":"XL","value":"28px","variable":"--btcpay-font-size-xl"},{"name":"XXL","value":"36px","variable":"--btcpay-font-size-xxl"}]},{"type":"category","name":"Font weights","tokens":[{"name":"Regular","value":400,"variable":"--btcpay-font-weight-normal"},{"name":"Semibold","value":600,"variable":"--btcpay-font-weight-semibold"},{"name":"Bold","value":700,"variable":"--btcpay-font-weight-bold"}]},{"type":"category","name":"Font families","tokens":[{"type":"category","name":"Base","tokens":[{"type":"font","fontweight":"Regular / 400","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 400; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Semibold / 600","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 600; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Bold / 700","description":"\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif","value":"font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif; font-weight: 700; ","variable":"--btcpay-font-family-base","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"}]},{"type":"category","name":"Monospace","tokens":[{"type":"font","fontweight":"Regular / 400","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 400; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Semibold / 600","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 600; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"},{"type":"font","fontweight":"Bold / 700","description":"SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace","value":"font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; font-weight: 700; ","variable":"--btcpay-font-family-monospace","sizes":["10px","12px","14px","20px","28px","36px"],"text":"Chancellor on Brink of Second Bailout for Banks"}]}]}],"id":"design/fonts","title":"Fonts","isTitleFromHeading":true,"path":"design/fonts","sourcePath":"pages/design/fonts","sourceFile":"pages/design/fonts/page.config.js","readmeFile":"pages/design/fonts/README.md","type":"tokens","content":"\u003ch1 id=\"fonts\" tabindex=\"-1\"\u003eFonts\u003c/h1\u003e\n\u003cp\u003eThe different fonts can be use via the combination of the CSS properties \u003ccode\u003efont-family\u003c/code\u003e and \u003ccode\u003efont-weight\u003c/code\u003e.\u003c/p\u003e"},"design/icons":{"childIds":[],"title":"Icons","tokens":[{"type":"category","name":"actions","tokens":[{"type":"icon","name":"actions-add","variable":"actions-add","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-add\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-archive","variable":"actions-archive","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-archive\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-comment","variable":"actions-comment","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-comment\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-copy","variable":"actions-copy","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-copy\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-download","variable":"actions-download","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-download\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-drag","variable":"actions-drag","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-drag\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-email","variable":"actions-email","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-email\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-hide","variable":"actions-hide","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-hide\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-refresh","variable":"actions-refresh","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-refresh\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-remove","variable":"actions-remove","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-remove\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-search","variable":"actions-search","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-search\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-send","variable":"actions-send","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-send\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-show","variable":"actions-show","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-show\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-alpha-asc","variable":"actions-sort-alpha-asc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-alpha-asc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-alpha-desc","variable":"actions-sort-alpha-desc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-alpha-desc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-asc-alt","variable":"actions-sort-asc-alt","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-asc-alt\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-asc","variable":"actions-sort-asc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-asc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-desc-alt","variable":"actions-sort-desc-alt","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-desc-alt\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort-desc","variable":"actions-sort-desc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort-desc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-sort","variable":"actions-sort","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-sort\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"actions-trash","variable":"actions-trash","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#actions-trash\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"general","tokens":[{"type":"icon","name":"api","variable":"api","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#api\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"back","variable":"back","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#back\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"block","variable":"block","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#block\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"calendar","variable":"calendar","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#calendar\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkmark","variable":"checkmark","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkmark\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"close","variable":"close","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#close\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"cross","variable":"cross","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#cross\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"docs","variable":"docs","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#docs\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"donate","variable":"donate","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#donate\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"done","variable":"done","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#done\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"dots","variable":"dots","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#dots\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"info","variable":"info","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#info\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"key","variable":"key","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#key\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lightning-node","variable":"lightning-node","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lightning-node\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lightning","variable":"lightning","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lightning\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lock","variable":"lock","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#lock\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"minus","variable":"minus","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#minus\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"plus","variable":"plus","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#plus\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"qr-code","variable":"qr-code","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#qr-code\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"scan-qr","variable":"scan-qr","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#scan-qr\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"settings","variable":"settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"time","variable":"time","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#time\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"warning","variable":"warning","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#warning\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"caret","tokens":[{"type":"icon","name":"caret-down","variable":"caret-down","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-left","variable":"caret-left","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-left\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-right","variable":"caret-right","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"caret-up","variable":"caret-up","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#caret-up\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"checkout","tokens":[{"type":"icon","name":"checkout-complete","variable":"checkout-complete","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-complete\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkout-expired","variable":"checkout-expired","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-expired\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"checkout-sent","variable":"checkout-sent","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#checkout-sent\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"forms","tokens":[{"type":"icon","name":"forms-checkbox","variable":"forms-checkbox","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-checkbox\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-date","variable":"forms-date","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-date\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-number","variable":"forms-number","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-number\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-select","variable":"forms-select","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-select\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"forms-text","variable":"forms-text","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#forms-text\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"keypad","tokens":[{"type":"icon","name":"keypad-clear","variable":"keypad-clear","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#keypad-clear\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"keypad-plus","variable":"keypad-plus","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#keypad-plus\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"logo","tokens":[{"type":"icon","name":"logo-btcpay","variable":"logo-btcpay","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-btcpay\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-lightningterminal","variable":"logo-lightningterminal","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-lightningterminal\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-rtl","variable":"logo-rtl","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-rtl\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-shopify","variable":"logo-shopify","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-shopify\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-thunderhub","variable":"logo-thunderhub","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-thunderhub\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"logo-tor","variable":"logo-tor","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#logo-tor\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"nav","tokens":[{"type":"icon","name":"nav-account","variable":"nav-account","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-account\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-contact","variable":"nav-contact","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-contact\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-crowdfund","variable":"nav-crowdfund","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-crowdfund\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-dashboard","variable":"nav-dashboard","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-dashboard\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-explore","variable":"nav-explore","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-explore\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-invoice","variable":"nav-invoice","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-invoice\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-invoices","variable":"nav-invoices","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-invoices\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-keypad","variable":"nav-keypad","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-keypad\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-lightning-address","variable":"nav-lightning-address","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-lightning-address\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-menu","variable":"nav-menu","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-menu\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-mobile-menu","variable":"nav-mobile-menu","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-mobile-menu\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-notifications","variable":"nav-notifications","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-notifications\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pay-button","variable":"nav-pay-button","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pay-button\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-payment-requests","variable":"nav-payment-requests","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-payment-requests\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-payouts","variable":"nav-payouts","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-payouts\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugin","variable":"nav-plugin","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugin\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugins-explore","variable":"nav-plugins-explore","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugins-explore\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-plugins-manage","variable":"nav-plugins-manage","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-plugins-manage\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pointofsale","variable":"nav-pointofsale","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pointofsale\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-products","variable":"nav-products","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-products\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-pull-payments","variable":"nav-pull-payments","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-pull-payments\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-reporting","variable":"nav-reporting","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-reporting\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-server-settings","variable":"nav-server-settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-server-settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-store-settings","variable":"nav-store-settings","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-store-settings\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-store","variable":"nav-store","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-store\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"nav-transactions","variable":"nav-transactions","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#nav-transactions\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"notifications","tokens":[{"type":"icon","name":"notifications-account","variable":"notifications-account","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-account\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-invoice-failure","variable":"notifications-invoice-failure","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-invoice-failure\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-invoice-settled","variable":"notifications-invoice-settled","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-invoice-settled\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-new-version","variable":"notifications-new-version","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-new-version\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-payout-approved","variable":"notifications-payout-approved","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-payout-approved\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-payout","variable":"notifications-payout","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-payout\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-plugin-disabled","variable":"notifications-plugin-disabled","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-plugin-disabled\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"notifications-plugin-released","variable":"notifications-plugin-released","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#notifications-plugin-released\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"payment","tokens":[{"type":"icon","name":"payment-receive","variable":"payment-receive","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#payment-receive\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"payment-send","variable":"payment-send","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#payment-send\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"pos","tokens":[{"type":"icon","name":"pos-cart","variable":"pos-cart","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-cart\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-light","variable":"pos-light","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-light\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-print","variable":"pos-print","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-print\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"pos-static","variable":"pos-static","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#pos-static\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"review","tokens":[{"type":"icon","name":"review-empty","variable":"review-empty","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-empty\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"review-full","variable":"review-full","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-full\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"review-half","variable":"review-half","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#review-half\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"social","tokens":[{"type":"icon","name":"social-github","variable":"social-github","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-github\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-mattermost","variable":"social-mattermost","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-mattermost\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-nostr","variable":"social-nostr","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-nostr\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-telegram","variable":"social-telegram","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-telegram\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"social-twitter","variable":"social-twitter","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#social-twitter\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"themes","tokens":[{"type":"icon","name":"themes-dark","variable":"themes-dark","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-dark\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"themes-light","variable":"themes-light","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-light\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"themes-system","variable":"themes-system","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#themes-system\"/\u003e\u003c/svg\u003e"}]},{"type":"category","name":"wallet","tokens":[{"type":"icon","name":"wallet-existing","variable":"wallet-existing","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-existing\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-file","variable":"wallet-file","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-file\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-hardware","variable":"wallet-hardware","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-hardware\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-hot","variable":"wallet-hot","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-hot\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-new","variable":"wallet-new","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-new\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-seed","variable":"wallet-seed","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-seed\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-wallet","variable":"wallet-wallet","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-wallet\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-watchonly","variable":"wallet-watchonly","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-watchonly\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"wallet-xpub","variable":"wallet-xpub","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/icons.svg#wallet-xpub\"/\u003e\u003c/svg\u003e"}]}],"id":"design/icons","path":"design/icons","sourcePath":"pages/design/icons","sourceFile":"pages/design/icons/page.config.js","readmeFile":"pages/design/icons/README.md","type":"tokens","content":""},"design/spaces":{"childIds":[],"tokens":[{"type":"size","name":"XS","value":"4px","variable":"--btcpay-space-xs"},{"type":"size","name":"S","value":"8px","variable":"--btcpay-space-s"},{"type":"size","name":"M","value":"16px","variable":"--btcpay-space-m"},{"type":"size","name":"L","value":"32px","variable":"--btcpay-space-l"},{"type":"size","name":"XL","value":"64px","variable":"--btcpay-space-xl"},{"type":"size","name":"XXL","value":"80px","variable":"--btcpay-space-xxl"}],"id":"design/spaces","title":"Spaces","isTitleFromHeading":true,"path":"design/spaces","sourcePath":"pages/design/spaces","sourceFile":"pages/design/spaces/page.config.js","readmeFile":"pages/design/spaces/README.md","type":"tokens","content":"\u003ch1 id=\"spaces\" tabindex=\"-1\"\u003eSpaces\u003c/h1\u003e\n\u003cp\u003eThe spacings should be used via the CSS custom properties:\u003c/p\u003e\n\u003cpre class=\"hljs lang-css\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-selector-class\"\u003e.my-component\u003c/span\u003e {\n  \u003cspan class=\"hljs-attribute\"\u003emargin-left\u003c/span\u003e: \u003cspan class=\"hljs-built_in\"\u003evar\u003c/span\u003e(--btcpay-space-m);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eIn addition to that there are also utility classes like \u003ccode\u003ebtcpay-space-x\u003c/code\u003e, which apply the space as \u003ccode\u003emargin-bottom\u003c/code\u003e:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ediv\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003eclass\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;btcpay-space-x\u0026quot;\u003c/span\u003e\u0026gt;\u003c/span\u003e…\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ediv\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e"},"design/variables":{"childIds":[],"tokens":[{"type":"category","name":"Borders","tokens":[{"category":"Borders","name":"Border Radius","value":".25rem","variable":"--btcpay-border-radius","type":"border-radius"},{"category":"Borders","name":"Border Radius L","value":".5rem","variable":"--btcpay-border-radius-l","type":"border-radius"},{"category":"Borders","name":"Border Radius XL","value":"1rem","variable":"--btcpay-border-radius-xl","type":"border-radius"},{"category":"Borders","name":"Border Radius XXL","value":"1.5rem","variable":"--btcpay-border-radius-xxl","type":"border-radius"}]},{"type":"category","name":"Transition","tokens":[{"category":"Transition","name":"Transition fast","value":".2s","variable":"--btcpay-transition-duration-fast"},{"category":"Transition","name":"Transition default","value":".3s","variable":"--btcpay-transition-duration-default"},{"category":"Transition","name":"Transition slow","value":".5s","variable":"--btcpay-transition-duration-slow"}]}],"id":"design/variables","title":"Variables","isTitleFromHeading":true,"path":"design/variables","sourcePath":"pages/design/variables","sourceFile":"pages/design/variables/page.config.js","readmeFile":"pages/design/variables/README.md","type":"tokens","content":"\u003ch1 id=\"variables\" tabindex=\"-1\"\u003eVariables\u003c/h1\u003e"},"resources/css":{"childIds":[],"id":"resources/css","title":"CSS","isTitleFromHeading":true,"path":"resources/css","sourcePath":"pages/resources/css","readmeFile":"pages/resources/css/README.md","type":"documentation","content":"\u003ch1 id=\"css\" tabindex=\"-1\"\u003eCSS\u003c/h1\u003e\n\u003cp\u003eTo keep the different apps and websites consistent, we offer these stylesheets you should use to build upon.\u003c/p\u003e\n\u003cp\u003eYou can download the CSS files using the references below and copy them to the styles folder of your project.\u003c/p\u003e\n\u003cp\u003eThen use this HTML snippet inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section to integrate the stylesheets you want to use:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-variables.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-bootstrap.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/styles/btcpayserver-main.css\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;stylesheet\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"variables\" tabindex=\"-1\"\u003eVariables\u003c/h2\u003e\n\u003cp\u003eThe codified version of what you find in the design section:\nThis stylesheet does not do anything on its own, but gives you access to the design variables via \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties\"\u003eCSS Custom Properties\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThis file should be the first to include, as every other of the following resources uses the variables it defines.\u003c/p\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-variables.css\"\u003ebtcpayserver-variables.css\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"main-styles\" tabindex=\"-1\"\u003eMain styles\u003c/h2\u003e\n\u003cp\u003eThe most basic set of CSS styles we can share across the different websites.\nThey include the font references and setting for the light/dark color themes.\u003c/p\u003e\n\u003cp\u003eThe general approach regarding the themes is:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eLight mode is the default\u003c/li\u003e\n\u003cli\u003eIf the browser supports the \u003ca href=\"https://web.dev/prefers-color-scheme/\"\u003eprefers-color-scheme media query\u003c/a\u003e, we use the users preference\u003c/li\u003e\n\u003cli\u003eSupport an \u003ca href=\"/components/theme-switch/\"\u003eexplicit setting\u003c/a\u003e saved in the browsers \u003ccode\u003elocalStorage\u003c/code\u003e, that the user can change via a switch\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-main.css\"\u003ebtcpayserver-main.css\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"bootstrap\" tabindex=\"-1\"\u003eBootstrap\u003c/h2\u003e\n\u003cp\u003eThis is our forked version of \u003ca href=\"https://getbootstrap.com/\"\u003eBootstrap\u003c/a\u003e.\nIncluding this is optional and only required if you want to build upon what Bootstrap offers.\u003c/p\u003e\n\u003cp\u003e📦 \u003ca href=\"/styles/btcpayserver-bootstrap.css\"\u003ebtcpayserver-bootstrap.css\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"why-do-we-use-a-fork%3F\" tabindex=\"-1\"\u003eWhy do we use a fork?\u003c/h3\u003e\n\u003cp\u003eBootstrap v5 unfortunately doesn’t fully support CSS Custom Properties (\u003ca href=\"https://github.com/twbs/bootstrap/commit/ac58c25dc8b65928ac817b8a2bf7c0e46a58de97\"\u003eyet\u003c/a\u003e), but that is what we need for our theming approach.\nSo the idea was to maintain this fork at a central place and use it as our custom version.\u003c/p\u003e\n\u003ch2 id=\"old-themes\" tabindex=\"-1\"\u003eOld themes\u003c/h2\u003e\n\u003cp\u003eWe have deprecated these previous themes, but keep them here for reference:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/styles/btcpayserver-theme-classic.css\"\u003eClassic\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/styles/btcpayserver-theme-casa.css\"\u003eCasa\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e"},"resources/design-files":{"childIds":[],"id":"resources/design-files","title":"Design files","isTitleFromHeading":true,"path":"resources/design-files","sourcePath":"pages/resources/design-files","readmeFile":"pages/resources/design-files/README.md","type":"documentation","content":"\u003ch1 id=\"design-files\" tabindex=\"-1\"\u003eDesign files\u003c/h1\u003e\n\u003ch2 id=\"color-palette\" tabindex=\"-1\"\u003eColor Palette\u003c/h2\u003e\n\u003cp\u003eYou can \u003ca href=\"./btcpay.gpl\"\u003edownload the color palette for GIMP/Inkscape\u003c/a\u003e.\u003c/p\u003e\n\u003ch2 id=\"logo\" tabindex=\"-1\"\u003eLogo\u003c/h2\u003e\n\u003cp\u003eYou can \u003ca href=\"./btcpay-logo.ai\"\u003edownload the logo for Adobe Illustrator\u003c/a\u003e.\u003c/p\u003e\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eImage\u003c/th\u003e\n\u003cth\u003eDownloads\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo-black-txt.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo-black-txt.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo-black-txt.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"./btcpay-logo-white-txt.svg\" alt=\"\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"./btcpay-logo-white-txt.svg\"\u003eSVG\u003c/a\u003e | \u003ca href=\"./btcpay-logo-white-txt.png\"\u003ePNG\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\u003cstyle\u003e\n  table img { height: 4em !important; margin: .2em 1em !important; display: block !important; }\n  table td { vertical-align: middle !important; }\n  table td:first-child { background: var(--uie-color-bg-medium) !important; }\n\u003c/style\u003e\n\u003ch2 id=\"further-resources\" tabindex=\"-1\"\u003eFurther resources\u003c/h2\u003e\n\u003cp\u003eAlso see the \u003ca href=\"https://github.com/btcpayserver/btcpayserver-media\"\u003emedia asset repository for BTCPay Server\u003c/a\u003e.\u003c/p\u003e","files":["/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-icon.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-black-txt.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-black-txt.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-white-txt.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo-white-txt.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.ai","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.png","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay-logo.svg","/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/design-files/btcpay.gpl"]},"resources/favicon":{"childIds":[],"id":"resources/favicon","title":"Favicon","isTitleFromHeading":true,"path":"resources/favicon","sourcePath":"pages/resources/favicon","readmeFile":"pages/resources/favicon/README.md","type":"documentation","content":"\u003ch1 id=\"favicon\" tabindex=\"-1\"\u003eFavicon\u003c/h1\u003e\n\u003cp\u003eYou can \u003ca href=\"./favicon.zip\"\u003edownload the favicon files\u003c/a\u003e and copy them to the root folder of your project.\u003c/p\u003e\n\u003cp\u003eThen use this HTML snippet inside the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e section to integrate the favicon:\u003c/p\u003e\n\u003cpre class=\"hljs lang-html\"\u003e\u003ccode\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;apple-touch-icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;180x180\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/apple-touch-icon.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;image/png\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;32x32\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/favicon-32x32.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;image/png\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003esizes\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;16x16\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/favicon-16x16.png\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;manifest\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/site.webmanifest\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003elink\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003erel\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;mask-icon\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ehref\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;/safari-pinned-tab.svg\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ecolor\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#51b13e\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;msapplication-TileColor\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003econtent\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#0f3b21\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;theme-color\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003econtent\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;#ffffff\u0026quot;\u003c/span\u003e /\u0026gt;\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e","files":["/home/runner/work/btcpayserver-design/btcpayserver-design/pages/resources/favicon/favicon.zip"]},"resources/supporters":{"childIds":[],"title":"Supporters","tokens":[{"type":"icon","name":"bailliegifford","variable":"bailliegifford","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#bailliegifford\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"coincards","variable":"coincards","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#coincards\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"esc","variable":"esc","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#esc\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"hrf","variable":"hrf","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#hrf\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"ivpn","variable":"ivpn","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#ivpn\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"lunanode","variable":"lunanode","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#lunanode\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"opensats","variable":"opensats","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#opensats\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"spiral","variable":"spiral","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#spiral\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"strike","variable":"strike","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#strike\"/\u003e\u003c/svg\u003e"},{"type":"icon","name":"walletofsatoshi","variable":"walletofsatoshi","value":"\u003csvg role=\"img\"\u003e\u003cuse href=\"/svg/supporters.svg#walletofsatoshi\"/\u003e\u003c/svg\u003e"}],"id":"resources/supporters","path":"resources/supporters","sourcePath":"pages/resources/supporters","sourceFile":"pages/resources/supporters/page.config.js","readmeFile":"pages/resources/supporters/README.md","type":"tokens","content":"\u003cp\u003eThe BTCPay Server Project is proudly supported by these entities through the BTCPay Server Foundation\u003c/p\u003e"}},"components":{"bootstrap":{"id":"bootstrap","title":"Bootstrap v5","isTitleFromHeading":true,"content":"\u003ch1 id=\"bootstrap-v5\" tabindex=\"-1\"\u003eBootstrap v5\u003c/h1\u003e\n\u003cp\u003eThis is a \u003ca href=\"https://getbootstrap.com/docs/\"\u003eBootstrap\u003c/a\u003e kitchensink page that showcases everything and all together.\nIt is intended to be used as a quick overview/reference and to check the themes.\u003c/p\u003e","variants":[{"file":"typography.html","id":"bootstrap/typography.html-1","componentId":"bootstrap","title":"Typography","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"display-1\"\u003eDisplay 1\u003c/p\u003e\n\u003cp class=\"display-2\"\u003eDisplay 2\u003c/p\u003e\n\u003cp class=\"display-3\"\u003eDisplay 3\u003c/p\u003e\n\u003cp class=\"display-4\"\u003eDisplay 4\u003c/p\u003e\n\u003cp class=\"display-5\"\u003eDisplay 5\u003c/p\u003e\n\u003cp class=\"display-6\"\u003eDisplay 6\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"h1\"\u003eHeading 1\u003c/p\u003e\n\u003cp class=\"h2\"\u003eHeading 2\u003c/p\u003e\n\u003cp class=\"h3\"\u003eHeading 3\u003c/p\u003e\n\u003cp class=\"h4\"\u003eHeading 4\u003c/p\u003e\n\u003cp class=\"h5\"\u003eHeading 5\u003c/p\u003e\n\u003cp class=\"h6\"\u003eHeading 6\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp class=\"lead\"\u003e\n  This is a lead paragraph. It stands out from regular paragraphs.\n\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cp\u003eYou can \u003ca href=\"#\"\u003elink\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eYou can use the mark tag to \u003cmark\u003ehighlight\u003c/mark\u003e text.\u003c/p\u003e\n\u003cp\u003e\u003cdel\u003eThis line of text is meant to be treated as deleted text.\u003c/del\u003e\u003c/p\u003e\n\u003cp\u003e\u003cs\u003eThis line of text is meant to be treated as no longer accurate.\u003c/s\u003e\u003c/p\u003e\n\u003cp\u003e\u003cins\u003eThis line of text is meant to be treated as an addition to the document.\u003c/ins\u003e\u003c/p\u003e\n\u003cp\u003e\u003cu\u003eThis line of text will render as underlined.\u003c/u\u003e\u003c/p\u003e\n\u003cp\u003e\u003csmall\u003eThis line of text is meant to be treated as fine print.\u003c/small\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eThis line rendered as bold text.\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis line rendered as italicized text.\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cblockquote class=\"blockquote\"\u003e\n  \u003cp\u003eA well-known quote, contained in a blockquote element.\u003c/p\u003e\n  \u003cfooter class=\"blockquote-footer\"\u003eSomeone famous in \u003ccite title=\"Source Title\"\u003eSource Title\u003c/cite\u003e\u003c/footer\u003e\n\u003c/blockquote\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cul class=\"list-unstyled\"\u003e\n  \u003cli\u003eThis is a list.\u003c/li\u003e\n  \u003cli\u003eIt appears completely unstyled.\u003c/li\u003e\n  \u003cli\u003eStructurally, it's still a list.\u003c/li\u003e\n  \u003cli\u003eHowever, this style only applies to immediate child elements.\u003c/li\u003e\n  \u003cli\u003eNested lists:\n    \u003cul\u003e\n      \u003cli\u003eare unaffected by this style\u003c/li\u003e\n      \u003cli\u003ewill still show a bullet\u003c/li\u003e\n      \u003cli\u003eand have appropriate left margin\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eThis may still come in handy in some situations.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cul class=\"list-inline\"\u003e\n  \u003cli class=\"list-inline-item\"\u003eThis is a list item.\u003c/li\u003e\n  \u003cli class=\"list-inline-item\"\u003eAnd another one.\u003c/li\u003e\n  \u003cli class=\"list-inline-item\"\u003eBut they're displayed inline.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e"},{"file":"images.html","id":"bootstrap/images.html-2","componentId":"bootstrap","title":"Images","extension":"html","raw":"\u003carticle class=\"my-3\" id=\"images\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eImages\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/images/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg img-fluid\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Responsive image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eResponsive image\u003c/text\u003e\u003c/svg\u003e\n\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003csvg class=\"bd-placeholder-img img-thumbnail\" width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003eA generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003e200x200\u003c/text\u003e\u003c/svg\u003e\n\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"figures\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eFigures\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/figures/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cfigure class=\"figure\"\u003e\n      \u003csvg class=\"bd-placeholder-img figure-img img-fluid rounded\" width=\"400\" height=\"300\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: 400x300\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003e400x300\u003c/text\u003e\u003c/svg\u003e\n\n      \u003cfigcaption class=\"figure-caption\"\u003eA caption for the above image.\u003c/figcaption\u003e\n    \u003c/figure\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e"},{"file":"tables.html","id":"bootstrap/tables.html-3","componentId":"bootstrap","title":"Tables","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-dark table-borderless\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-hover\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003eClass\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHeading\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHeading\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003eDefault\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n\n    \u003ctr class=\"table-primary\"\u003e\n      \u003cth scope=\"row\"\u003ePrimary\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-secondary\"\u003e\n      \u003cth scope=\"row\"\u003eSecondary\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-success\"\u003e\n      \u003cth scope=\"row\"\u003eSuccess\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-danger\"\u003e\n      \u003cth scope=\"row\"\u003eDanger\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-warning\"\u003e\n      \u003cth scope=\"row\"\u003eWarning\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-info\"\u003e\n      \u003cth scope=\"row\"\u003eInfo\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-light\"\u003e\n      \u003cth scope=\"row\"\u003eLight\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"table-dark\"\u003e\n      \u003cth scope=\"row\"\u003eDark\u003c/th\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n      \u003ctd\u003eCell\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"bd-example\"\u003e\n  \u003ctable class=\"table table-sm table-bordered\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"col\"\u003e#\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eFirst\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eLast\u003c/th\u003e\n      \u003cth scope=\"col\"\u003eHandle\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e1\u003c/th\u003e\n      \u003ctd\u003eMark\u003c/td\u003e\n      \u003ctd\u003eOtto\u003c/td\u003e\n      \u003ctd\u003e@mdo\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e2\u003c/th\u003e\n      \u003ctd\u003eJacob\u003c/td\u003e\n      \u003ctd\u003eThornton\u003c/td\u003e\n      \u003ctd\u003e@fat\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003cth scope=\"row\"\u003e3\u003c/th\u003e\n      \u003ctd colspan=\"2\"\u003eLarry the Bird\u003c/td\u003e\n      \u003ctd\u003e@twitter\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n  \u003c/table\u003e\n  \u003c/div\u003e"},{"file":"forms.html","id":"bootstrap/forms.html-4","componentId":"bootstrap","title":"Forms","extension":"html","raw":"\u003carticle class=\"my-3\" id=\"overview\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eOverview\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/overview/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"exampleInputEmail1\" class=\"form-label\"\u003eEmail address\u003c/label\u003e\n        \u003cinput type=\"email\" class=\"form-control\" id=\"exampleInputEmail1\" aria-describedby=\"emailHelp\"\u003e\n        \u003cdiv id=\"emailHelp\" class=\"form-text\"\u003eWe'll never share your email with anyone else.\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"exampleInputPassword1\" class=\"form-label\"\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" class=\"form-control\" id=\"exampleInputPassword1\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3 form-check\"\u003e\n        \u003cinput type=\"checkbox\" class=\"form-check-input\" id=\"exampleCheck1\"\u003e\n        \u003clabel class=\"form-check-label\" for=\"exampleCheck1\"\u003eCheck me out\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"form-label\" data-required=\"\" for=\"DefaultCurrency\"\u003eDefault currency\u003c/label\u003e\n        \u003cinput class=\"form-control\" style=\"max-width:12.5ch;\" type=\"text\" data-val=\"true\"\n          data-val-maxlength=\"The field Default currency must be a string or array type with a maximum length of '10'.\"\n          data-val-maxlength-max=\"10\" data-val-required=\"The Default currency field is required.\" id=\"DefaultCurrency\"\n          maxlength=\"10\" name=\"DefaultCurrency\" value=\"USD\" list=\"currency-selection-suggestion\"\u003e\u003cdatalist\n          id=\"currency-selection-suggestion\"\u003e\n          \u003coption value=\"BTC\"\u003e\u003c/option\u003e\n          \u003coption value=\"SATS\"\u003e\u003c/option\u003e\n          \u003coption value=\"USD\"\u003e\u003c/option\u003e\n          \u003coption value=\"EUR\"\u003e\u003c/option\u003e\n          \u003coption value=\"JPY\"\u003e\u003c/option\u003e\n        \u003c/datalist\u003e\n        \u003cspan class=\"text-danger field-validation-valid\" data-valmsg-for=\"DefaultCurrency\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cfieldset class=\"mb-3\"\u003e\n        \u003clegend class=\"h3 my-3\"\u003eRadios buttons\u003c/legend\u003e\n        \u003cdiv class=\"form-check\"\u003e\n          \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"exampleRadio1\"\u003e\n          \u003clabel class=\"form-check-label\" for=\"exampleRadio1\"\u003eDefault radio\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3 form-check\"\u003e\n          \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"exampleRadio2\"\u003e\n          \u003clabel class=\"form-check-label\" for=\"exampleRadio2\"\u003eAnother radio\u003c/label\u003e\n        \u003c/div\u003e\n      \u003c/fieldset\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel class=\"form-label\" for=\"customFile\"\u003eUpload\u003c/label\u003e\n        \u003cinput type=\"file\" class=\"form-control\" id=\"customFile\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3 form-check form-switch\"\u003e\n        \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"flexSwitchCheckChecked\" checked\u003e\n        \u003clabel class=\"form-check-label\" for=\"flexSwitchCheckChecked\"\u003eChecked switch checkbox input\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"mb-3\"\u003e\n        \u003clabel for=\"customRange3\" class=\"form-label\"\u003eExample range\u003c/label\u003e\n        \u003cinput type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" step=\"0.5\" id=\"customRange3\"\u003e\n      \u003c/div\u003e\n      \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"disabled-forms\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eDisabled forms\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cfieldset disabled aria-label=\"Disabled fieldset example\"\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledTextInput\" class=\"form-label\"\u003eDisabled input\u003c/label\u003e\n          \u003cinput type=\"text\" id=\"disabledTextInput\" class=\"form-control\" placeholder=\"Disabled input\"\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledSelect\" class=\"form-label\"\u003eDisabled select menu\u003c/label\u003e\n          \u003cselect id=\"disabledSelect\" class=\"form-select\"\u003e\n            \u003coption\u003eDisabled select\u003c/option\u003e\n          \u003c/select\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003cdiv class=\"form-check\"\u003e\n            \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"disabledFieldsetCheck\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledFieldsetCheck\"\u003e\n              Can't check this\n            \u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cfieldset class=\"mb-3\"\u003e\n          \u003clegend class=\"h3 my-3\"\u003eDisabled radios buttons\u003c/legend\u003e\n          \u003cdiv class=\"form-check\"\u003e\n            \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"disabledRadio1\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledRadio1\"\u003eDisabled radio\u003c/label\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"mb-3 form-check\"\u003e\n            \u003cinput type=\"radio\" name=\"radios\" class=\"form-check-input\" id=\"disabledRadio2\" disabled\u003e\n            \u003clabel class=\"form-check-label\" for=\"disabledRadio2\"\u003eAnother radio\u003c/label\u003e\n          \u003c/div\u003e\n        \u003c/fieldset\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel class=\"form-label\" for=\"disabledCustomFile\"\u003eUpload\u003c/label\u003e\n          \u003cinput type=\"file\" class=\"form-control\" id=\"disabledCustomFile\" disabled\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3 form-check form-switch\"\u003e\n          \u003cinput class=\"form-check-input\" type=\"checkbox\" id=\"disabledSwitchCheckChecked\" checked disabled\u003e\n          \u003clabel class=\"form-check-label\" for=\"disabledSwitchCheckChecked\"\u003eDisabled checked switch checkbox input\u003c/label\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"mb-3\"\u003e\n          \u003clabel for=\"disabledRange\" class=\"form-label\"\u003eDisabled range\u003c/label\u003e\n          \u003cinput type=\"range\" class=\"form-range\" min=\"0\" max=\"5\" step=\"0.5\" id=\"disabledRange\"\u003e\n        \u003c/div\u003e\n        \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e\n      \u003c/fieldset\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"sizing\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eSizing\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/form-control/#sizing\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput class=\"form-control form-control-lg\" type=\"text\" placeholder=\".form-control-lg\" aria-label=\".form-control-lg example\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cselect class=\"form-select form-select-lg mb-3\" aria-label=\".form-select-lg example\"\u003e\n        \u003coption selected\u003eOpen this select menu\u003c/option\u003e\n        \u003coption value=\"1\"\u003eOne\u003c/option\u003e\n        \u003coption value=\"2\"\u003eTwo\u003c/option\u003e\n        \u003coption value=\"3\"\u003eThree\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput type=\"file\" class=\"form-control form-control-lg\" aria-label=\"Large file input example\"\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput class=\"form-control form-control-sm\" type=\"text\" placeholder=\".form-control-sm\" aria-label=\".form-control-sm example\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cselect class=\"form-select form-select-sm\" aria-label=\".form-select-sm example\"\u003e\n        \u003coption selected\u003eOpen this select menu\u003c/option\u003e\n        \u003coption value=\"1\"\u003eOne\u003c/option\u003e\n        \u003coption value=\"2\"\u003eTwo\u003c/option\u003e\n        \u003coption value=\"3\"\u003eThree\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"mb-3\"\u003e\n      \u003cinput type=\"file\" class=\"form-control form-control-sm\" aria-label=\"Small file input example\"\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"input-group\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eInput group\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/input-group/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon1\"\u003e@\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Username\" aria-label=\"Username\" aria-describedby=\"basic-addon1\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cinput type=\"text\" class=\"form-control\" placeholder=\"Recipient's username\" aria-label=\"Recipient's username\" aria-describedby=\"basic-addon2\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon2\"\u003e@example.com\u003c/span\u003e\n    \u003c/div\u003e\n    \u003clabel for=\"basic-url\" class=\"form-label\"\u003eYour vanity URL\u003c/label\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\" id=\"basic-addon3\"\u003ehttps://example.com/users/\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" id=\"basic-url\" aria-describedby=\"basic-addon3\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group mb-3\"\u003e\n      \u003cspan class=\"input-group-text\"\u003e$\u003c/span\u003e\n      \u003cinput type=\"text\" class=\"form-control\" aria-label=\"Amount (to the nearest dollar)\"\u003e\n      \u003cspan class=\"input-group-text\"\u003e.00\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"input-group\"\u003e\n      \u003cspan class=\"input-group-text\"\u003eWith textarea\u003c/span\u003e\n      \u003ctextarea class=\"form-control\" aria-label=\"With textarea\"\u003e\u003c/textarea\u003e\n    \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"floating-labels\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eFloating labels\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/floating-labels/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform\u003e\n      \u003cdiv class=\"form-floating mb-3\"\u003e\n        \u003cinput type=\"email\" class=\"form-control\" id=\"floatingInput\" placeholder=\"name@example.com\"\u003e\n        \u003clabel for=\"floatingInput\"\u003eEmail address\u003c/label\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-floating\"\u003e\n        \u003cinput type=\"password\" class=\"form-control\" id=\"floatingPassword\" placeholder=\"Password\"\u003e\n        \u003clabel for=\"floatingPassword\"\u003ePassword\u003c/label\u003e\n      \u003c/div\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003carticle class=\"my-3\" id=\"validation\"\u003e\n  \u003cdiv class=\"bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2\"\u003e\n    \u003ch3\u003eValidation\u003c/h3\u003e\n    \u003ca class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/forms/validation/\"\u003eDocumentation\u003c/a\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"bd-example\"\u003e\n    \u003cform class=\"row g-3\"\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServer01\" class=\"form-label\"\u003eFirst name\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-valid\" id=\"validationServer01\" value=\"Mark\" required\u003e\n        \u003cdiv class=\"valid-feedback\"\u003e\n          Looks good!\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServer02\" class=\"form-label\"\u003eLast name\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-valid\" id=\"validationServer02\" value=\"Otto\" required\u003e\n        \u003cdiv class=\"valid-feedback\"\u003e\n          Looks good!\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-4\"\u003e\n        \u003clabel for=\"validationServerUsername\" class=\"form-label\"\u003eUsername\u003c/label\u003e\n        \u003cdiv class=\"input-group has-validation\"\u003e\n          \u003cspan class=\"input-group-text\" id=\"inputGroupPrepend3\"\u003e@\u003c/span\u003e\n          \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServerUsername\" aria-describedby=\"inputGroupPrepend3\" required\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\n            Please choose a username.\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-6\"\u003e\n        \u003clabel for=\"validationServer03\" class=\"form-label\"\u003eCity\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServer03\" required\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please provide a valid city.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-3\"\u003e\n        \u003clabel for=\"validationServer04\" class=\"form-label\"\u003eState\u003c/label\u003e\n        \u003cselect class=\"form-select is-invalid\" id=\"validationServer04\" required\u003e\n          \u003coption selected disabled value=\"\"\u003eChoose...\u003c/option\u003e\n          \u003coption\u003e...\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please select a valid state.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-md-3\"\u003e\n        \u003clabel for=\"validationServer05\" class=\"form-label\"\u003eZip\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control is-invalid\" id=\"validationServer05\" required\u003e\n        \u003cdiv class=\"invalid-feedback\"\u003e\n          Please provide a valid zip.\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-12\"\u003e\n        \u003cdiv class=\"form-check\"\u003e\n          \u003cinput class=\"form-check-input is-invalid\" type=\"checkbox\" value=\"\" id=\"invalidCheck3\" required\u003e\n          \u003clabel class=\"form-check-label\" for=\"invalidCheck3\"\u003e\n            Agree to terms and conditions\n          \u003c/label\u003e\n          \u003cdiv class=\"invalid-feedback\"\u003e\n            You must agree before submitting.\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col-12\"\u003e\n        \u003cbutton class=\"btn btn-primary\" type=\"submit\"\u003eSubmit form\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/form\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/article\u003e"},{"file":"navs.html","id":"bootstrap/navs.html-5","componentId":"bootstrap","title":"Navs","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cnav class=\"nav\"\u003e\n          \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eActive\u003c/a\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cnav\u003e\n          \u003cdiv class=\"nav nav-tabs mb-3\" id=\"nav-tab\" role=\"tablist\"\u003e\n            \u003ca class=\"nav-link active\" id=\"nav-home-tab\" data-bs-toggle=\"tab\" href=\"#nav-home\" role=\"tab\" aria-controls=\"nav-home\" aria-selected=\"true\"\u003eHome\u003c/a\u003e\n            \u003ca class=\"nav-link\" id=\"nav-profile-tab\" data-bs-toggle=\"tab\" href=\"#nav-profile\" role=\"tab\" aria-controls=\"nav-profile\" aria-selected=\"false\"\u003eProfile\u003c/a\u003e\n            \u003ca class=\"nav-link\" id=\"nav-contact-tab\" data-bs-toggle=\"tab\" href=\"#nav-contact\" role=\"tab\" aria-controls=\"nav-contact\" aria-selected=\"false\"\u003eContact\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n        \u003cdiv class=\"tab-content\" id=\"nav-tabContent\"\u003e\n          \u003cdiv class=\"tab-pane fade show active\" id=\"nav-home\" role=\"tabpanel\" aria-labelledby=\"nav-home-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"tab-pane fade\" id=\"nav-profile\" role=\"tabpanel\" aria-labelledby=\"nav-profile-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.\u003c/p\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"tab-pane fade\" id=\"nav-contact\" role=\"tabpanel\" aria-labelledby=\"nav-contact-tab\"\u003e\n            \u003cp\u003ePlaceholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"nav nav-pills\"\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eActive\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cnav class=\"navbar navbar-expand-lg navbar-light bg-light\"\u003e\n          \u003cdiv class=\"container-fluid\"\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n              \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n              \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item dropdown\"\u003e\n                  \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n                    Dropdown\n                  \u003c/a\u003e\n                  \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cform class=\"d-flex\"\u003e\n                \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n                \u003cbutton class=\"btn btn-outline-dark\" type=\"submit\"\u003eSearch\u003c/button\u003e\n              \u003c/form\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n\n        \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-primary mt-5\"\u003e\n          \u003cdiv class=\"container-fluid\"\u003e\n            \u003cbutton class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarSupportedContent2\" aria-controls=\"navbarSupportedContent2\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n              \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n            \u003c/button\u003e\n            \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent2\"\u003e\n              \u003cul class=\"navbar-nav me-auto mb-2 mb-lg-0\"\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link active\" aria-current=\"page\" href=\"#\"\u003eHome\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item dropdown\"\u003e\n                  \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown2\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n                    Dropdown\n                  \u003c/a\u003e\n                  \u003cul class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown2\"\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n                \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cform class=\"d-flex\"\u003e\n                \u003cinput class=\"form-control me-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n                \u003cbutton class=\"btn btn-outline-light\" type=\"submit\"\u003eSearch\u003c/button\u003e\n              \u003c/form\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e"},{"file":"accordion.html","id":"bootstrap/accordion.html-6","componentId":"bootstrap","title":"Accordion","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"accordion\" id=\"accordionExample\"\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingOne\"\u003e\n              \u003cbutton class=\"accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\"\u003e\n                Accordion Item #1\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"headingOne\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the first item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingTwo\"\u003e\n              \u003cbutton class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\"\u003e\n                Accordion Item #2\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingTwo\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the second item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"accordion-item\"\u003e\n            \u003ch4 class=\"accordion-header\" id=\"headingThree\"\u003e\n              \u003cbutton class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseThree\" aria-expanded=\"false\" aria-controls=\"collapseThree\"\u003e\n                Accordion Item #3\n                \u003csvg role=\"img\" class=\"icon icon-caret-down\"\u003e\u003cuse href=\"/svg/icons.svg#caret-down\"\u003e\u003c/use\u003e\u003c/svg\u003e\n              \u003c/button\u003e\n            \u003c/h4\u003e\n            \u003cdiv id=\"collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"headingThree\" data-bs-parent=\"#accordionExample\"\u003e\n              \u003cdiv class=\"accordion-body\"\u003e\n                \u003cstrong\u003eThis is the third item's accordion body.\u003c/strong\u003e It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the \u003ccode\u003e.accordion-body\u003c/code\u003e, though the transition does limit overflow.\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"alerts.html","id":"bootstrap/alerts.html-7","componentId":"bootstrap","title":"Alerts","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\n\u003cdiv class=\"alert alert-primary alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple primary alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-secondary alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple secondary alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-success alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple success alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple danger alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple warning alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-info alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple info alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-light alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple light alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003cdiv class=\"alert alert-dark alert-dismissible fade show\" role=\"alert\"\u003e\n  A simple dark alert with \u003ca href=\"#\" class=\"alert-link\"\u003ean example link\u003c/a\u003e. Give it a click if you like.\n  \u003ccode\u003eThis is code.\u003c/code\u003e\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\n    \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n  \u003c/button\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"alert alert-success\" role=\"alert\"\u003e\n  \u003ch4 class=\"alert-heading\"\u003eWell done!\u003c/h4\u003e\n  \u003cp\u003eAww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.\u003c/p\u003e\n  \u003chr\u003e\n  \u003cp class=\"mb-0\"\u003eWhenever you need to, be sure to use margin utilities to keep things nice and tidy.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e"},{"file":"badges.html","id":"bootstrap/badges.html-8","componentId":"bootstrap","title":"Badges","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cp class=\"h1\"\u003eExample heading \u003cspan class=\"badge bg-primary\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h2\"\u003eExample heading \u003cspan class=\"badge bg-secondary\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h3\"\u003eExample heading \u003cspan class=\"badge bg-success\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h4\"\u003eExample heading \u003cspan class=\"badge bg-danger\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h5\"\u003eExample heading \u003cspan class=\"badge bg-warning\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-info\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-light\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003cp class=\"h6\"\u003eExample heading \u003cspan class=\"badge bg-dark\"\u003eNew\u003c/span\u003e\u003c/p\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-primary\"\u003ePrimary\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-secondary\"\u003eSecondary\u003c/span\u003e--\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-success\"\u003eSuccess\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-danger\"\u003eDanger\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-warning\"\u003eWarning\u003c/span\u003e\n        \u003cspan class=\"badge rounded-pill text-bg-info\"\u003eInfo\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-light\"\u003eLight\u003c/span\u003e--\u003e\n        \u003c!--\u003cspan class=\"badge rounded-pill text-bg-dark\"\u003eDark\u003c/span\u003e--\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-primary\"\u003ePrimary\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-secondary\"\u003eSecondary\u003c/span\u003e--\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-success\"\u003eSuccess\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-danger\"\u003eDanger\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-warning\"\u003eWarning\u003c/span\u003e\n        \u003cspan class=\"badge badge-translucent rounded-pill text-bg-info\"\u003eInfo\u003c/span\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-light\"\u003eLight\u003c/span\u003e--\u003e\n        \u003c!--\u003cspan class=\"badge badge-translucent rounded-pill text-bg-dark\"\u003eDark\u003c/span\u003e--\u003e\n        \u003c/div\u003e"},{"file":"buttons.html","id":"bootstrap/buttons.html-9","componentId":"bootstrap","title":"Buttons","extension":"html","raw":"\u003cstyle\u003e\n  .button-example { margin-bottom: 3rem; }\n  .button-example th { vertical-align: top; font-weight: bold; }\n  .button-example td, .button-example th { padding: .5rem 1rem .5rem 0; }\n\u003c/style\u003e\n\n\u003ch4\u003ePrimary\u003c/h4\u003e\n\u003ctable class=\"button-example\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eActive\u003c/th\u003e\n    \u003cth\u003eDisabled\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eLarge\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eMedium\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eSmall\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003ePrimary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003ePrimary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Primary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-primary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch4\u003eSecondary\u003c/h4\u003e\n\u003ctable class=\"button-example\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n    \u003cth\u003eActive\u003c/th\u003e\n    \u003cth\u003eDisabled\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eLarge\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-lg btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eMedium\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=\"4\"\u003eSmall\u003c/th\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003eSecondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003eSecondary \u003csvg role=\"img\" class=\"icon icon-caret-right\"\u003e\u003cuse href=\"/svg/icons.svg#caret-right\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e Secondary\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle active\"\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cbutton type=\"button\" class=\"btn btn-sm btn-secondary rounded-circle\" disabled\u003e\u003csvg role=\"img\" class=\"icon icon-settings\"\u003e\u003cuse href=\"/svg/icons.svg#settings\"\u003e\u003c/use\u003e\u003c/svg\u003e\u003c/button\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch4\u003eOthers\u003c/h4\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cbutton type=\"button\" class=\"btn btn-success\"\u003eSuccess\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-danger\"\u003eDanger\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-info\"\u003eInfo\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-light\"\u003eLight\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-dark\"\u003eDark\u003c/button\u003e\n\n\u003cbutton type=\"button\" class=\"btn btn-link\"\u003eLink\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\n\u003cbutton type=\"button\" class=\"btn btn-outline-success\"\u003eSuccess\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-danger\"\u003eDanger\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-warning\"\u003eWarning\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-info\"\u003eInfo\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-light\"\u003eLight\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-outline-dark\"\u003eDark\u003c/button\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar with button groups\"\u003e\n  \u003cdiv class=\"btn-group me-2\" role=\"group\" aria-label=\"First group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e1\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e2\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e3\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e4\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group me-2\" role=\"group\" aria-label=\"Second group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e5\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e6\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e7\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"btn-group\" role=\"group\" aria-label=\"Third group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003e8\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e"},{"file":"breadcrumb.html","id":"bootstrap/breadcrumb.html-10","componentId":"bootstrap","title":"Breadcrumb","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cnav aria-label=\"breadcrumb\"\u003e\n          \u003col class=\"breadcrumb\"\u003e\n            \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli class=\"breadcrumb-item\"\u003e\u003ca href=\"#\"\u003eLibrary\u003c/a\u003e\u003c/li\u003e\n            \u003cli class=\"breadcrumb-item active\" aria-current=\"page\"\u003eData\u003c/li\u003e\n          \u003c/ol\u003e\n        \u003c/nav\u003e\n        \u003c/div\u003e"},{"file":"card.html","id":"bootstrap/card.html-11","componentId":"bootstrap","title":"Card","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"row  row-cols-1 row-cols-md-2 g-4\"\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003csvg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"180\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Image cap\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eImage cap\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n                \u003ca href=\"#\" class=\"btn btn-primary\"\u003eGo somewhere\u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"card-header\"\u003e\n                Featured\n              \u003c/div\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n                \u003ca href=\"#\" class=\"btn btn-primary\"\u003eGo somewhere\u003c/a\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"card-footer text-muted\"\u003e\n                2 days ago\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                \u003cp class=\"card-text\"\u003eSome quick example text to build on the card title and make up the bulk of the card's content.\u003c/p\u003e\n              \u003c/div\u003e\n              \u003cul class=\"list-group list-group-flush\"\u003e\n                \u003cli class=\"list-group-item\"\u003eAn item\u003c/li\u003e\n                \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n                \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n              \u003c/ul\u003e\n              \u003cdiv class=\"card-body\"\u003e\n                \u003ca href=\"#\" class=\"card-link\"\u003eCard link\u003c/a\u003e\n                \u003ca href=\"#\" class=\"card-link\"\u003eAnother link\u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col\"\u003e\n            \u003cdiv class=\"card\"\u003e\n              \u003cdiv class=\"row g-0\"\u003e\n                \u003cdiv class=\"col-md-4\"\u003e\n                  \u003csvg class=\"bd-placeholder-img\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#868e96\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\"\u003eImage\u003c/text\u003e\u003c/svg\u003e\n\n                \u003c/div\u003e\n                \u003cdiv class=\"col-md-8\"\u003e\n                  \u003cdiv class=\"card-body\"\u003e\n                    \u003ch5 class=\"card-title\"\u003eCard title\u003c/h5\u003e\n                    \u003cp class=\"card-text\"\u003eThis is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.\u003c/p\u003e\n                    \u003cp class=\"card-text\"\u003e\u003csmall class=\"text-muted\"\u003eLast updated 3 mins ago\u003c/small\u003e\u003c/p\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"code.html","id":"bootstrap/code.html-12","componentId":"bootstrap","title":"Code","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cp\u003eA \u003ccode\u003ePOST\u003c/code\u003e callback will be sent to notification with the following form will be sent to \u003ccode\u003enotificationUrl\u003c/code\u003e once the enough is paid and once again once there is enough confirmations to the payment:\u003c/p\u003e\n\u003c/div\u003e\n\n\n\u003cdiv class=\"bd-example\"\u003e\u003cpre\u003e\u003ccode class=\"html hljs xml\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003eform\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003emethod\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"POST\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003eaction\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://localhost:14142/apps/2waqS3jYMpPhTEUp8vfomTfDQwu5/pos\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"amount\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"100\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"email\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"customer@example.com\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"orderId\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"CustomOrderId\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"notificationUrl\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://example.com/callbacks\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003einput\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"hidden\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"redirectUrl\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003evalue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"https://example.com/thanksyou\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e /\u0026gt;\u003c/span\u003e\u003c/span\u003e\n  \u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003ebutton\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e \u003c/span\u003e\u003cspan class=\"hljs-attr\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-attr\"\u003etype\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e=\u003c/span\u003e\u003cspan class=\"hljs-string\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-string\"\u003e\"submit\"\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003eBuy now\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003ebutton\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003c/span\u003e\u003cspan class=\"hljs-name\"\u003e\u003cspan class=\"hljs-tag\"\u003e\u003cspan class=\"hljs-name\"\u003eform\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"hljs-tag\"\u003e\u0026gt;\u003c/span\u003e\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e"},{"file":"dropdowns.html","id":"bootstrap/dropdowns.html-13","componentId":"bootstrap","title":"Dropdowns","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group w-100 align-items-center justify-content-between flex-wrap\"\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle dropdown-toggle-custom-caret\" type=\"button\"\n        id=\"dropdownMenuButtonSM\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButtonSM\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item active\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item dropdown-item-custom-active\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary btn-lg dropdown-toggle\" type=\"button\" id=\"dropdownMenuButtonLG\"\n        data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        Dropdown button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuButtonLG\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003ePrimary\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary\"\u003eSecondary\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-success\"\u003eSuccess\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-success dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-info\"\u003eInfo\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-info dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-warning\"\u003eWarning\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-warning dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-danger\"\u003eDanger\u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\"\n      aria-expanded=\"false\"\u003e\n      \u003cspan class=\"visually-hidden\"\u003eToggle Dropdown\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cul class=\"dropdown-menu\"\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\u003c!-- /btn-group --\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group w-100 align-items-center justify-content-between flex-wrap\"\u003e\n    \u003cdiv class=\"dropend\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropendMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropend button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropendMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropup\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropupMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropup button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropupMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"dropstart\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropstartMenuButton\" data-bs-toggle=\"dropdown\"\n        aria-expanded=\"false\"\u003e\n        Dropstart button\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu\" aria-labelledby=\"dropstartMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cdiv class=\"btn-group\"\u003e\n    \u003cdiv class=\"dropdown\"\u003e\n      \u003cbutton class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"dropdownRightMenuButton\"\n        data-bs-toggle=\"dropdown\" aria-expanded=\"false\"\u003e\n        End-aligned menu\n      \u003c/button\u003e\n      \u003cul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"dropdownRightMenuButton\"\u003e\n        \u003cli\u003e\n          \u003ch6 class=\"dropdown-header\"\u003eDropdown header\u003c/h6\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\n          \u003chr class=\"dropdown-divider\"\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#\"\u003eSeparated link\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"listgroups.html","id":"bootstrap/listgroups.html-14","componentId":"bootstrap","title":"Listgroups","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"list-group\"\u003e\n          \u003cli class=\"list-group-item disabled\" aria-disabled=\"true\"\u003eA disabled item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA fourth item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eAnd a fifth one\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cul class=\"list-group list-group-flush\"\u003e\n          \u003cli class=\"list-group-item\"\u003eAn item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA second item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA third item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eA fourth item\u003c/li\u003e\n          \u003cli class=\"list-group-item\"\u003eAnd a fifth one\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"list-group\"\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action\"\u003eA simple default list group item\u003c/a\u003e\n\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-primary\"\u003eA simple primary list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-secondary\"\u003eA simple secondary list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-success\"\u003eA simple success list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-danger\"\u003eA simple danger list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-warning\"\u003eA simple warning list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-info\"\u003eA simple info list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-light\"\u003eA simple light list group item\u003c/a\u003e\n          \u003ca href=\"#\" class=\"list-group-item list-group-item-action list-group-item-dark\"\u003eA simple dark list group item\u003c/a\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"pagination.html","id":"bootstrap/pagination.html-15","componentId":"bootstrap","title":"Pagination","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Standard pagination example\"\u003e\n    \u003cul class=\"pagination\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" aria-label=\"Previous\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026laquo;\u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" aria-label=\"Next\"\u003e\n          \u003cspan aria-hidden=\"true\"\u003e\u0026raquo;\u003c/span\u003e\n        \u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav class=\"d-flex flex-wrap gap-3 justify-content-between\"\u003e\n    \u003cul class=\"pagination me-auto\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003cspan class=\"page-link px-0\"\u003e\n          1 – 500 \u003c/span\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003cul class=\"pagination ms-auto\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003cspan class=\"page-link\"\u003ePage Size\u003c/span\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=50\"\u003e50\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=100\"\u003e100\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=250\"\u003e250\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\n        \u003ca class=\"page-link\" href=\"/server/users?skip=0\u0026amp;count=500\"\u003e500\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Pagination example\"\u003e\n    \u003cul class=\"pagination pagination-sm\"\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example\"\u003e\n  \u003cnav aria-label=\"Another pagination example\"\u003e\n    \u003cul class=\"pagination pagination-lg flex-wrap\"\u003e\n      \u003cli class=\"page-item disabled\"\u003e\n        \u003ca class=\"page-link\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003ePrevious\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item active\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e1\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\" aria-current=\"page\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003e2\u003c/a\u003e\n      \u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"#\"\u003e3\u003c/a\u003e\u003c/li\u003e\n      \u003cli class=\"page-item\"\u003e\n        \u003ca class=\"page-link\" href=\"#\"\u003eNext\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/div\u003e"},{"file":"popovers.html","id":"bootstrap/popovers.html-16","componentId":"bootstrap","title":"Popovers","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-lg btn-danger\" data-bs-toggle=\"popover\" title=\"Popover title\" data-bs-content=\"And here's some amazing content. It's very engaging. Right?\"\u003eClick to toggle popover\u003c/button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"top\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on top\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"right\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on end\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"bottom\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on bottom\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-container=\"body\" data-bs-toggle=\"popover\" data-bs-placement=\"left\" data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\"\u003e\n          Popover on start\n        \u003c/button\u003e\n        \u003c/div\u003e"},{"file":"progress.html","id":"bootstrap/progress.html-17","componentId":"bootstrap","title":"Progress","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e0%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-success w-25\" role=\"progressbar\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e25%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-info text-dark w-50\" role=\"progressbar\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e50%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress mb-3\"\u003e\n          \u003cdiv class=\"progress-bar bg-warning text-dark w-75\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e75%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"progress\"\u003e\n          \u003cdiv class=\"progress-bar bg-danger w-100\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e100%\u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv class=\"progress\"\u003e\n          \u003cdiv class=\"progress-bar\" role=\"progressbar\" style=\"width: 15%\" aria-valuenow=\"15\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e\u003c/div\u003e\n          \u003cdiv class=\"progress-bar progress-bar-striped progress-bar-animated bg-success\" role=\"progressbar\" style=\"width: 40%\" aria-valuenow=\"40\" aria-valuemin=\"0\" aria-valuemax=\"100\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"modal.html","id":"bootstrap/modal.html-18","componentId":"bootstrap","title":"Modal","extension":"html","raw":"\u003cdiv class=\"bd-example\" style=\"min-height:400px\"\u003e\n  \u003cdiv class=\"d-flex justify-content-between flex-wrap\"\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalDefault\"\u003e\n      Launch demo modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#staticBackdropLive\"\u003e\n      Launch static backdrop modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalCenteredScrollable\"\u003e\n      Vertically centered scrollable modal\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" class=\"btn btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModalFullscreen\"\u003e\n      Full screen\n    \u003c/button\u003e\n  \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"modal fade\" id=\"exampleModalDefault\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"exampleModalLabel\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        ...\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"staticBackdropLive\" data-bs-backdrop=\"static\" data-bs-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"staticBackdropLiveLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"staticBackdropLiveLabel\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003eI will not close if you click outside me. Don't even try to press escape key.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eUnderstood\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"exampleModalCenteredScrollable\" tabindex=\"-1\" aria-labelledby=\"exampleModalCenteredScrollableTitle\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title\" id=\"exampleModalCenteredScrollableTitle\"\u003eModal title\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003ePlaceholder text for this demonstration of a vertically centered modal dialog.\u003c/p\u003e\n        \u003cp\u003eIn this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.\u003c/p\u003e\n        \u003cp\u003eWhat follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.\u003c/p\u003e\n        \u003cp\u003eWe're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\"\u003eSave changes\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"modal fade\" id=\"exampleModalFullscreen\" tabindex=\"-1\" aria-labelledby=\"exampleModalFullscreenLabel\" aria-hidden=\"true\"\u003e\n  \u003cdiv class=\"modal-dialog modal-fullscreen\"\u003e\n    \u003cdiv class=\"modal-content\"\u003e\n      \u003cdiv class=\"modal-header\"\u003e\n        \u003ch5 class=\"modal-title h4\" id=\"exampleModalFullscreenLabel\"\u003eFull screen modal\u003c/h5\u003e\n        \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\u003e\n          \u003csvg role=\"img\" class=\"icon icon-close\"\u003e\u003cuse href=\"/svg/icons.svg#close\"\u003e\u003c/use\u003e\u003c/svg\u003e\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-body\"\u003e\n        \u003cp\u003eWhat follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.\u003c/p\u003e\n        \u003cp\u003eLast Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.\u003c/p\u003e\n        \u003cp\u003eDon't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.\u003c/p\u003e\n        \u003cp\u003eYo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.\u003c/p\u003e\n        \u003cp\u003eI'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.\u003c/p\u003e\n        \u003cp\u003eGrowing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.\u003c/p\u003e\n        \u003cp\u003eMake it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.\u003c/p\u003e\n        \u003cp\u003eWe can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"modal-footer\"\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"scrollspy.html","id":"bootstrap/scrollspy.html-19","componentId":"bootstrap","title":"Scrollspy","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n          \u003cnav id=\"navbar-example2\" class=\"navbar navbar-light bg-light px-3\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n            \u003cul class=\"nav nav-pills\"\u003e\n              \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link\" href=\"#fat\"\u003e@fat\u003c/a\u003e\n              \u003c/li\u003e\n              \u003cli class=\"nav-item\"\u003e\n                \u003ca class=\"nav-link\" href=\"#mdo\"\u003e@mdo\u003c/a\u003e\n              \u003c/li\u003e\n              \u003cli class=\"nav-item dropdown\"\u003e\n                \u003ca class=\"nav-link dropdown-toggle\" data-bs-toggle=\"dropdown\" href=\"#\" role=\"button\" aria-expanded=\"false\"\u003eDropdown\u003c/a\u003e\n                \u003cul class=\"dropdown-menu\"\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#one\"\u003eone\u003c/a\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#two\"\u003etwo\u003c/a\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003chr class=\"dropdown-divider\"\u003e\u003c/li\u003e\n                  \u003cli\u003e\u003ca class=\"dropdown-item\" href=\"#three\"\u003ethree\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n              \u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/nav\u003e\n          \u003cdiv data-bs-spy=\"scroll\" data-bs-target=\"#navbar-example2\" data-bs-offset=\"0\" class=\"scrollspy-example\" tabindex=\"0\"\u003e\n            \u003ch4 id=\"fat\"\u003e@fat\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.\u003c/p\u003e\n            \u003ch4 id=\"mdo\"\u003e@mdo\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.\u003c/p\u003e\n            \u003ch4 id=\"one\"\u003eone\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.\u003c/p\u003e\n            \u003ch4 id=\"two\"\u003etwo\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.\u003c/p\u003e\n            \u003ch4 id=\"three\"\u003ethree\u003c/h4\u003e\n            \u003cp\u003ePlaceholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.\u003c/p\u003e\n            \u003cp\u003eAnd some more placeholder content, for good measure.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"spinners.html","id":"bootstrap/spinners.html-20","componentId":"bootstrap","title":"Spinners","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\n        \u003cdiv class=\"spinner-border text-primary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-secondary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-success\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-danger\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-warning\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-info\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-light\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-border text-dark\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"bd-example\"\u003e\n\n        \u003cdiv class=\"spinner-grow text-primary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-secondary\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-success\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-danger\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-warning\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-info\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-light\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"spinner-grow text-dark\" role=\"status\"\u003e\n          \u003cspan class=\"visually-hidden\"\u003eLoading...\u003c/span\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"toasts.html","id":"bootstrap/toasts.html-21","componentId":"bootstrap","title":"Toasts","extension":"html","raw":"\u003cdiv class=\"bd-example bg-dark p-5 align-items-center\"\u003e\n        \u003cdiv class=\"toast\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"\u003e\n          \u003cdiv class=\"toast-header\"\u003e\n            \u003csvg class=\"bd-placeholder-img rounded me-2\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#007aff\"/\u003e\u003c/svg\u003e\n\n            \u003cstrong class=\"me-auto\"\u003eBootstrap\u003c/strong\u003e\n            \u003csmall class=\"text-muted\"\u003e11 mins ago\u003c/small\u003e\n            \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"toast\" aria-label=\"Close\"\u003e\u003c/button\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"toast-body\"\u003e\n            Hello, world! This is a toast message.\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"tooltips.html","id":"bootstrap/tooltips.html-22","componentId":"bootstrap","title":"Tooltips","extension":"html","raw":"\u003cdiv class=\"bd-example tooltip-demo\" style=\"min-height:200px; padding: 3em\"\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Tooltip on top\"\u003eTooltip on top\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"right\" title=\"Tooltip on end\"\u003eTooltip on end\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\" title=\"Tooltip on bottom\"\u003eTooltip on bottom\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-placement=\"left\" title=\"Tooltip on start\"\u003eTooltip on start\u003c/button\u003e\n\u003cbutton type=\"button\" class=\"btn btn-secondary\" data-bs-toggle=\"tooltip\" data-bs-html=\"true\" title=\"\u003cem\u003eTooltip\u003c/em\u003e \u003cu\u003ewith\u003c/u\u003e \u003cb\u003eHTML\u003c/b\u003e\"\u003eTooltip with HTML\u003c/button\u003e\n\u003c/div\u003e"},{"file":"carousel.html","id":"bootstrap/carousel.html-23","componentId":"bootstrap","title":"Carousel","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n        \u003cdiv id=\"carouselExampleCaptions\" class=\"carousel slide\" data-bs-ride=\"carousel\"\u003e\n          \u003col class=\"carousel-indicators\"\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"0\" class=\"active\"\u003e\u003c/li\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"1\"\u003e\u003c/li\u003e\n            \u003cli data-bs-target=\"#carouselExampleCaptions\" data-bs-slide-to=\"2\"\u003e\u003c/li\u003e\n          \u003c/ol\u003e\n          \u003cdiv class=\"carousel-inner\"\u003e\n            \u003cdiv class=\"carousel-item active\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: First slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#777\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#555\" dy=\".3em\"\u003eFirst slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eFirst slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the first slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Second slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#666\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#444\" dy=\".3em\"\u003eSecond slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eSecond slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the second slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"carousel-item\"\u003e\n              \u003csvg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w-100\" width=\"800\" height=\"400\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Third slide\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\u003e\u003ctitle\u003ePlaceholder\u003c/title\u003e\u003crect width=\"100%\" height=\"100%\" fill=\"#555\"/\u003e\u003ctext x=\"50%\" y=\"50%\" fill=\"#333\" dy=\".3em\"\u003eThird slide\u003c/text\u003e\u003c/svg\u003e\n\n              \u003cdiv class=\"carousel-caption d-none d-md-block\"\u003e\n                \u003ch5\u003eThird slide label\u003c/h5\u003e\n                \u003cp\u003eSome representative placeholder content for the third slide.\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003ca class=\"carousel-control-prev\" href=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\"\u003e\n            \u003cspan class=\"carousel-control-prev-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n            \u003cspan class=\"visually-hidden\"\u003ePrevious\u003c/span\u003e\n          \u003c/a\u003e\n          \u003ca class=\"carousel-control-next\" href=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\"\u003e\n            \u003cspan class=\"carousel-control-next-icon\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n            \u003cspan class=\"visually-hidden\"\u003eNext\u003c/span\u003e\n          \u003c/a\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e"},{"file":"shadows.html","id":"bootstrap/shadows.html-24","componentId":"bootstrap","title":"Shadows","extension":"html","raw":"\u003cdiv class=\"bd-example\"\u003e\n\u003cdiv class=\"shadow-none p-3 m-5 rounded bg-tile\"\u003eNo shadow\u003c/div\u003e\n\u003cdiv class=\"shadow-sm p-3 m-5 rounded bg-tile\"\u003eSmall shadow\u003c/div\u003e\n\u003cdiv class=\"shadow p-3 m-5 rounded bg-tile\"\u003eRegular shadow\u003c/div\u003e\n\u003cdiv class=\"shadow-lg p-3 m-5 rounded bg-tile\"\u003eLarger shadow\u003c/div\u003e\n\u003c/div\u003e"},{"file":"utils.html","id":"bootstrap/utils.html-25","componentId":"bootstrap","title":"Utils","extension":"html","raw":"\u003cdiv class=\"bd-example bg-body\"\u003e\n\u003cp\u003eBG Body\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example bg-black\"\u003e\n\u003cp\u003eBG Black\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bd-example bg-white\"\u003e\n\u003cp\u003eBG White\u003c/p\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/bootstrap","sourceFile":"src/components/bootstrap/component.config.js","readmeFile":"src/components/bootstrap/README.md","type":"component"},"footer":{"id":"footer","title":"Footer","isTitleFromHeading":true,"content":"\u003ch1 id=\"footer\" tabindex=\"-1\"\u003eFooter\u003c/h1\u003e","variants":[{"file":"footer.html","id":"footer/footer.html-1","componentId":"footer","title":"Footer","extension":"html","raw":"\u003cdiv class=\"btcpay-footer\"\u003e\n  \u003cdiv class=\"btcpay-footer-columns\"\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eSoftware\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/\"\u003eIntroduction\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/btcpay-basics/usecase\"\u003eUse Case\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/features/apps\"\u003eApps\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/deployment/deployment\"\u003eDeployment\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/btcpay-basics/gettingstarted\"\u003eGetting Started\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eResources\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/\"\u003eDocumentation\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/development\"\u003eDevelopment\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://github.com/btcpayserver/\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/support-and-community/support\"\u003eSupport\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/faq-and-common-issues/faq\"\u003eFAQ\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003ch6\u003eCommunity\u003c/h6\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"https://blog.btcpayserver.org\"\u003eBlog\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://chat.btcpayserver.org\"\u003eChat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://directory.btcpayserver.org\"\u003eDirectory\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://docs.btcpayserver.org/support-and-community/contribute\"\u003eContribute\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"https://btcpayserver.org/donate/\"\u003eDonate\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cp\u003e\n    Content Released under MIT license.\n    \u003cbr\u003e\n    This website does not use cookies nor collect personal data.\n  \u003c/p\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/footer","sourceFile":"src/components/footer/component.config.js","readmeFile":"src/components/footer/README.md","type":"component"},"header":{"id":"header","title":"Header","isTitleFromHeading":true,"content":"\u003ch1 id=\"header\" tabindex=\"-1\"\u003eHeader\u003c/h1\u003e","variants":[{"file":"header.html","id":"header/header.html-1","componentId":"header","title":"Header","extension":"html","raw":"\u003cdiv class=\"btcpay-header\"\u003e\n  \u003cdiv class=\"btcpay-header-columns\"\u003e\n    \u003ca href=\"#\"\u003e\n      \u003cimg src=\"/svg/logo.svg\" class=\"btcpay-header-logo\" alt=\"\" /\u003e\n    \u003c/a\u003e\n    \u003c!--#include file=\"/theme-switch/variants/theme-switch.html\" --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/header","sourceFile":"src/components/header/component.config.js","readmeFile":"src/components/header/README.md","type":"component"},"pills":{"id":"pills","title":"Pills","isTitleFromHeading":false,"variants":[{"file":"labels.html","id":"pills/labels.html-1","componentId":"pills","title":"Labels","extension":"html","raw":"\u003cform action=\"#\"\u003e\n  \u003cdiv class=\"nav btcpay-pills pb-1\"\u003e\n    \u003cinput id=\"Internal\" value=\"Internal\" type=\"radio\" name=\"node\" checked=\"checked\"\u003e\n    \u003clabel for=\"Internal\" \u003eUse internal node\u003c/label\u003e\n    \u003cinput id=\"Custom\" value=\"Custom\" type=\"radio\" name=\"node\"\u003e\n    \u003clabel for=\"Custom\"\u003eUse custom node\u003c/label\u003e\n  \u003c/div\u003e\n\u003c/form\u003e"},{"file":"links.html","id":"pills/links.html-2","componentId":"pills","title":"Links","extension":"html","raw":"\u003cnav class=\"nav pb-1 btcpay-pills\"\u003e\n  \u003ca class=\"btcpay-pill\" href=\"#\"\u003eBTC (On-Chain)\u003c/a\u003e\n  \u003ca class=\"btcpay-pill active\" href=\"#\"\u003eBTC (Off-Chain)\u003c/a\u003e\n\u003c/nav\u003e"}],"sourcePath":"src/components/pills","sourceFile":"src/components/pills/component.config.js","type":"component"},"responsive-helper":{"id":"responsive-helper","title":"Responsive Helper","isTitleFromHeading":false,"variants":[],"sourcePath":"src/components/responsive-helper","type":"component"},"status":{"id":"status","title":"Status","isTitleFromHeading":false,"variants":[],"sourcePath":"src/components/status","type":"component"},"theme-switch":{"id":"theme-switch","title":"Theme Switch","isTitleFromHeading":true,"content":"\u003ch1 id=\"theme-switch\" tabindex=\"-1\"\u003eTheme Switch\u003c/h1\u003e\n\u003cp\u003eUse the Theme Switch in the header to offer the user the ability to set the color mode explicitely.\u003c/p\u003e\n\u003cp\u003eSee the \u003ca href=\"/scripts/theme-switch.js\"\u003etheme-switch.js\u003c/a\u003e for a vanilla JavaScript implementation.\u003c/p\u003e","variants":[{"file":"theme-switch.html","id":"theme-switch/theme-switch.html-1","componentId":"theme-switch","title":"Theme Switch","extension":"html","raw":"\u003cdiv class=\"btcpay-theme-switch\"\u003e\n  \u003cspan class=\"btcpay-theme-switch-label\"\u003eTheme\u003c/span\u003e\n  \u003cdiv class=\"btcpay-theme-switch-themes\"\u003e\n      \u003cbutton type=\"button\" title=\"System\" data-theme=\"system\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-system\"\u003e\u003cuse href=\"/svg/icons.svg#themes-system\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" title=\"Light\" data-theme=\"light\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-light\"\u003e\u003cuse href=\"/svg/icons.svg#themes-light\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n      \u003cbutton type=\"button\" title=\"Dark\" data-theme=\"dark\"\u003e\n        \u003csvg role=\"img\" class=\"icon icon-themes-dark\"\u003e\u003cuse href=\"/svg/icons.svg#themes-dark\"\u003e\u003c/use\u003e\u003c/svg\u003e\n      \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript src=\"/scripts/theme-switch.js\"\u003e\u003c/script\u003e\n\u003cnoscript\u003e\u003cstyle\u003e.btcpay-theme-switch { display: none; }\u003c/style\u003e\u003c/noscript\u003e"}],"sourcePath":"src/components/theme-switch","sourceFile":"src/components/theme-switch/component.config.js","readmeFile":"src/components/theme-switch/README.md","type":"component"},"toggle":{"id":"toggle","title":"Toggle","isTitleFromHeading":false,"variants":[{"file":"simple.html","id":"toggle/simple.html-1","componentId":"toggle","title":"Simple","extension":"html","raw":"\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"PayJoinEnabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" /\u003e\n  \u003clabel for=\"PayJoinEnabled\" class=\"form-label mb-0 me-1\"\u003ePayJoin enabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"PayJoinEnabledOn\" type=\"checkbox\" class=\"btcpay-toggle me-2\" checked /\u003e\n  \u003clabel for=\"PayJoinEnabledOn\" class=\"form-label mb-0 me-1\"\u003ePayJoin enabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center\"\u003e\n  \u003cinput id=\"Disabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" disabled /\u003e\n  \u003clabel for=\"Disabled\" class=\"form-label mb-0 me-1\"\u003eDisabled\u003c/label\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"form-group d-flex align-items-center mb-0\"\u003e\n  \u003cinput id=\"Disabled\" type=\"checkbox\" class=\"btcpay-toggle me-2\" disabled checked /\u003e\n  \u003clabel for=\"Disabled\" class=\"form-label mb-0 me-1\"\u003eDisabled active\u003c/label\u003e\n\u003c/div\u003e"},{"file":"helptext.html","id":"toggle/helptext.html-2","componentId":"toggle","title":"Helptext","extension":"html","raw":"\u003cdiv class=\"d-flex align-items-center\"\u003e\n  \u003cinput id=\"IsRecurring\" type=\"checkbox\" class=\"btcpay-toggle me-3\" /\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"IsRecurring\" class=\"form-label mb-0\"\u003eRecurring Goal\u003c/label\u003e\n    \u003cdiv class=\"form-text\"\u003eReset goal after a specific period of time, based on your crowdfund's start date.\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"},{"file":"expand.html","id":"toggle/expand.html-3","componentId":"toggle","title":"Expand","extension":"html","raw":"\u003cdiv class=\"d-flex align-items-center\"\u003e\n  \u003cinput id=\"EnableTips\" type=\"checkbox\" class=\"btcpay-toggle me-3\" data-bs-toggle=\"collapse\"\n    data-bs-target=\"#CustomTipsSettings\" aria-expanded=\"false\" aria-controls=\"CustomTipsSettings\" /\u003e\n  \u003clabel for=\"EnableTips\" class=\"form-label mb-0\"\u003eEnable tips\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"collapse\" id=\"CustomTipsSettings\"\u003e\n  \u003cdiv class=\"form-group pt-3\"\u003e\n    \u003clabel id=\"CustomTipText\" class=\"form-label\" data-required\u003eCustom tip text\u003c/label\u003e\n    \u003cinput for=\"CustomTipText\" class=\"form-control\" required /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e"}],"sourcePath":"src/components/toggle","sourceFile":"src/components/toggle/component.config.js","type":"component"},"kitchensink":{"id":"kitchensink","title":"Kitchensink","isTitleFromHeading":true,"content":"\u003ch1 id=\"kitchensink\" tabindex=\"-1\"\u003eKitchensink\u003c/h1\u003e\n\u003cp\u003eJust a page that showcases everything and all together.\u003c/p\u003e","variants":[{"file":"kitchensink.html","id":"kitchensink/kitchensink.html-1","componentId":"kitchensink","title":"Kitchensink","extension":"html","raw":"\u003c!--#include file=\"/header/variants/header.html\" --\u003e\n\n\u003ch1\u003eChancellor on Brink of Second Bailout for Banks\u003c/h1\u003e\n\u003ch2\u003eBillions may be needed as lending squeeze tightens\u003c/h2\u003e\n\u003cp\u003eAlistair Darling has been forced to consider a second bailout for banks as the lending drought worsens.\u003c/p\u003e\n\u003cp\u003eThe Chancellor will decide within weeks whether to pump billions more into the economy as evidence mounts that the \u003ccode\u003e£37 billion\u003c/code\u003e part-nationalisation last year has failed to keep credit flowing. Options include cash injections, offering banks cheaper state guarantees to raise money privately or buying up “toxic assets”, The Times has learnt.\u003c/p\u003e\n\u003cpre\u003econst test = 123;\u003c/pre\u003e\n\u003cp\u003eThe Bank of England revealed yesterday that, despite intense pressure, the banks curbed lending in the final quarter of last year and plan even tighter restrictions in the coming months. Its findings will alarm the Treasury.\u003c/pre\u003e\n\n\u003c!--#include file=\"/footer/variants/footer.html\" --\u003e"}],"sourcePath":"src/views/kitchensink","sourceFile":"src/views/kitchensink/component.config.js","readmeFile":"src/views/kitchensink/README.md","type":"component"}},"navigation":{"index":{"childIds":["design","components","resources","development"],"id":"index","itemId":"index","path":"/","type":"documentation","title":"BTCPay Server Design System"},"components":{"prevSiblingId":"design","nextSiblingId":"resources","childIds":["components/header","components/theme-switch","components/bootstrap","components/pills","components/toggle","components/footer"],"parentId":"index","id":"components","itemId":"components","isStructural":true,"path":"/components/","type":"documentation","title":"Components"},"components/header":{"nextSiblingId":"components/theme-switch","parentId":"components","id":"components/header","itemId":"header","path":"/components/header/","type":"component","title":"Header","keywords":[null]},"components/theme-switch":{"prevSiblingId":"components/header","nextSiblingId":"components/bootstrap","parentId":"components","id":"components/theme-switch","itemId":"theme-switch","path":"/components/theme-switch/","type":"component","title":"Theme Switch","keywords":[null]},"components/bootstrap":{"prevSiblingId":"components/theme-switch","nextSiblingId":"components/pills","parentId":"components","id":"components/bootstrap","itemId":"bootstrap","path":"/components/bootstrap/","type":"component","title":"Bootstrap v5","keywords":[null]},"components/pills":{"prevSiblingId":"components/bootstrap","nextSiblingId":"components/toggle","parentId":"components","id":"components/pills","itemId":"pills","path":"/components/pills/","type":"component","title":"Pills","keywords":[null]},"components/toggle":{"prevSiblingId":"components/pills","nextSiblingId":"components/footer","parentId":"components","id":"components/toggle","itemId":"toggle","path":"/components/toggle/","type":"component","title":"Toggle","keywords":[null]},"components/footer":{"prevSiblingId":"components/toggle","parentId":"components","id":"components/footer","itemId":"footer","path":"/components/footer/","type":"component","title":"Footer","keywords":[null]},"design":{"nextSiblingId":"components","childIds":["design/colors","design/fonts","design/icons","design/spaces","design/variables"],"parentId":"index","id":"design","itemId":"design","isStructural":true,"path":"/design/","type":"documentation","title":"Design"},"development":{"prevSiblingId":"resources","parentId":"index","id":"development","itemId":"development","path":"/development/","type":"documentation","title":"Development"},"resources":{"prevSiblingId":"components","nextSiblingId":"development","childIds":["resources/css","resources/favicon","resources/design-files","resources/supporters"],"parentId":"index","id":"resources","itemId":"resources","isStructural":true,"path":"/resources/","type":"documentation","title":"Resources"},"views":{"nextSiblingId":"design","childIds":["views/kitchensink"],"parentId":"index","id":"views","itemId":"views","isStructural":true,"path":"/views/","type":"documentation","title":"Views"},"views/kitchensink":{"parentId":"views","id":"views/kitchensink","itemId":"kitchensink","path":"/views/kitchensink/","type":"component","title":"Kitchensink","keywords":[null]},"design/colors":{"nextSiblingId":"design/fonts","parentId":"design","id":"design/colors","itemId":"design/colors","path":"/design/colors/","type":"tokens","title":"Colors"},"design/fonts":{"prevSiblingId":"design/colors","nextSiblingId":"design/icons","parentId":"design","id":"design/fonts","itemId":"design/fonts","path":"/design/fonts/","type":"tokens","title":"Fonts"},"design/icons":{"prevSiblingId":"design/fonts","nextSiblingId":"design/spaces","parentId":"design","id":"design/icons","itemId":"design/icons","path":"/design/icons/","type":"tokens","title":"Icons"},"design/spaces":{"prevSiblingId":"design/icons","nextSiblingId":"design/variables","parentId":"design","id":"design/spaces","itemId":"design/spaces","path":"/design/spaces/","type":"tokens","title":"Spaces"},"design/variables":{"prevSiblingId":"design/spaces","parentId":"design","id":"design/variables","itemId":"design/variables","path":"/design/variables/","type":"tokens","title":"Variables"},"resources/css":{"nextSiblingId":"resources/favicon","parentId":"resources","id":"resources/css","itemId":"resources/css","path":"/resources/css/","type":"documentation","title":"CSS"},"resources/design-files":{"prevSiblingId":"resources/favicon","nextSiblingId":"resources/supporters","parentId":"resources","id":"resources/design-files","itemId":"resources/design-files","path":"/resources/design-files/","type":"documentation","title":"Design files"},"resources/favicon":{"prevSiblingId":"resources/css","nextSiblingId":"resources/design-files","parentId":"resources","id":"resources/favicon","itemId":"resources/favicon","path":"/resources/favicon/","type":"documentation","title":"Favicon"},"resources/supporters":{"prevSiblingId":"resources/design-files","parentId":"resources","id":"resources/supporters","itemId":"resources/supporters","path":"/resources/supporters/","type":"tokens","title":"Supporters"}}},
         locales: {"de":{"_meta":{"title":"Deutsch"},"navigation":{"toggle":"Navigation umschalten"},"options":{"edit":"Bearbeiten","info":"Info","properties":"Properties","theme_properties":"Themes","preview":"Vorschau","code":"Code","copy_permalink":"Variantenlink kopieren","open_in_window":"In separatem Fenster öffnen","edit_on_codepen":"In Codepen öffnen","reset":"zurücksetzen","toggle":"umschalten","all_themes":"Alle anzeigen","loading":"Wird geladen…","copy_code":"Code kopieren","copy_code_tooltip":"Kopiert!"},"code":{"raw":"Code","context":"Daten","rendered":"HTML"},"component":{"dependencies":"Zusammengesetzt aus","dependents":"Wird benutzt von"},"token":{"name":"Name","type":"Typ","icon":"Icon","demo":"Demo","value":"Wert","usage":"Gebrauch","license":"Lizenz","fontface":"Schriftart","fontweight":"Schriftschnitt","variable":"Variable","description":"Beschreibung","reference":"Referenz","property":"Eigenschaft","theme":"Theme","default":"Standard"},"properties":{"title":"Datentypen","name":"Property","type":"Typ","description":"Beschreibung","required":"Pflicht","default":"Standard"},"footer":{"version":"Version","last_update":"Letztes Update am"},"search":{"label":"Suche","toggle":"Suche umschalten","title":"Suchergebnisse für \"%{query}\"","no_results":"Leider konnten keine passenden Suchergebnisse gefunden werden."},"settings":{"title":"Einstellungen","locale":"Sprache","hljs":"Highlight-Theme","preview_mode":"Vorschaumodus","breakpoints":"Breakpoints","viewports":"Viewports"},"not_found":{"title":"Nicht gefunden","content":"Diese Seite existiert leider nicht."}},"en":{"_meta":{"title":"English"},"navigation":{"toggle":"Toggle navigation"},"options":{"edit":"Edit","info":"Info","properties":"Properties","theme_properties":"Themes","preview":"Preview","code":"Code","copy_permalink":"Copy link to variant","open_in_window":"Open in separate window","edit_on_codepen":"Edit on Codepen","reset":"reset","toggle":"toggle","all_themes":"All themes","loading":"Loading…","copy_code":"Copy to clipboard","copy_code_tooltip":"Copied!"},"code":{"raw":"Code","context":"Data","rendered":"HTML"},"component":{"dependencies":"Composed of","dependents":"Used within"},"token":{"name":"Name","type":"Type","icon":"Icon","demo":"Demo","value":"Value","usage":"Usage","license":"License","fontface":"Typeface","fontweight":"Weight","variable":"Variable","description":"Description","reference":"Reference","property":"Property","theme":"Theme","default":"Default"},"properties":{"title":"Datatypes","name":"Property","type":"Type","description":"Description","required":"Required","default":"Default"},"footer":{"version":"Version","last_update":"Last updated on"},"search":{"label":"Search","toggle":"Toggle search","title":"Search results for \"%{query}\"","no_results":"Unfortunately there is no content matching your search query."},"settings":{"title":"Settings","locale":"Locale","hljs":"Highlight-Theme","preview_mode":"Preview Mode","breakpoints":"Breakpoints","viewports":"Viewports"},"not_found":{"title":"Not Found","content":"This page does not exist."}}},
         iframeScripts: [
           "/_assets/scripts/preview.1730c6c.js",
diff --git a/svg/icons.svg b/svg/icons.svg
index 30973fc..18048e6 100644
--- a/svg/icons.svg
+++ b/svg/icons.svg
@@ -46,6 +46,8 @@
 <symbol id="forms-text" viewBox="0 0 24 24" fill="none"><rect x="1" y="1" width="22" height="22" rx="3" stroke="currentColor" stroke-width="2"/><path d="M7 7.75H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></symbol>
 <symbol id="info" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 22.39c5.739 0 10.39-4.651 10.39-10.39C22.39 6.261 17.74 1.61 12 1.61 6.261 1.61 1.61 6.26 1.61 12c0 5.739 4.651 10.39 10.39 10.39zm0-2.597a7.793 7.793 0 1 0 0-15.586 7.793 7.793 0 0 0 0 15.586z" fill="currentColor"/><path d="M12 6.805a1.299 1.299 0 1 0 0 2.597 1.299 1.299 0 0 0 0-2.597zM10.701 12s0-1.299 1.299-1.299S13.299 12 13.299 12v3.897s0 1.298-1.299 1.298-1.299-1.298-1.299-1.298z" fill="currentColor"/></symbol>
 <symbol id="key" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 9.5C10.5003 8.65387 10.769 7.82965 11.2673 7.14583C11.7657 6.46202 12.468 5.95384 13.2733 5.69436C14.0787 5.43488 14.9456 5.43748 15.7494 5.70176C16.5532 5.96605 17.2525 6.47842 17.7467 7.1652C18.2409 7.85198 18.5047 8.6778 18.4999 9.52392C18.4952 10.37 18.2223 11.1929 17.7205 11.8741C17.2186 12.5553 16.5137 13.0599 15.707 13.3152C14.9003 13.5705 14.0334 13.5634 13.231 13.295C13.0989 13.2507 12.9571 13.2441 12.8214 13.2759C12.6858 13.3077 12.5617 13.3766 12.463 13.475L11.44 14.5H10.25C10.0511 14.5 9.86032 14.579 9.71967 14.7197C9.57902 14.8603 9.5 15.0511 9.5 15.25V16.44L9.44 16.5H8.25C8.05109 16.5 7.86032 16.579 7.71967 16.7197C7.57902 16.8603 7.5 17.0511 7.5 17.25V18.44L7.44 18.5H5.75C5.6837 18.5 5.62011 18.4737 5.57322 18.4268C5.52634 18.3799 5.5 18.3163 5.5 18.25V16.56L10.524 11.537C10.6226 11.4384 10.6917 11.3144 10.7237 11.1787C10.7556 11.0431 10.7492 10.9012 10.705 10.769C10.5686 10.3598 10.4994 9.93129 10.5 9.5ZM14.5 4C13.6681 3.99986 12.847 4.18843 12.0985 4.55153C11.35 4.91463 10.6937 5.44279 10.1788 6.09625C9.66398 6.74971 9.30409 7.51145 9.12623 8.32412C8.94837 9.13679 8.95718 9.97923 9.152 10.788L4.22 15.72C4.07931 15.8605 4.00018 16.0512 4 16.25V18.25C4 19.216 4.784 20 5.75 20H7.75C7.94885 19.9998 8.13948 19.9207 8.28 19.78L8.78 19.28C8.92069 19.1395 8.99983 18.9488 9 18.75V18H9.75C9.94885 17.9998 10.1395 17.9207 10.28 17.78L10.78 17.28C10.9207 17.1395 10.9998 16.9488 11 16.75V16H11.75C11.9488 15.9998 12.1395 15.9207 12.28 15.78L13.212 14.848C13.9672 15.0293 14.7523 15.0487 15.5155 14.9047C16.2787 14.7608 17.0028 14.4568 17.64 14.0128C18.2773 13.5689 18.8133 12.995 19.2128 12.3289C19.6123 11.6628 19.8662 10.9197 19.9577 10.1485C20.0493 9.37721 19.9765 8.59531 19.7441 7.85422C19.5117 7.11314 19.125 6.42968 18.6094 5.84883C18.0938 5.26798 17.461 4.80292 16.7527 4.48426C16.0444 4.16559 15.2767 4.00055 14.5 4ZM15 10C15.2652 10 15.5196 9.89464 15.7071 9.70711C15.8946 9.51957 16 9.26522 16 9C16 8.73478 15.8946 8.48043 15.7071 8.29289C15.5196 8.10536 15.2652 8 15 8C14.7348 8 14.4804 8.10536 14.2929 8.29289C14.1054 8.48043 14 8.73478 14 9C14 9.26522 14.1054 9.51957 14.2929 9.70711C14.4804 9.89464 14.7348 10 15 10Z" fill="currentColor"/></symbol>
+<symbol id="keypad-clear" viewBox="0 0 24 24" fill="none"><path d="M16.6858 5.54919L11.9452 10.3416L7.20314 5.49379L7.20314 5.49379L7.20167 5.4923C6.71724 5.00257 5.97108 5.00257 5.48664 5.4923L5.48664 5.4923C5.00445 5.97977 5.00445 6.72702 5.48664 7.21448L10.2344 12.0142L5.48664 16.814C5.00445 17.3014 5.00445 18.0487 5.48664 18.5361L5.48664 18.5361C5.75044 18.8028 6.0883 18.875 6.37226 18.875C6.65621 18.875 6.99412 18.8028 7.25793 18.5361L12 13.7422L16.742 18.5361C17.0058 18.8028 17.3437 18.875 17.6277 18.875C17.9116 18.875 18.2495 18.8028 18.5134 18.5361C18.9955 18.0487 18.9955 17.3014 18.5134 16.814L18.5134 16.8139L18.5089 16.8095L13.6574 12.0667L18.4008 7.27138C18.883 6.78391 18.883 6.03666 18.4008 5.54919C17.9163 5.05946 17.1702 5.05946 16.6858 5.54919Z" fill="currentColor" stroke="currentColor" stroke-width="0.75"/></symbol>
+<symbol id="keypad-plus" viewBox="0 0 24 24" fill="none"><path d="M5.253 13.255L10.7739 13.225L10.7438 18.7458C10.7418 19.1291 10.9344 19.4185 11.1245 19.6087C11.3147 19.7988 11.6041 19.9914 11.9874 19.9894C12.6676 19.9857 13.1958 19.4575 13.1995 18.7772L13.1995 18.7772L13.1994 18.7689L13.1365 13.2121L18.6599 13.1821C19.3402 13.1784 19.8684 12.6502 19.8721 11.9699C19.8758 11.2854 19.3468 10.7564 18.6622 10.7601L13.1442 10.7901L13.2054 5.23803L13.2054 5.23803L13.2054 5.23523C13.2092 4.5507 12.6802 4.02169 11.9956 4.02541L11.9956 4.02541C11.3153 4.02912 10.7872 4.55724 10.7835 5.23753L10.7534 10.7693L5.22163 10.7994C4.54134 10.8031 4.01322 11.3312 4.00952 12.0115C4.00743 12.3947 4.19999 12.6841 4.39017 12.8743C4.58032 13.0645 4.86979 13.2571 5.253 13.255Z" fill="currentColor" stroke="currentColor"/></symbol>
 <symbol id="lightning-node" viewBox="0 0 24 24" fill="none"><path d="M14 4C14 5.10457 13.1046 6 12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4Z" fill="currentColor"/><path d="M20 14C21.1046 14 22 13.1046 22 12C22 10.8954 21.1046 10 20 10C18.8954 10 18 10.8954 18 12C18 13.1046 18.8954 14 20 14Z" fill="currentColor"/><path d="M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20C10 18.8954 10.8954 18 12 18C13.1046 18 14 18.8954 14 20Z" fill="currentColor"/><path d="M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z" fill="currentColor"/><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="currentColor"/></symbol>
 <symbol id="lightning" viewBox="0 0 24 24" fill="none"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
 <symbol id="lock" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.13333 8.26667V10.4H7.86667C7.3716 10.4 6.8968 10.5967 6.54673 10.9467C6.19667 11.2968 6 11.7716 6 12.2667V18.1333C6 19.1637 6.83627 20 7.86667 20H16.9333C17.4284 20 17.9032 19.8033 18.2533 19.4533C18.6033 19.1032 18.8 18.6284 18.8 18.1333V12.2667C18.8 11.7716 18.6033 11.2968 18.2533 10.9467C17.9032 10.5967 17.4284 10.4 16.9333 10.4H16.6667V8.26667C16.6667 7.13508 16.2171 6.04983 15.417 5.24968C14.6168 4.44952 13.5316 4 12.4 4C11.2684 4 10.1832 4.44952 9.38301 5.24968C8.58286 6.04983 8.13333 7.13508 8.13333 8.26667ZM15.0667 10.4V8.26667C15.0667 7.55942 14.7857 6.88115 14.2856 6.38105C13.7855 5.88095 13.1072 5.6 12.4 5.6C11.6928 5.6 11.0145 5.88095 10.5144 6.38105C10.0143 6.88115 9.73333 7.55942 9.73333 8.26667V10.4H15.0667ZM16.6667 12H16.9333C17.0041 12 17.0719 12.0281 17.1219 12.0781C17.1719 12.1281 17.2 12.1959 17.2 12.2667V18.1333C17.2 18.2041 17.1719 18.2719 17.1219 18.3219C17.0719 18.3719 17.0041 18.4 16.9333 18.4H7.86667C7.79594 18.4 7.72811 18.3719 7.6781 18.3219C7.6281 18.2719 7.6 18.2041 7.6 18.1333V12.2667C7.6 12.1959 7.6281 12.1281 7.6781 12.0781C7.72811 12.0281 7.79594 12 7.86667 12H16.6667Z" fill="currentColor"/></symbol>
diff --git a/svg/icons/keypad-clear.svg b/svg/icons/keypad-clear.svg
new file mode 100644
index 0000000..f79e6aa
--- /dev/null
+++ b/svg/icons/keypad-clear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" stroke="currentColor" stroke-width=".75" d="m16.686 5.55-4.74 4.792-4.743-4.848-.001-.002a1.185 1.185 0 0 0-1.715 0 1.206 1.206 0 0 0 0 1.722l4.747 4.8-4.747 4.8a1.206 1.206 0 0 0 0 1.722c.263.267.601.339.885.339s.622-.072.886-.339L12 13.742l4.742 4.794c.264.267.602.339.886.339s.622-.072.885-.339a1.206 1.206 0 0 0 0-1.722l-.004-.005-4.852-4.742 4.744-4.796a1.206 1.206 0 0 0 0-1.722 1.185 1.185 0 0 0-1.715 0Z"/></svg>
\ No newline at end of file
diff --git a/svg/icons/keypad-plus.svg b/svg/icons/keypad-plus.svg
new file mode 100644
index 0000000..ba45152
--- /dev/null
+++ b/svg/icons/keypad-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="currentColor" stroke="currentColor" d="m5.253 13.255 5.52-.03-.03 5.52c-.001.384.191.674.381.864s.48.382.863.38a1.203 1.203 0 0 0 1.213-1.212v-.008l-.063-5.557 5.523-.03a1.203 1.203 0 0 0 1.212-1.212 1.185 1.185 0 0 0-1.21-1.21l-5.518.03.061-5.552v-.003a1.185 1.185 0 0 0-1.21-1.21 1.203 1.203 0 0 0-1.211 1.213l-.03 5.531-5.532.03a1.203 1.203 0 0 0-1.212 1.213c-.003.383.19.672.38.862s.48.383.863.381Z"/></svg>
\ No newline at end of file