{"id":9,"date":"2023-04-10T21:44:48","date_gmt":"2023-04-10T21:44:48","guid":{"rendered":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/?page_id=9"},"modified":"2023-06-15T01:15:35","modified_gmt":"2023-06-15T01:15:35","slug":"styles","status":"publish","type":"page","link":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/","title":{"rendered":"Styles"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull feature-blocks-base has-global-padding is-layout-constrained wp-container-core-group-is-layout-832e8b4a wp-block-group-is-layout-constrained\" style=\"padding-top:0;padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--large);padding-left:0\">\n<p class=\"has-text-align-center\">See the various styles the Crosswinds Framework comes with for all of the different elements and blocks you can use on your website.<\/p>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid alignwide basic-grid-has-3-desktop-columns basic-grid-has-2-tablet-columns basic-grid-has-1-mobile-columns is-layout-flow wp-block-crosswinds-blocks-basic-grid-is-layout-flow\" style=\"grid-column-gap:30px;grid-row-gap:30px\">\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 640 512\"><path d=\"M608 96V416H32V96H608zM32 64H0V96 416v32H32 608h32V416 96 64H608 32z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Buttons<\/p>\n\n\n\n<p>Whether it\u2019s to read more, click a call to action or something else, the button styles can help you point someone in the right direction.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/buttons\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 640 512\"><path d=\"M381.5 4l-4.7 15.3-144 464L228 498.5l30.6 9.5 4.7-15.3 144-464L412 13.5 381.5 4zM160.7 105.4l-11.7 11L13 244.4 .7 256 13 267.7l136 128 11.7 11 21.9-23.3-11.7-11L47.3 256 171 139.6l11.7-11-21.9-23.3zm296.7 23.9l12 10.6c27.8 24.7 47.5 44 67.4 63.5l0 0c16.8 16.4 33.7 32.9 55.5 52.8L469 372.3l-11.7 11 21.9 23.3 11.7-11 136-128 12.7-12L626.6 244c-27.8-24.7-47.5-44-67.4-63.5l0 0C539.2 161 519 141.3 490.6 116l-12-10.6-21.3 23.9z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Code<\/p>\n\n\n\n<p>Display code or any other preformatted text in the way you want it to look, with out other formatting getting in the way.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/code\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:34px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><path d=\"M0 32H16 80h64 16V64H144 96V224H352V64H304 288V32h16 64 64 16V64H432 384V240 448h48 16v32H432 304 288V448h16 48V256H96V448h48 16v32H144 16 0V448H16 64V240 64H16 0V32z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Headings<\/p>\n\n\n\n<p>Headings allow you to create structure for your posts and pages.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/headings\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:39px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 512 512\"><path d=\"M32 64V329.4l84.7-84.7L128 233.4l11.3 11.3L224 329.4 372.7 180.7 384 169.4l11.3 11.3L480 265.4V64H32zm0 310.6V448h73.4l96-96L128 278.6l-96 96zm352-160L150.6 448H480V310.6l-96-96zM0 32H32 480h32V64 448v32H480 32 0V448 64 32zM160 144a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm-64 0a48 48 0 1 1 96 0 48 48 0 1 1 -96 0z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Images<\/p>\n\n\n\n<p>Add in various styles to your photos to give them a little extra flair on your posts and pages.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/images\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:44px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 576 512\"><path d=\"M0 88C0 39.4 39.4 0 88 0h8 16V32H96 88C57.1 32 32 57.1 32 88v8H96h32v32 64 32H96 32 0V192 168 128 96 88zm32 40v40 24H96V128H32zM160 88c0-48.6 39.4-88 88-88h8 16V32H256h-8c-30.9 0-56 25.1-56 56v8h64 32v32 64 32H256 192 160V192 168 128 96 88zm32 80v24h64V128H192v40zM576 424c0 48.6-39.4 88-88 88h-8H464V480h16 8c30.9 0 56-25.1 56-56v-8H480 448V384 320 288h32 64 32v32 24 40 32 8zm-32-40V344 320H480v64h64zM416 424c0 48.6-39.4 88-88 88h-8H304V480h16 8c30.9 0 56-25.1 56-56v-8H320 288V384 320 288h32 64 32v32 24 40 32 8zm-32-80V320H320v64h64V344z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Pullquotes<\/p>\n\n\n\n<p>Pullquotes can help you highlight a particular phrase or sentence in your post for emphasis. Or you can add in a quote from somewhere else.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/pullquotes\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:34px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><path d=\"M0 208C0 146.1 50.1 96 112 96h32 16v32H144 112c-44.2 0-80 35.8-80 80v16H160h32v32V384v32H160 32 0V384 320 256 224 208zm32 48v64 64H160V256H32zm384 0H288v64 64H416V256zM256 320V256 224 208c0-61.9 50.1-112 112-112h32 16v32H400 368c-44.2 0-80 35.8-80 80v16H416h32v32V384v32H416 288 256V384 320z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Quotes<\/p>\n\n\n\n<p>Quotes can help you highlight a particular phrase or sentence in your post for emphasis. Or you can add in a quote from somewhere else.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/quotes\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 640 512\"><path d=\"M0 240H16 624h16v32H624 16 0V240z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Separators<\/p>\n\n\n\n<p>Separators can help you separate sections of your posts and page.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/separators\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:38px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Social Icons<\/p>\n\n\n\n<p>The Crosswinds Framework has styles for the Social Icons block, which can allow you to display links to your social media profiles.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/social-icons\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-crosswinds-blocks-basic-grid-item item-span-1-desktop-columns item-span-1-desktop-row item-span-1-tablet-columns item-span-1-tablet-row item-span-1-mobile-columns item-span-1-mobile-row normal-layout is-layout-flow wp-block-crosswinds-blocks-basic-grid-item-is-layout-flow\">\n<div class=\"wp-block-group feature-item feature-icon-neutral-center has-neutral-background-color has-background last-bottom-layout cb-fill-height-parent has-global-padding is-layout-constrained wp-container-core-group-is-layout-b4575d6e wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--x-small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)\">\n<div class=\"wp-block-outermost-icon-block items-justified-center\"><div class=\"icon-container\" style=\"width:39px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"1em\" viewBox=\"0 0 512 512\"><path d=\"M32 64l0 96 448 0V64L32 64zm0 128l0 112 208 0 0-112L32 192zm240 0l0 112H480l0-112-208 0zM240 336L32 336l0 112 208 0V336zm32 112H480V336H272V448zM0 32l32 0 448 0 32 0V64l0 384v32H480L32 480H0l0-32L0 64 0 32z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\" style=\"font-style:normal;font-weight:600\">Tables<\/p>\n\n\n\n<p>Tables can help you display information in an easy to read manner for your readers. The Crosswinds Framework comes with multiple styles for your tables.<\/p>\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\" href=\"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/styles\/tables\/\">View Style<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>See the various styles the Crosswinds Framework comes with for all of the different elements and blocks you can use on your website.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":0,"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.jacobmartella.com\/crosswinds-framework\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}