{"id":20,"date":"2023-07-28T10:35:08","date_gmt":"2023-07-28T10:35:08","guid":{"rendered":"https:\/\/demo.osompress.com\/osombusiness\/?page_id=20"},"modified":"2023-07-28T10:35:08","modified_gmt":"2023-07-28T10:35:08","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/demo.osompress.com\/osombusiness\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The style guide pattern features the default blocks and sample color treatments for creating a style guide page on your website. This pattern is an easy way to add the default heading, text, button, quote, and sample image cover content to a site you are styling. Deliver the style guide with a client&#8217;s website for easy reference and design adherence.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Typography<\/h2>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Heading 1<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Heading 2<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Heading 3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Heading 4<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Heading 5<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">Heading 6<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Paragraph<\/strong> <em>typography<\/em>. <span style=\"text-decoration: underline\">Did you hear that?<\/span> They&#8217;ve shut down the main reactor. We&#8217;ll be destroyed for sure. This is madness! We&#8217;re doomed! There&#8217;ll be no escape for the <a href=\"#\">Princess this time.<\/a> What&#8217;s that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They&#8217;re heading in this direction. What are we going to do? We&#8217;ll be sent to the spice mine of Kessel or smashed into who knows what!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"is-style-intro wp-block-paragraph\"><strong>Intro paragraph: <\/strong>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:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Colors<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7506ec7b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover\" style=\"min-height:180px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-foreground-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-small-font-size wp-block-paragraph\">#323b3c<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover is-light\" style=\"min-height:180px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-secondary-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-black-color has-text-color has-small-font-size wp-block-paragraph\">#ecf0ef<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover\" style=\"min-height:180px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-primary-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-secondary-color has-text-color has-small-font-size wp-block-paragraph\">#314a5a<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-cover is-light\" style=\"min-height:180px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-black-color has-text-color has-small-font-size wp-block-paragraph\">#FFFFFF<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Buttons<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">Button Solid<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\">Button Outline<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link wp-element-button\">Button 25%<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-50\"><a class=\"wp-block-button__link wp-element-button\">Button 50%<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75\"><a class=\"wp-block-button__link wp-element-button\">Button 75%<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-100\"><a class=\"wp-block-button__link wp-element-button\">Button 100%<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Quotes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Default Quote<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"is-style-default wp-block-paragraph\">Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive&#8230;most impressive. Obi-Wan has taught you well. You have controlled your fear.<\/p>\n<cite>Darth Vader<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Plain Quote<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-plain is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Your destiny lies with me, Skywalker. Obi-Wan knew this to be true. No! All to easy. Perhaps you are not as strong as the Emperor thought. Impressive&#8230;most impressive. Obi-Wan has taught you well. You have controlled your fear.<\/p>\n<cite>Darth Vader<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">LISTS<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7506ec7b 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>Default<\/strong><\/p>\n\n\n\n<ul class=\"is-style-default wp-block-list\">\n<li>one<\/li>\n\n\n\n<li>two<\/li>\n\n\n\n<li>three<\/li>\n<\/ul>\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\"><strong>Checked<\/strong><\/p>\n\n\n\n<ul class=\"is-style-osom-checked wp-block-list\">\n<li>one<\/li>\n\n\n\n<li>two<\/li>\n\n\n\n<li>three<\/li>\n<\/ul>\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\"><strong>Starred<\/strong><\/p>\n\n\n\n<ul class=\"is-style-osom-star wp-block-list\">\n<li>one<\/li>\n\n\n\n<li>two<\/li>\n\n\n\n<li>three<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Pullquotes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quotes that can be placed between text blocks or positioned alongside them on the left or right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pullquote with no alignment.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p><strong>Obi-Wan knew this to be true. <\/strong><\/p><cite>Darth Vader<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pullquote with wide alignment.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-pullquote alignwide\"><blockquote><p><strong>No! All to easy. Perhaps you are not as strong as the Emperor thought.<\/strong><\/p><cite>Darth Vader<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pullquote with left and right alignment.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Did you hear that? They&#8217;ve shut down the main reactor. We&#8217;ll be destroyed for sure. This is madness! We&#8217;re doomed! There&#8217;ll be no escape for the Princess this time. What&#8217;s that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They&#8217;re heading in this direction.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote alignleft has-text-align-left\"><blockquote><p>Your destiny lies with me, Skywalker.<\/p><cite>Darth Vader, left-aligned pullquote<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I must face him alone. Chewie! Get behind me! Get behind me! Can&#8217;t get out that way. Looks like you managed to cut off our only escape route. Maybe you&#8217;d like it back in your cell, Your Highness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Are you kidding? At the rate they&#8217;re gaining. Traveling through hyperspace isn&#8217;t like dusting crops, boy! Without precise calculations we could fly right through a star or bounce too close to a supernova and that&#8217;d end your trip real quick, wouldn&#8217;t it? What&#8217;s that flashing? We&#8217;re losing our deflector shield. Go strap yourself in, I&#8217;m going to make the jump to light speed. We&#8217;ve entered the Alderaan system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Red Leader, we&#8217;re right above you. Turn to point. oh-five, we&#8217;ll cover for you. Stay there. I just lost my starboard engine. Get set to make your attack run. Biggs, Wedge, let&#8217;s close it up.<\/p>\n\n\n\n<figure class=\"wp-block-pullquote alignright has-text-align-left\"><blockquote><p>Your destiny lies with me, Skywalker.<\/p><cite>Darth Vader, right-aligned pullquote<\/cite><\/blockquote><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You wouldn&#8217;t want my life to get boring, would you? Luke, the Force will be with you. All wings report in. Red Ten standing by. Red Seven standing by. Red Three standing by. Red Six standing by. Red Nine standing by.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep half your group out of range for the next run. Copy, Base One. Luke, take Red Two and Three. Hold up here and wait for my signal&#8230;to start your run.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">She&#8217;s the one in the message.. We&#8217;ve got to help her. Now, look, don&#8217;t get any funny ideas. The old man wants us to wait right here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Where are you going? Well, I&#8217;m not going that way. It&#8217;s much too rocky. This way is much easier. What makes you think there are settlements over there? Don&#8217;t get technical with me. What mission? What are you talking about? I&#8217;ve had just about enough of you! Go that way! You&#8217;ll be malfunctioning within a day, you nearsighted scrap pile! And don&#8217;t let me catch you following me begging for help, because you won&#8217;t get it. No more adventures.<\/p>\n\n\n\n<hr class=\"wp-block-separator alignwide has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Sample Text and Color Treatment<\/h2>\n\n\n\n<div class=\"wp-block-cover alignfull has-custom-content-position is-position-bottom-left\" style=\"padding-top:80px;padding-right:80px;padding-bottom:20px;padding-left:80px;min-height:596px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-primary-background-color has-background-dim-70 has-background-dim\"><\/span><img decoding=\"async\" width=\"1800\" height=\"1199\" class=\"wp-block-cover__image-background wp-image-17\" alt=\"\" src=\"https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero.jpg\" data-object-fit=\"cover\" srcset=\"https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero.jpg 1800w, https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero-300x200.jpg 300w, https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero-1024x682.jpg 1024w, https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero-768x512.jpg 768w, https:\/\/demo.osompress.com\/osombusiness\/wp-content\/uploads\/sites\/8\/2023\/07\/action-african-american-african-descent-agreement-american-black-1452903-pxhere.com-hero-1536x1023.jpg 1536w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-447bf2ba wp-block-group-is-layout-constrained\">\n<h5 class=\"wp-block-heading has-white-color has-text-color has-large-font-size\">Category or Subheading<\/h5>\n\n\n\n<h2 class=\"wp-block-heading\">A compelling headline that draws readers into your content.<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-primary-color has-secondary-background-color has-text-color has-background wp-element-button\">Call to Action<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The style guide pattern features the default blocks and sample color treatments for creating a style guide page on your website. This pattern is an easy way to add the default heading, text, button, quote, and sample image cover content to a site you are styling. Deliver the style guide with a client&#8217;s website for [&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-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/pages\/20\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/demo.osompress.com\/osombusiness\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}