{"id":53,"date":"2024-12-03T10:17:38","date_gmt":"2024-12-03T10:17:38","guid":{"rendered":"https:\/\/demo.osompress.com\/dakota-next\/?page_id=53"},"modified":"2024-12-13T08:57:50","modified_gmt":"2024-12-13T08:57:50","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/demo.osompress.com\/dakota-next\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Below are examples of column classes that are available in the block editor.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-f15824f9 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\">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. <\/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\">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. <\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p class=\"has-drop-cap wp-block-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left is-style-osom-heading is-style-osom-heading--1\">Colors<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f15824f9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:24%\">\n<p class=\"has-text-align-center has-border-color has-foreground-border-color has-theme-text-color has-white-background-color has-text-color has-background has-normal-font-size wp-block-paragraph\" style=\"border-width:1px\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:26%\">\n<p class=\"has-text-align-center has-white-color has-foreground-background-color has-text-color has-background has-normal-font-size wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"has-text-align-center has-white-color has-primary-background-color has-text-color has-background has-normal-font-size wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:24.99%\">\n<p class=\"has-text-align-center has-foreground-color has-secondary-background-color has-text-color has-background has-normal-font-size wp-block-paragraph\"><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:24.99%\">\n<p class=\"has-text-align-center has-foreground-color has-tertiary-background-color has-text-color has-background has-normal-font-size wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left is-style-osom-heading is-style-osom-heading--2\">Typography<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"text-decoration: underline\">Default size (16px):<br><\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\"><span style=\"text-decoration: underline\">Small size (0.9):<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><span style=\"text-decoration: underline\">Large size (1.35):<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<p class=\"has-x-large-font-size wp-block-paragraph\"><span style=\"text-decoration: underline\">Larger size (1.85)<\/span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia tellus elit, efficitur aliquam augue cursus eget. Phasellus eu orci et enim posuere tincidunt sit amet non purus. Mauris iaculis tristique augue sed rhoncus. Phasellus et metus augue. Cras semper posuere ex, at ornare velit aliquam ut. Nullam dictum blandit vestibulum. Morbi quis urna vitae justo ornare rhoncus.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left title is-style-osom-heading is-style-osom-heading--3\">Typography<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-f15824f9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Heading H1 40px<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Heading H2 36px<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Heading H3 30px<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Heading H4 24px<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-small-font-size wp-block-paragraph\">Small paragraph 14px<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Medium paragraph 16px<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\">Large paragraph 24px<\/p>\n\n\n\n<p class=\"has-x-large-font-size wp-block-paragraph\">XL paragraph 30px<\/p>\n\n\n\n<p class=\"has-xx-large-font-size wp-block-paragraph\">XXL paragraph 35px<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-left is-style-osom-heading is-style-osom-heading--4\">Buttons<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-86e575ac wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button aligncenter is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">FILL<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline is-style-outline--5\"><a class=\"wp-block-button__link wp-element-button\" href=\"#\">Outline<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-osom-button\"><a class=\"wp-block-button__link has-foreground-color has-secondary-background-color has-text-color has-background has-link-color wp-element-button\">secondary color<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-osom-white-button is-style-osom-button-arrow is-style-osom-button-arrow--6\"><a class=\"wp-block-button__link wp-element-button\">BUTTON ARROW<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Below are examples of column classes that are available in the block editor. This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-53","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/pages\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":16,"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/pages\/53\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/pages\/53\/revisions\/292"}],"wp:attachment":[{"href":"https:\/\/demo.osompress.com\/dakota-next\/wp-json\/wp\/v2\/media?parent=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}