{"id":2125,"date":"2025-12-22T11:05:45","date_gmt":"2025-12-22T11:05:45","guid":{"rendered":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/?page_id=2125"},"modified":"2026-01-02T13:16:11","modified_gmt":"2026-01-02T13:16:11","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-2125-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-2125-101 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-2125-102 bde-heading\">\nStyle Guide\n<\/h1><div class=\"bde-columns-2125-103 bde-columns\"><div class=\"bde-column-2125-104 bde-column\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-105 bde-heading bde-preset-96d384d5-fbe5-4075-b39b-15140b505008\">\nStyle Guide\n<\/h3>\n<\/div><div class=\"bde-column-2125-106 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-107 bde-div\">\n  \n  \n\t\n\n\n\n<a class=\"bde-text-link-2125-108 bde-text-link breakdance-link\" href=\"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\" target=\"_self\" data-type=\"url\">\n  Home\n\n<\/a><div class=\"bde-icon-2125-109 bde-icon\">\n\n    \n            <div class=\"bde-icon-icon breakdance-icon-atom\" >\n    \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        \n        \n        \n            <\/div>\n    \n\n\n<\/div><a class=\"bde-text-link-2125-110 bde-text-link breakdance-link\" target=\"_self\" data-type=\"url\">\n  Style Guide\n\n<\/a>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-2125-111 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-2125-112 bde-columns\"><div class=\"bde-column-2125-113 bde-column\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-114 bde-heading\">\nTheme style\n<\/h3><div class=\"bde-button-2125-115 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--custom bde-button__button\" href=\"#Color\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">Color<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div><div class=\"bde-button-2125-116 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--custom bde-button__button\" href=\"#Typography\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">Typography<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div><div class=\"bde-button-2125-117 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--custom bde-button__button\" href=\"#Button\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">Button<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div>\n<\/div><div class=\"bde-column-2125-118 bde-column\">\n  \n  \n\t\n\n\n\n<h3 id=\"Color\" class=\"bde-heading-2125-119 bde-heading\">\nColor style\n<\/h3><div class=\"bde-fancy-divider-2125-120 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-columns-2125-121 bde-columns\"><div class=\"bde-column-2125-122 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-123 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-124 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-125 bde-heading\">\nWhitesmoke\n<\/h3><div class=\"bde-text-2125-126 bde-text\">\n#F5F5F5\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-127 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-128 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-129 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-130 bde-heading\">\nWhite\n<\/h3><div class=\"bde-text-2125-131 bde-text\">\n#FFFFFF\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-132 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-133 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-134 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-135 bde-heading\">\nBlack\n<\/h3><div class=\"bde-text-2125-136 bde-text\">\n#000\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-137 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-138 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-139 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-140 bde-heading\">\nText color\n<\/h3><div class=\"bde-text-2125-141 bde-text\">\n#666\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-142 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-143 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-144 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-145 bde-heading\">\nCoral Orange\n<\/h3><div class=\"bde-text-2125-146 bde-text\">\n#FC6441\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-147 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-148 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-149 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-150 bde-heading\">\nLavender Blue\n<\/h3><div class=\"bde-text-2125-151 bde-text\">\n#7768E5\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-178 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-179 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-180 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-181 bde-heading\">\nlight yellow\n<\/h3><div class=\"bde-text-2125-182 bde-text\">\n#F8CA4D\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-2125-152 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-2125-153 bde-div\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-div-2125-154 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-155 bde-heading\">\nMint Cream\n<\/h3><div class=\"bde-text-2125-156 bde-text\">\n#f5f8f2\n<\/div>\n<\/div>\n<\/div><\/div><h3 id=\"Typography\" class=\"bde-heading-2125-157 bde-heading\">\nTypography style\n<\/h3><div class=\"bde-fancy-divider-2125-158 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><h1 class=\"bde-heading-2125-159 bde-heading\">\nH1 - Aa\n<\/h1><h1 class=\"bde-heading-2125-160 bde-heading\">\nBb Cc\n<\/h1><div class=\"bde-div-2125-161 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-162 bde-heading\">\nHeading 1\n<\/h3><h3 class=\"bde-heading-2125-163 bde-heading\">\nAlegreya Sans - 500 Medium\n<\/h3><h3 class=\"bde-heading-2125-164 bde-heading\">\nSize 200px\n<\/h3><h3 class=\"bde-heading-2125-165 bde-heading\">\nHeight 1.0 EM\n<\/h3>\n<\/div><div class=\"bde-fancy-divider-2125-166 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><h3 class=\"bde-heading-2125-167 bde-heading\">\nRich text typography\n<\/h3><div class=\"bde-fancy-divider-2125-168 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-2125-169 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\n<\/div><div class=\"bde-div-2125-188 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-189 bde-heading\">\nParagraph \n<\/h3><h3 class=\"bde-heading-2125-190 bde-heading\">\n42dot Sans - 500  Font family\n<\/h3>\n<\/div><h3 id=\"Button\" class=\"bde-heading-2125-170 bde-heading\">\nButton\n<\/h3><div class=\"bde-fancy-divider-2125-171 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-2125-172 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-173 bde-heading\">\nPrimary Button\n<\/h3><div class=\"bde-button-2125-174 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\">Button text<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div><div class=\"bde-div-2125-175 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-2125-176 bde-heading\">\nSecondary Button\n<\/h3><div class=\"bde-button-2125-177 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\">Button text<\/span>\n\n        \n        \n            <\/button>\n    \n\n\n<\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Style Guide Style Guide Home Style Guide Theme style Color Typography Button Color style Whitesmoke #F5F5F5 White #FFFFFF Black #000 Text color #666 Coral Orange #FC6441 Lavender Blue #7768E5 light yellow #F8CA4D Mint Cream #f5f8f2 Typography style H1 &#8211; Aa Bb Cc Heading 1 Alegreya Sans &#8211; 500 Medium Size 200px Height 1.0 EM Rich [&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-2125","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/pages\/2125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/comments?post=2125"}],"version-history":[{"count":0,"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/pages\/2125\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdwebkit.com\/breakdance-university-layouts-pack\/wp-json\/wp\/v2\/media?parent=2125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}