{"id":45,"date":"2026-02-16T03:13:58","date_gmt":"2026-02-16T03:13:58","guid":{"rendered":"https:\/\/bdtemplatehub.com\/demo-service\/?page_id=45"},"modified":"2026-08-04T05:18:42","modified_gmt":"2026-08-04T05:18:42","slug":"style-guide-2","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/style-guide-2\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<main id='bde-main'><section class=\"bde-section-45-203 bde-section bde-preset-965779c0-0eb6-4324-a79d-2ebaa922e457\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<div class=\"section-container\"><div class=\"bde-div-45-204 bde-div px_container\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-45-205 bde-heading bde-preset-70a88e24-76de-4bf3-9ead-ff7690190139\">\nStyle Guide\n<\/h1><a class=\"bde-container-link-45-206 bde-container-link breakdance-link\" href=\"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\" target=\"_self\" data-type=\"url\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-207 bde-text px_inner_page_subtitle\">\nHome\n<\/div>\n\n<\/a>\n<\/div><\/div>\n<\/section><section class=\"bde-section-45-104 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-45-112 bde-div px_container\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-45-113 bde-heading\">\nColor Style\n<\/h4><div class=\"bde-columns-45-114 bde-columns\"><div class=\"bde-column-45-115 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-116 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-117 bde-heading\">\nPrimary Color\n<\/h5><div class=\"bde-text-45-118 bde-text\">\n#ff8175\n<\/div>\n<\/div><div class=\"bde-column-45-119 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-120 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-121 bde-heading\">\nSecondary Color\n<\/h5><div class=\"bde-text-45-122 bde-text\">\n#5D3222\n<\/div>\n<\/div><div class=\"bde-column-45-123 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-124 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-125 bde-heading\">\nLight Color\n<\/h5><div class=\"bde-text-45-126 bde-text\">\n#F9F6F1\n<\/div>\n<\/div><div class=\"bde-column-45-127 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-128 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-129 bde-heading\">\nBorder Color\n<\/h5><div class=\"bde-text-45-130 bde-text\">\n#5A50441A\n<\/div>\n<\/div><\/div><div class=\"bde-columns-45-131 bde-columns\"><div class=\"bde-column-45-132 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-133 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-134 bde-heading\">\nLight Text\n<\/h5><div class=\"bde-text-45-135 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><div class=\"bde-column-45-136 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-137 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-138 bde-heading\">\nHeading Color\n<\/h5><div class=\"bde-text-45-139 bde-text\">\n#5c3222\n<\/div>\n<\/div><div class=\"bde-column-45-140 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-141 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-142 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-45-143 bde-text\">\n#866559\n<\/div>\n<\/div><div class=\"bde-column-45-144 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-45-145 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-45-146 bde-heading\">\nBackground Color\n<\/h5><div class=\"bde-text-45-147 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><\/div><div class=\"bde-fancy-divider-45-200 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-45-148 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-45-149 bde-heading\">\nHeading Style\n<\/h4><div class=\"bde-div-45-150 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-45-151 bde-heading\">\nThis is a heading.\n<\/h1><div class=\"bde-div-45-152 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-153 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-45-154 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-155 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-45-156 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-45-157 bde-heading\">\nThis is a heading.\n<\/h2><div class=\"bde-div-45-158 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-159 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-45-160 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-161 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-45-162 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-45-163 bde-heading\">\nThis is a heading.\n<\/h3><div class=\"bde-div-45-164 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-165 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-45-166 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-167 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-45-168 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-45-169 bde-heading\">\nThis is a heading.\n<\/h4><div class=\"bde-div-45-170 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-171 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-45-172 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-173 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-45-174 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-45-175 bde-heading\">\nThis is a heading.\n<\/h5><div class=\"bde-div-45-176 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-177 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-45-178 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-179 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-45-180 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-45-181 bde-heading\">\nThis is a heading.\n<\/h6><div class=\"bde-div-45-182 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-45-183 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-45-184 bde-text\">\nFont: \"Plus Jakarta Sans\"\n<\/div><div class=\"bde-text-45-185 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-fancy-divider-45-201 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-45-187 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-45-188 bde-heading\">\nRich Text Style\n<\/h4><div class=\"bde-rich-text-45-189 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n    pariatur.<\/p>\n<blockquote>Block quote<\/blockquote>\n<p>Ordered list<\/p>\n<ol role=\"list\" class=\"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=\"#\">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-45-202 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-45-190 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-45-191 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-div-45-192 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-45-193 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\">Primary Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div><div class=\"bde-button-45-194 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\">Secondary Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div><div class=\"bde-div-45-195 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-45-196 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--custom button-atom--preset-8bbe9e07-6e43-4a5d-8ab8-1ef4b2b749ca bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Light Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div><div class=\"bde-button-45-197 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--custom button-atom--preset-09d66209-5329-4e9f-9678-99aba8a6338c bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Light Outline Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Color Style Primary Color #ff8175 Secondary Color #5D3222 Light Color #F9F6F1 Border Color #5A50441A Light Text #FFFFFF Heading Color #5c3222 Text Color #866559 Background Color #FFFFFF Heading Style This is a heading. Heading 1 Font: &#8220;Plus Jakarta Sans&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Plus Jakarta Sans&#8221; Size: var(&#8211;bde-h2-font-size) [&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-45","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":0,"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-wellness-layouts-pack\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}