{"id":68,"date":"2026-02-16T03:18:31","date_gmt":"2026-02-16T03:18:31","guid":{"rendered":"https:\/\/bdtemplatehub.com\/demo-service\/?page_id=68"},"modified":"2026-04-17T10:49:09","modified_gmt":"2026-04-17T10:49:09","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-68-100 bde-section bde-preset-965779c0-0eb6-4324-a79d-2ebaa922e457\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-68-101 bde-div px_container\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-68-102 bde-heading bde-preset-70a88e24-76de-4bf3-9ead-ff7690190139\">\nStyle Guide\n<\/h1><div class=\"bde-icon-list-68-103 bde-icon-list px_page_title_breadcrums bde-preset-fc91dd2f-6410-4ced-8d73-6d0ce6ba4f65\">\n<ul>\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\" target=\"_self\" data-type=\"url\"  >\n\n      \n      <span class='bde-icon-list__icon' aria-hidden='true'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-home\" viewBox=\"0 0 32 32\">\n<path d=\"M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z\"\/>\n<\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Home\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  \n              \n    <li>\n                      \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link bde-icon-list__item-wrapper\" href=\"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/style-guide\/\" target=\"_self\" data-type=\"url\"  >\n\n      \n      <span class='bde-icon-list__icon' aria-hidden='true'>\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 6.5.1 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license\/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d=\"M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z\"\/><\/svg>\n      <\/span>\n      <span class='bde-icon-list__text' >\n      Style Guide\n      <\/span>\n                  <\/a>\n\n      \n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-68-104 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-68-105 bde-div px_container\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-112 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-68-113 bde-heading\">\nColor Style\n<\/h4><div class=\"bde-columns-68-114 bde-columns\"><div class=\"bde-column-68-115 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-116 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-117 bde-heading\">\nPrimary Color\n<\/h5><div class=\"bde-text-68-118 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-119 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-120 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-121 bde-heading\">\nSecondary Color\n<\/h5><div class=\"bde-text-68-122 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-123 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-124 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-125 bde-heading\">\nLight Color\n<\/h5><div class=\"bde-text-68-126 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-127 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-128 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-129 bde-heading\">\nBorder Color\n<\/h5><div class=\"bde-text-68-130 bde-text\">\n#\n<\/div>\n<\/div><\/div><div class=\"bde-columns-68-131 bde-columns\"><div class=\"bde-column-68-132 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-133 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-134 bde-heading\">\nShadow Color\n<\/h5><div class=\"bde-text-68-135 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-136 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-137 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-138 bde-heading\">\nHeading Color\n<\/h5><div class=\"bde-text-68-139 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-140 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-141 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-142 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-68-143 bde-text\">\n#\n<\/div>\n<\/div><div class=\"bde-column-68-144 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-145 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-146 bde-heading\">\nBackground Color\n<\/h5><div class=\"bde-text-68-147 bde-text\">\n#\n<\/div>\n<\/div><\/div>\n<\/div><div class=\"bde-fancy-divider-68-148 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-68-151 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-68-152 bde-heading\">\nHeading Style\n<\/h4><div class=\"bde-div-68-153 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-68-154 bde-heading\">\nThis is a heading.\n<\/h1><div class=\"bde-div-68-155 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-156 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-68-157 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-158 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-68-159 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-68-160 bde-heading\">\nThis is a heading.\n<\/h2><div class=\"bde-div-68-161 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-162 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-68-163 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-164 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-68-165 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-68-166 bde-heading\">\nThis is a heading.\n<\/h3><div class=\"bde-div-68-167 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-168 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-68-169 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-170 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-68-171 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-68-172 bde-heading\">\nThis is a heading.\n<\/h4><div class=\"bde-div-68-173 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-174 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-68-175 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-176 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-68-177 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-68-178 bde-heading\">\nThis is a heading.\n<\/h5><div class=\"bde-div-68-179 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-180 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-68-181 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-182 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-68-183 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-68-184 bde-heading\">\nThis is a heading.\n<\/h6><div class=\"bde-div-68-185 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-186 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-68-187 bde-text\">\nFont-family: \"Inter\"\n<\/div><div class=\"bde-text-68-188 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-68-149 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-68-189 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-68-190 bde-heading\">\nRich Text Style\n<\/h4><div class=\"bde-rich-text-68-191 bde-rich-text breakdance-rich-text-styles\">\n<h1>H1<\/h1>\n<h2>H2<\/h2>\n<h3>H3<\/h3>\n<h4>H4<\/h4>\n<h5>H5<\/h5>\n<h6>H6<\/h6>\n<p> Font-family: \"Inter\" <\/p>\n<p>Unordered list<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>\n<blockquote>Block quote<\/blockquote>\n<p> Font-family: \"Inter\" <\/p>\n<p>Ordered list<\/p>\n<ol class=\"list\" role=\"list\">\n<li>Item 1<\/li>\n<li>Item 2<\/li>\n<li>Item 3<\/li>\n<\/ol>\n<p>Unordered list<\/p>\n<ul role=\"list\">\n<li>Item A<\/li>\n<li>Item B<\/li>\n<li>Item C<\/li>\n<\/ul>\n<p><a href=\"https:\/\/bdtemplatehub.com\/breakdance-nft-layouts-pack\/style-guide\/\">Text link<\/a><\/p>\n<p><strong>Bold text<\/strong><\/p>\n<p><em>Emphasis<\/em><\/p>\n<p><sup>Superscript<\/sup><\/p>\n<p><sub>Subscript<\/sub><\/p>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-68-150 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-div-68-192 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-68-193 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-div-68-194 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-68-195 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--primary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Click Here<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div><div class=\"bde-button-68-196 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--secondary bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Click Here<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Style Guide Color Style Primary Color # Secondary Color # Light Color # Border Color # Shadow Color # Heading Color # Text Color # Background Color # Heading Style This is a heading. Heading 1 Font-family: &#8220;Inter&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font-family: &#8220;Inter&#8221; Size: var(&#8211;bde-h2-font-size) This is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-68","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":5,"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":1957,"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/pages\/68\/revisions\/1957"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-chatbot-layouts-pack\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}