{"id":148,"date":"2026-02-10T11:05:25","date_gmt":"2026-02-10T11:05:25","guid":{"rendered":"https:\/\/bdwebkit.com\/woo-commerce-demo\/?page_id=148"},"modified":"2026-03-09T11:16:29","modified_gmt":"2026-03-09T11:16:29","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<section class=\"bde-section-148-242 bde-section\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<div class=\"section-container\"><div class=\"bde-div-148-243 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-148-244 bde-heading bde-preset-49498192-6229-4ec0-99ff-71f7b17119b5\">\nStyle Guide\n<\/h2><div class=\"bde-div-148-245 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-icon-list-148-246 bde-icon-list\">\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:\/\/bdwebkit.com\/breakdance-ceramic-store-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  <\/ul>\n\n<\/div><div class=\"bde-icon-148-247 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 320 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=\"M278.6 233.4c12.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 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"\/><\/svg>\n        \n        \n        \n            <\/div>\n    \n\n\n<\/div><div class=\"bde-text-148-248 bde-text\">\nStyle Guide\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-148-175 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-148-176 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nHeading\n<\/h2><div class=\"bde-grid-148-177 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-178 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-179 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-148-180 bde-heading\">\nTitle 01\n<\/h1><h2 class=\"bde-heading-148-181 bde-heading\">\n(h1) Heading \n<\/h2>\n<\/div><div class=\"bde-div-148-182 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-183 bde-heading\">\nFont-Size : 96px\n<\/h3><h3 class=\"bde-heading-148-184 bde-heading\">\nLine Height : 1\n<\/h3><h3 class=\"bde-heading-148-185 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-148-186 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-187 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-148-188 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nTitle 02\n<\/h2><h2 class=\"bde-heading-148-189 bde-heading\">\n(h2) Heading Title\n<\/h2>\n<\/div><div class=\"bde-div-148-190 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-191 bde-heading\">\nFont-Size : 36px\n<\/h3><h3 class=\"bde-heading-148-192 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-148-193 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-148-194 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-195 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-196 bde-heading bde-preset-9ae6ee6b-5dee-478b-95f3-feed6a2ead09\">\nTitle 03\n<\/h3><h3 class=\"bde-heading-148-197 bde-heading\">\n(h3)  Sub Heading\n<\/h3>\n<\/div><div class=\"bde-div-148-198 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-199 bde-heading\">\nFont-Size : 24px\n<\/h3><h3 class=\"bde-heading-148-200 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-148-201 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-148-202 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-203 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-204 bde-heading\">\nTitle 04\n<\/h4><h4 class=\"bde-heading-148-205 bde-heading\">\n(h4) Sub Heading -2\n<\/h4>\n<\/div><div class=\"bde-div-148-206 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-207 bde-heading\">\nFont-Size : 18px\n<\/h3><h3 class=\"bde-heading-148-208 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-148-209 bde-heading\">\nFont-Weight : 4700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-148-210 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-211 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-212 bde-heading\">\nTitle 05\n<\/h5><h4 class=\"bde-heading-148-213 bde-heading\">\n(h5) Sub Heading\n<\/h4>\n<\/div><div class=\"bde-div-148-214 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-215 bde-heading\">\nFont-Size : 16px\n<\/h3><h3 class=\"bde-heading-148-216 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-148-217 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div><div class=\"bde-div-148-366 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-367 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-368 bde-heading\">\nTitle 06\n<\/h5><h4 class=\"bde-heading-148-369 bde-heading\">\n(h6) Sub Heading\n<\/h4>\n<\/div><div class=\"bde-div-148-370 bde-div\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-148-371 bde-heading\">\nFont-Size : 14px\n<\/h3><h3 class=\"bde-heading-148-372 bde-heading\">\nLine Height : 1.2em\n<\/h3><h3 class=\"bde-heading-148-373 bde-heading\">\nFont-Weight : 700\n<\/h3>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-148-249 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-148-250 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nLogo Style\n<\/h2><div class=\"bde-div-148-251 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-252 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-148-253 bde-image2\" src=\"https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-1.png\" loading=\"lazy\" srcset=\"https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-1.png 400w, https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-1-300x102.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\"><h3 class=\"bde-heading-148-254 bde-heading bde-preset-b64e60ab-842d-4d11-a316-d04623155719\">\nBlack Logo\n<\/h3>\n<\/div><div class=\"bde-div-148-255 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<img decoding=\"async\" class=\"bde-image2-148-256 bde-image2\" src=\"https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-2-1.png\" loading=\"lazy\" srcset=\"https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-2-1.png 400w, https:\/\/bdwebkit.com\/breakdance-shoes-store-layouts-pack\/wp-content\/uploads\/sites\/75\/2025\/11\/Pixels-logo-2-1-300x102.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\"><h3 class=\"bde-heading-148-257 bde-heading\">\nWhite Logo\n<\/h3>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-148-258 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-148-259 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nColor Style\n<\/h2><div class=\"bde-grid-148-260 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-261 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-262 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-263 bde-heading\">\n#E89487\n<\/h4>\n<\/div><div class=\"bde-text-148-264 bde-text\">\n--bdp_primary\n<\/div>\n<\/div><div class=\"bde-div-148-265 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-266 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-267 bde-heading\">\n#495266\n<\/h4>\n<\/div><div class=\"bde-text-148-268 bde-text\">\n--bdp_secondary\n<\/div>\n<\/div><div class=\"bde-div-148-269 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-270 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-271 bde-heading\">\n#F7F7F7\n<\/h4>\n<\/div><div class=\"bde-text-148-272 bde-text\">\n--bdp_light\n<\/div>\n<\/div><div class=\"bde-div-148-273 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-274 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-275 bde-heading\">\n#222222\n<\/h4>\n<\/div><div class=\"bde-text-148-276 bde-text\">\nHeadings\n<\/div>\n<\/div><div class=\"bde-div-148-277 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-278 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-279 bde-heading\">\n#666666\n<\/h4>\n<\/div><div class=\"bde-text-148-280 bde-text\">\nText\n<\/div>\n<\/div><div class=\"bde-div-148-281 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-282 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-283 bde-heading\">\n#FFFFFF\n<\/h4>\n<\/div><div class=\"bde-text-148-284 bde-text\">\nBackground\n<\/div>\n<\/div><div class=\"bde-div-148-285 bde-div\" data-entrance=\"zoomIn\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-286 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-148-287 bde-heading\">\n#E5E5E5\n<\/h4>\n<\/div><div class=\"bde-text-148-288 bde-text\">\nBorder\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-148-325 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-148-326 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nContainer\n<\/h2><div class=\"bde-grid-148-327 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-328 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-329 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-330 bde-heading\">\nWidth : 1300px\n<\/h5><h5 class=\"bde-heading-148-331 bde-heading\">\nVertical Padding : 100px\n<\/h5><h5 class=\"bde-heading-148-332 bde-heading\">\nHorizontal Padding : 24px\n<\/h5><h5 class=\"bde-heading-148-333 bde-heading\">\nColumn Gap : 50px\n<\/h5>\n<\/div>\n<\/div>\n<\/div><h2 class=\"bde-heading-148-334 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nText\n<\/h2><div class=\"bde-grid-148-335 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-336 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-337 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-338 bde-heading\">\nBody Font-Style\n<\/h5>\n<\/div><div class=\"bde-div-148-339 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-340 bde-heading\">\nFont-Size : 16px\n<\/h5><h5 class=\"bde-heading-148-341 bde-heading\">\nLine Height : 1.3em\n<\/h5><h5 class=\"bde-heading-148-342 bde-heading\">\nFont-Weight : 400\n<\/h5>\n<\/div>\n<\/div><div class=\"bde-div-148-343 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-344 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-345 bde-heading\">\nText-Link\n<\/h5>\n<\/div><div class=\"bde-div-148-346 bde-div\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-347 bde-heading\">\nFont-Size : 14px\n<\/h5><h5 class=\"bde-heading-148-348 bde-heading\">\nLine Height : 1.2em\n<\/h5><h5 class=\"bde-heading-148-349 bde-heading\">\nFont-Weight : 400\n<\/h5>\n<\/div>\n<\/div>\n<\/div><h2 class=\"bde-heading-148-350 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nFont-Family\n<\/h2><div class=\"bde-grid-148-351 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-148-352 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-353 bde-heading\">\nHeading - font Family :Abhaya Libre\n<\/h5><h5 class=\"bde-heading-148-354 bde-heading\">\nFont-weight :700\n<\/h5><h5 class=\"bde-heading-148-355 bde-heading\">\nline height : 1.2em\n<\/h5>\n<\/div><div class=\"bde-div-148-356 bde-div\" data-entrance=\"slideUp\">\n  \n  \n\t\n\n\n\n<h5 class=\"bde-heading-148-357 bde-heading\">\nBody - font Family : Jost\n<\/h5><h5 class=\"bde-heading-148-358 bde-heading\">\nFont-weight :400\n<\/h5><h5 class=\"bde-heading-148-359 bde-heading\">\nline height : 1.3em\n<\/h5><h5 class=\"bde-heading-148-360 bde-heading\">\nBase Size : 16px\n<\/h5>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-148-361 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-148-362 bde-heading bde-preset-d8080cc7-f666-4859-b9f8-bfd216841b83\">\nbutton Variable\n<\/h2><div class=\"bde-div-148-363 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-148-364 bde-button\" data-entrance=\"slideLeft\">\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-148-365 bde-button\" data-entrance=\"slideRight\">\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><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Style Guide Home Style Guide Heading Title 01 (h1) Heading Font-Size : 96px Line Height : 1 Font-Weight : 700 Title 02 (h2) Heading Title Font-Size : 36px Line Height : 1.2em Font-Weight : 700 Title 03 (h3) Sub Heading Font-Size : 24px Line Height : 1.2em Font-Weight : 700 Title 04 (h4) Sub 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-148","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/pages\/148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/comments?post=148"}],"version-history":[{"count":0,"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/pages\/148\/revisions"}],"wp:attachment":[{"href":"https:\/\/bdwebkit.com\/breakdance-ceramic-store-layouts-pack\/wp-json\/wp\/v2\/media?parent=148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}