{"id":33,"date":"2023-01-13T16:31:30","date_gmt":"2023-01-13T21:31:30","guid":{"rendered":"https:\/\/mikeoliver.design\/?page_id=33"},"modified":"2024-11-30T22:00:01","modified_gmt":"2024-11-30T21:00:01","slug":"styles","status":"publish","type":"page","link":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/styles\/","title":{"rendered":"Typography, Colors &amp; Buttons"},"content":{"rendered":"<div class=\"gb-container gb-container-fa740308 gbp-section\">\n<div class=\"gb-container gb-container-864c4103 gb-container-b03b9235 gbp-section__inner\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-b24f3427\">\n<div class=\"gb-grid-column gb-grid-column-7376cc69\"><div class=\"gb-container gb-container-7376cc69\">\n<div class=\"gb-container gb-container-cbaa7e4b\">\n\n<div class=\"gb-headline gb-headline-276e09d4 gb-headline-text gbp-section__tagline\">Headings \u2013 Roboto Condensed<\/div>\n\n\n\n<h1 class=\"gb-headline gb-headline-4598f42f gb-headline-text\">H1 &#8211; Lorem ipsum amet morbi dolor tortor eget mollis nostra.<\/h1>\n\n\n\n<h2 class=\"gb-headline gb-headline-b7fefd4d gb-headline-text\">H2 &#8211; Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper.<\/h2>\n\n\n\n<h3 class=\"gb-headline gb-headline-21880a17 gb-headline-text\">H3 &#8211; Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis.<\/h3>\n\n\n\n<h4 class=\"gb-headline gb-headline-0c6e548b gb-headline-text\">H4 &#8211; Lorem ipsum amet morbi dolor tortor eget mollis nostra ullam corper auctor metus felis nibh velit tellus.<\/h4>\n\n<\/div>\n\n<div class=\"gb-container gb-container-d3873732\">\n\n<div class=\"gb-headline gb-headline-e3916f49 gb-headline-text gbp-section__tagline\">Body Text \u2013 Albert Sans<\/div>\n\n\n\n<p class=\"gb-headline gb-headline-a8960752 gb-headline-text\">Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra ullam velit corper. Pharetra torquent auctor metus <a href=\"#\">text link<\/a> velit. Natoque tellus semper taciti nostra primis lectus donec tortor fusce morbi risus curae.<\/p>\n\n\n\n<p class=\"gb-headline gb-headline-220ae908 gb-headline-text\">Suscipit taciti primis tempor euismod aptent felis blandit cursus gravida lectus nullam dapibus netus. Curae iaculis aptent leo ligula euismod mauris gravida etiam praesent magnis congue gravida magna netus inceptos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lorem ipsum amet elit morbi dolor tortor<\/li>\n\n\n\n<li>Pharetra torquent auctor ultrices metus felis<\/li>\n\n\n\n<li>Vivamus habitant <a href=\"#\">text link<\/a> sagittis nascetur<\/li>\n\n\n\n<li>Natoque tellus inceptos semper taciti volutpat<\/li>\n\n\n\n<li>Semper pharetra montes nisi congue integer<\/li>\n<\/ul>\n\n<\/div>\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-bfec0354\"><div class=\"gb-container gb-container-bfec0354\">\n<div class=\"gb-container gb-container-a27bce37\">\n\n<div class=\"gb-headline gb-headline-2e1e2e06 gb-headline-text gbp-section__tagline\">Color Palette<\/div>\n\n\n<div class=\"gb-container gb-container-53c704f8\">\n<div class=\"gb-grid-wrapper gb-grid-wrapper-6c418e36\">\n<div class=\"gb-grid-column gb-grid-column-dc8f5ac6\"><div class=\"gb-container gb-container-dc8f5ac6\">\n\n<p class=\"gb-headline gb-headline-ba81816c\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">contrast<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-b2233e9a\"><div class=\"gb-container gb-container-b2233e9a\">\n\n<p class=\"gb-headline gb-headline-c38dae4f\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">contrast-2<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a98bec1d\"><div class=\"gb-container gb-container-a98bec1d\">\n\n<p class=\"gb-headline gb-headline-edc9d9bc\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">contrast-3<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-f6e94eb9\"><div class=\"gb-container gb-container-f6e94eb9\">\n\n<p class=\"gb-headline gb-headline-9714b178\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">base<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-e070c94c\"><div class=\"gb-container gb-container-e070c94c\">\n\n<p class=\"gb-headline gb-headline-fe811c0e\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">base-2<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-088beaf8\"><div class=\"gb-container gb-container-088beaf8\">\n\n<p class=\"gb-headline gb-headline-7487abc9\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">base-3 (white)<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-a7e7199f\"><div class=\"gb-container gb-container-a7e7199f\">\n\n<p class=\"gb-headline gb-headline-d22944b6\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">accent<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-7f7e51ff\"><div class=\"gb-container gb-container-7f7e51ff\">\n\n<p class=\"gb-headline gb-headline-a0677158\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">accent-2<\/span><\/span><\/p>\n\n<\/div><\/div>\n\n<div class=\"gb-grid-column gb-grid-column-2827c2b9\"><div class=\"gb-container gb-container-2827c2b9\">\n\n<p class=\"gb-headline gb-headline-ed0c4aec\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 490 490\"><path d=\"M482 490H8c-2.21 0-4.21-.9-5.66-2.34S0 484.21 0 482V8c0-2.21.9-4.21 2.34-5.66S5.79 0 8 0h474c2.21 0 4.21.9 5.66 2.34S490 5.79 490 8v474c0 2.21-.9 4.21-2.34 5.66S484.21 490 482 490Z\"><\/path><\/svg><\/span><span class=\"gb-headline-text\"><span class=\"gb-icon\"><\/span><span class=\"gb-headline-text\">accent-3<\/span><\/span><\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-2308e49a\">\n\n<div class=\"gb-headline gb-headline-ce9218de gb-headline-text gbp-section__tagline\">Buttons<\/div>\n\n\n<div class=\"gb-container gb-container-bb0e7e81\">\n\n<span class=\"gb-button gb-button-9fd9e30a gb-button-text gbp-button--primary\">Primary Button<\/span>\n\n\n\n<span class=\"gb-button gb-button-de9bc565 gb-button-text gbp-button--secondary\">Secondary Button<\/span>\n\n\n\n<span class=\"gb-button gb-button-2b584a0f gb-button-text gbp-button--tertiary\">Tertiary Button<\/span>\n\n\n\n<a class=\"gb-button gb-button-63e723b6 gbp-button--text-icon\" href=\"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/agency\/services\/\"><span class=\"gb-icon\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" fill=\"#000000\" viewBox=\"0 0 256 256\"><path d=\"M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z\"><\/path><\/svg><\/span><span class=\"gb-button-text\">Text &amp; Icon Button<\/span><\/a>\n\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"seiten_kategorie":[],"class_list":["post-33","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":43888,"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/pages\/33\/revisions\/43888"}],"wp:attachment":[{"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"seiten_kategorie","embeddable":true,"href":"https:\/\/demo-gbpro.insight-inside.de\/fiction-v2\/wp-json\/wp\/v2\/seiten_kategorie?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}