{"id":11,"date":"2020-03-27T09:22:41","date_gmt":"2020-03-27T09:22:41","guid":{"rendered":"https:\/\/liviucerchez.com\/balena\/?page_id=11"},"modified":"2021-08-24T07:06:08","modified_gmt":"2021-08-24T07:06:08","slug":"styleguide","status":"publish","type":"page","link":"https:\/\/liviucerchez.com\/balena\/styleguide\/","title":{"rendered":"Styleguide"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">01. Grid<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box min-demo-box wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">02. Colors<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Background<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color body-background-color wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Text<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color body-text-color wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Accent<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color accent-color wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Complementary, links<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color complementary-color wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Alt background<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color body-alt-background-color wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"no-margin-bottom wp-block-heading\">Border<\/h6>\n\n\n\n<p class=\"demo-box demo-box-color border-color wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">03. Typography<\/h3>\n\n\n\n<h6 class=\"wp-block-heading\">Open Sans<\/h6>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box-typography text-body-font text-weight-regular wp-block-paragraph\">AaZz<\/p>\n\n\n\n<p class=\"low-opacity wp-block-paragraph\">Regular<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box-typography text-body-font text-weight-semibold wp-block-paragraph\">AaZz<\/p>\n\n\n\n<p class=\"low-opacity wp-block-paragraph\">SemiBold<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box-typography text-body-font text-weight-bold wp-block-paragraph\">AaZz<\/p>\n\n\n\n<p class=\"low-opacity wp-block-paragraph\">Bold<\/p>\n<\/div>\n<\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Playfair Display<\/h6>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box-typography text-headings-font text-weight-regular wp-block-paragraph\">AaZz<\/p>\n\n\n\n<p class=\"low-opacity wp-block-paragraph\">Regular<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"demo-box-typography text-headings-font text-weight-bold wp-block-paragraph\">AaZz<\/p>\n\n\n\n<p class=\"low-opacity wp-block-paragraph\">Bold<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Display<\/strong><br><em>Size: 76px \u2014 L-Height: 1.15 (88px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"display wp-block-heading\">Display 0<\/h1>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H1<\/strong><\/strong><br><em>Size: 61px \u2014 L-Height: 1.15 (70px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Heading 1<\/h1>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H2<\/strong><\/strong><br><em>Size: 49px \u2014 L-Height: 1.15 (51px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Heading 2<\/h2>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H3<\/strong><\/strong><br><em>Size: 39px \u2014 L-Height: 1.15 (45px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Heading 3<\/h3>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H4<\/strong><\/strong><br><em>Size: 31px \u2014 L-Height: 1.15 (40px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Heading 4<\/h4>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H5<\/strong><\/strong><br><em>Size: 25px \u2014 L-Height: 1.15 (29px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Heading 5<\/h5>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Heading H6<\/strong><\/strong><br><em>Size: 20px \u2014 L-Height: 1.15 (23px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h6 class=\"wp-block-heading\">Heading 6<\/h6>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong><strong>Body \/ Paragraph<\/strong><\/strong><br><em>Size: 16px \u2014 L-Height: 1.6 (26px)<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are still sitting there eating their breakfasts.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-table alignwide\"><table><thead><tr><th>Name<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>Joe Macaroni<\/td><td>Works in the mafia<\/td><\/tr><tr><td>Paj Rakovski<\/td><td>Dentist as a hobby<\/td><\/tr><tr><td>Andrei Sustafusta<\/td><td>Eating breakfasts<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Blockquote pariatur commodi enim, nobis voluptate dolorum odit laudantium fugiat cumque voluptate eligendi consequatur!<\/p><cite>Balena Johnson<\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-coblocks-click-to-tweet\"><p class=\"wp-block-coblocks-click-to-tweet__text\">Here is the Click to Tweet block.<\/p><a class=\"wp-block-coblocks-click-to-tweet__twitter-btn\" href=\"http:\/\/twitter.com\/share?&amp;text=Here%20is%20the%20Click%20to%20Tweet%20block.&amp;url=https:\/\/liviucerchez.com\/balena\/styleguide\/&amp;via=liviucerchez\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>01. Grid 02. Colors Background Text Accent Complementary, links Alt background Border 03. Typography Open Sans AaZz Regular AaZz SemiBold AaZz Bold Playfair Display AaZz Regular AaZz Bold DisplaySize: 76px \u2014 L-Height: 1.15 (88px) Display 0 Heading H1Size: 61px \u2014 L-Height: 1.15 (70px) Heading 1 Heading H2Size: 49px \u2014 L-Height: 1.15 (51px) Heading 2 Heading [&hellip;]<\/p>\n<a href=\"https:\/\/liviucerchez.com\/balena\/styleguide\/\" class=\"read-more\">Continue reading <em class=\"mdi mdi-trending-neutral\"><\/em><\/a>","protected":false},"author":2,"featured_media":96,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":0,"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/media\/96"}],"wp:attachment":[{"href":"https:\/\/liviucerchez.com\/balena\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}