{"id":20,"date":"2025-12-05T10:35:20","date_gmt":"2025-12-05T10:35:20","guid":{"rendered":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/?page_id=20"},"modified":"2025-12-15T11:34:39","modified_gmt":"2025-12-15T11:34:39","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-20-274 bde-section bde-preset-27a0708d-efc2-47bc-9c8a-01e9d7d9a6fe\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<div class=\"section-container\"><div class=\"bde-div-20-275 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-20-276 bde-heading bde-preset-ea88b0ad-67ae-4bad-9c21-27312ebd1879\">\nStyle Guide\n<\/h1><div class=\"bde-fancy-divider-20-277 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator has-content has-content-center \">\n  \t    \t    \t    \t\t\t    \t\t<div class=\"bde-fancy-divider__content bde-fancy-divider__content--icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 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=\"M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z\"\/><\/svg><\/div>\n    \t                  <\/div>\n<\/div>\n\n<\/div><div class=\"bde-button-20-278 bde-button\">\n        \n    \n    \n    \n    \n            \n                    \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link button-atom button-atom--primary bde-button__button\" href=\"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">Home<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-20-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-20-101 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-20-102 bde-heading\">\nColor style\n<\/h4><div class=\"bde-fancy-divider-20-103 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-grid-20-104 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-105 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-106 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-107 bde-text\">\nPrimary Color\n<\/div><div class=\"bde-text-20-108 bde-text\">\n#337BD5\n<\/div>\n<\/div><div class=\"bde-div-20-109 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-110 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-111 bde-text\">\nSecondary Color\n<\/div><div class=\"bde-text-20-112 bde-text\">\n#1D2DBD\n<\/div>\n<\/div><div class=\"bde-div-20-113 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-114 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-115 bde-text\">\nHeading Color\n<\/div><div class=\"bde-text-20-116 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><div class=\"bde-div-20-117 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-118 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-119 bde-text\">\nText Color\n<\/div><div class=\"bde-text-20-120 bde-text\">\n#DCDCFF\n<\/div>\n<\/div><div class=\"bde-div-20-121 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-122 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-123 bde-text\">\nLight Color\n<\/div><div class=\"bde-text-20-124 bde-text\">\n#FFFFFF0F\n<\/div>\n<\/div><div class=\"bde-div-20-125 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-126 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-127 bde-text\">\nBorder Color\n<\/div><div class=\"bde-text-20-128 bde-text\">\n#FFFFFF29\n<\/div>\n<\/div><div class=\"bde-div-20-183 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-184 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-185 bde-text\">\nWhite Color\n<\/div><div class=\"bde-text-20-186 bde-text\">\n#FFFFFF\n<\/div>\n<\/div><div class=\"bde-div-20-129 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-130 bde-div\">\n              \n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-20-131 bde-text\">\nGradient 1\n<\/div><div class=\"bde-text-20-132 bde-text\">\n45deg, #337BD5, #1D2DBD\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-133 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-20-134 bde-heading\">\nHeading style\n<\/h4><div class=\"bde-fancy-divider-20-135 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-20-136 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-20-137 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-20-138 bde-heading\">\nH1 - Aa Bb Cc\n<\/h1><div class=\"bde-div-20-139 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-140 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-20-141 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-142 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-143 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-20-144 bde-heading\">\nH2 - Aa Bb Cc\n<\/h2><div class=\"bde-div-20-145 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-146 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-20-147 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-148 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-149 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-20-150 bde-heading\">\nH3 - Aa Bb Cc\n<\/h3><div class=\"bde-div-20-151 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-152 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-20-153 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-154 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-155 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-20-156 bde-heading\">\nH4 - Aa Bb Cc\n<\/h4><div class=\"bde-div-20-157 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-158 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-20-159 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-160 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-161 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-20-162 bde-heading\">\nH5 - Aa Bb Cc\n<\/h5><div class=\"bde-div-20-163 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-164 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-20-165 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-166 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-167 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-20-168 bde-heading\">\nH6 - Aa Bb Cc\n<\/h6><div class=\"bde-div-20-169 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-20-170 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-20-171 bde-text\">\nFont \"Baumans\"\n<\/div><div class=\"bde-text-20-172 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-20-173 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-20-174 bde-heading\">\nRich text typography\n<\/h4><div class=\"bde-fancy-divider-20-175 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-rich-text-20-176 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-div-20-177 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-20-178 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-fancy-divider-20-179 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-20-180 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-20-181 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-20-182 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>\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Color style Primary Color #337BD5 Secondary Color #1D2DBD Heading Color #FFFFFF Text Color #DCDCFF Light Color #FFFFFF0F Border Color #FFFFFF29 White Color #FFFFFF Gradient 1 45deg, #337BD5, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":0,"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-gaming-layouts-pack\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}