{"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-02-23T03:27:32","modified_gmt":"2026-02-23T03:27:32","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-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  \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><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-scuba-diving-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-scuba-diving-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<div class=\"bde-div-68-205 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-68-206 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-fancy-divider-68-207 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h4 class=\"bde-heading-68-113 bde-heading\">\nColor Style\n<\/h4>\n<\/div><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#3895FF\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#F6F8F9\n<\/div>\n<\/div><div class=\"bde-column-68-197 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-198 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-199 bde-heading\">\nHeading Color\n<\/h5><div class=\"bde-text-68-200 bde-text\">\n#001E3F\n<\/div>\n<\/div><div class=\"bde-column-68-201 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-68-202 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><h5 class=\"bde-heading-68-203 bde-heading\">\nText Color\n<\/h5><div class=\"bde-text-68-204 bde-text\">\n#313840\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<div class=\"bde-div-68-208 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-68-209 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-fancy-divider-68-210 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h4 class=\"bde-heading-68-152 bde-heading\">\nHeading Style\n<\/h4>\n<\/div><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: \"Original Surfer\"\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: \"Original Surfer\"\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: \"Original Surfer\"\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: \"Original Surfer\"\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: \"Original Surfer\"\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: \"Original Surfer\"\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<div class=\"bde-div-68-211 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-68-212 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-fancy-divider-68-213 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h4 class=\"bde-heading-68-190 bde-heading\">\nRich Text Style\n<\/h4>\n<\/div><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<div class=\"bde-div-68-214 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-68-215 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-fancy-divider-68-216 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   has-pattern\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h4 class=\"bde-heading-68-193 bde-heading\">\nButton Style\n<\/h4>\n<\/div><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-7139c40b-e795-452a-a249-7a2196a1e056 bde-button__button\"  >\n    \n        <span class=\"button-atom__text\">Light Button<\/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 #3895FF Light Color #F6F8F9 Heading Color #001E3F Text Color #313840 Heading Style This is a heading. Heading 1 Font: &#8220;Original Surfer&#8221; Size: var(&#8211;bde-h1-font-size) This is a heading. Heading 2 Font: &#8220;Original Surfer&#8221; Size: var(&#8211;bde-h2-font-size) This is a heading. Heading 3 Font: &#8220;Original Surfer&#8221; Size: var(&#8211;bde-h3-font-size) This [&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-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":0,"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-scuba-diving-layouts-pack\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}