{"id":18,"date":"2025-11-21T06:22:44","date_gmt":"2025-11-21T06:22:44","guid":{"rendered":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/?page_id=18"},"modified":"2025-12-05T09:30:20","modified_gmt":"2025-12-05T09:30:20","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-18-205 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-18-206 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-18-207 bde-heading bde-preset-1922009f-adef-443c-b467-fa06cf855046\">\nStyle Guide\n<\/h1>\n<\/div><\/div>\n<\/section><section class=\"bde-section-18-208 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-18-209 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-18-210 bde-heading\">\nColor style\n<\/h4><div class=\"bde-fancy-divider-18-211 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-18-212 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-213 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-214 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-215 bde-text\">\nPrimary Color\n<\/div><div class=\"bde-text-18-216 bde-text\">\n#FF7549\n<\/div>\n<\/div><div class=\"bde-div-18-217 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-218 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-219 bde-text\">\nSecondary Color\n<\/div><div class=\"bde-text-18-220 bde-text\">\n#233B99\n<\/div>\n<\/div><div class=\"bde-div-18-221 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-222 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-223 bde-text\">\nHeading Color\n<\/div><div class=\"bde-text-18-224 bde-text\">\n#202020\n<\/div>\n<\/div><div class=\"bde-div-18-225 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-226 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-227 bde-text\">\nText Color\n<\/div><div class=\"bde-text-18-228 bde-text\">\n#4B4B4B\n<\/div>\n<\/div><div class=\"bde-div-18-229 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-230 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-231 bde-text\">\nLight Color\n<\/div><div class=\"bde-text-18-232 bde-text\">\n#F0EFEC\n<\/div>\n<\/div><div class=\"bde-div-18-233 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-234 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-text-18-235 bde-text\">\nBorder Color\n<\/div><div class=\"bde-text-18-236 bde-text\">\n#DAD9D6\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-237 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-18-238 bde-heading\">\nHeading style\n<\/h4><div class=\"bde-fancy-divider-18-239 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-18-287 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-18-288 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-18-289 bde-heading\">\nH1 - Aa Bb Cc\n<\/h1><div class=\"bde-div-18-290 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-291 bde-text\">\nHeading 1\n<\/div><div class=\"bde-text-18-292 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-293 bde-text\">\nSize: var(--bde-h1-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-294 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-18-295 bde-heading\">\nH2 - Aa Bb Cc\n<\/h2><div class=\"bde-div-18-296 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-297 bde-text\">\nHeading 2\n<\/div><div class=\"bde-text-18-298 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-299 bde-text\">\nSize: var(--bde-h2-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-300 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-18-301 bde-heading\">\nH3 - Aa Bb Cc\n<\/h3><div class=\"bde-div-18-302 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-303 bde-text\">\nHeading 3\n<\/div><div class=\"bde-text-18-304 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-305 bde-text\">\nSize: var(--bde-h3-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-306 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-18-307 bde-heading\">\nH4 - Aa Bb Cc\n<\/h4><div class=\"bde-div-18-308 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-309 bde-text\">\nHeading 4\n<\/div><div class=\"bde-text-18-310 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-311 bde-text\">\nSize: var(--bde-h4-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-312 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-18-313 bde-heading\">\nH5 - Aa Bb Cc\n<\/h5><div class=\"bde-div-18-314 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-315 bde-text\">\nHeading 5\n<\/div><div class=\"bde-text-18-316 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-317 bde-text\">\nSize: var(--bde-h5-font-size)\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-318 bde-div\">\n  \n  \n\t\n\n\n\n<h6 class=\"bde-heading-18-319 bde-heading\">\nH6 - Aa Bb Cc\n<\/h6><div class=\"bde-div-18-320 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-18-321 bde-text\">\nHeading 6\n<\/div><div class=\"bde-text-18-322 bde-text\">\nFont \"Manrope\"\n<\/div><div class=\"bde-text-18-323 bde-text\">\nSize: var(--bde-h6-font-size)\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-18-277 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-18-278 bde-heading\">\nRich text typography\n<\/h4><div class=\"bde-fancy-divider-18-279 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-18-280 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-18-281 bde-div px_con_div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-18-282 bde-heading\">\nButton Style\n<\/h4><div class=\"bde-fancy-divider-18-283 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-18-284 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-18-285 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-18-286 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 Color style Primary Color #FF7549 Secondary Color #233B99 Heading Color #202020 Text Color #4B4B4B Light Color #F0EFEC Border Color #DAD9D6 Heading style H1 &#8211; Aa Bb Cc Heading 1 Font &#8220;Manrope&#8221; Size: var(&#8211;bde-h1-font-size) H2 &#8211; Aa Bb Cc Heading 2 Font &#8220;Manrope&#8221; Size: var(&#8211;bde-h2-font-size) H3 &#8211; Aa Bb Cc Heading 3 Font &#8220;Manrope&#8221; [&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-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdtemplatehub.com\/breakdance-branding-layouts-pack\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}