{"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-08-13T11:56:56","modified_gmt":"2026-08-13T11:56:56","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<main id='bde-main'><section class=\"bde-section-68-100 bde-section px_innerpage_header 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-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><a class=\"bde-container-link-68-198 bde-container-link breakdance-link\" href=\"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\" target=\"_self\" data-type=\"url\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-68-199 bde-text px_page_title_breadcrums\">\nHome\n<\/div>\n\n<\/a>\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#1d4ed8\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#06145b\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#f8fafc\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#e2e8f0cc\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#0f172a0f\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#020617\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#64748b\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#ffffff\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: \"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: \"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: \"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: \"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: \"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: \"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>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=\"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\">Primary Button<\/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--custom button-atom--preset-05a492cb-758a-478f-8163-0d72192e860b bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Text Link Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div><div class=\"bde-button-68-197 bde-button\">\n        \n    \n    \n    \n    \n            \n            <button type=\"button\" class=\"button-atom button-atom--custom button-atom--preset-30d28e6b-b5ac-4de4-b450-d446f03e80d3 bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Service Single Button<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Color Style Primary Color #1d4ed8 Secondary Color #06145b Light Color #f8fafc Border Color #e2e8f0cc Shadow Color #0f172a0f Heading Color #020617 Text Color #64748b Background Color #ffffff Heading Style This is a heading. Heading 1 Font: &#8220;Inter&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Inter&#8221; Size: var(&#8211;bde-h2-font-size) This is a heading. [&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-eye-care-layouts-pack\/wp-json\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":0,"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-eye-care-layouts-pack\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}