{"id":19,"date":"2023-10-23T15:54:19","date_gmt":"2023-10-23T14:54:19","guid":{"rendered":"https:\/\/sgbusiness.studiosgweb.co.uk\/test-styles\/"},"modified":"2023-10-26T12:01:02","modified_gmt":"2023-10-26T11:01:02","slug":"test-styles","status":"publish","type":"page","link":"https:\/\/whrw.uk\/cy\/test-styles\/","title":{"rendered":"Test Styles"},"content":{"rendered":"

 <\/p>\n

 <\/p>\n

Simple Colored block<\/h2>

Generally this is being used across the site for coloring various features of the site. It requires a color as it by default has no extra styling<\/em><\/p>

sg-block+sg-blue<\/div>
sg-block+sg-lightblue<\/div>
sg-block+sg-purple<\/div>
sg-block+sg-pink<\/div>
sg-block+sg-red<\/div>
sg-block+sg-orange<\/div>
sg-block+sg-yellow<\/div>
sg-block+sg-green<\/div>
sg-block+sg-teal<\/div>
sg-block+sg-cyan<\/div>
sg-block+sg-black<\/div>
sg-block+sg-white<\/div>
sg-block+sg-grey<\/div>
sg-block+sg-mediumgrey<\/div>
sg-block+sg-lightgrey<\/div>
sg-block+sg-primary<\/div>
sg-block+sg-secondary<\/div>
sg-block+sg-success<\/div>
sg-block+sg-info<\/div>
sg-block+sg-warning<\/div>
sg-block+sg-danger<\/div>
sg-block+sg-light<\/div>
sg-block+sg-dark<\/div>
sg-block+sg-medium<\/div>
sg-block+sg-background<\/div>

Classic Button<\/h2>

Using the general bootstrap fields we can create a button that links directly with our theme colors<\/em><\/p>

btn+sg-blue<\/div>
btn+sg-lightblue<\/div>
btn+sg-purple<\/div>
btn+sg-pink<\/div>
btn+sg-red<\/div>
btn+sg-orange<\/div>
btn+sg-yellow<\/div>
btn+sg-green<\/div>
btn+sg-teal<\/div>
btn+sg-cyan<\/div>
btn+sg-black<\/div>
btn+sg-white<\/div>
btn+sg-grey<\/div>
btn+sg-mediumgrey<\/div>
btn+sg-lightgrey<\/div>
btn+sg-primary<\/div>
btn+sg-secondary<\/div>
btn+sg-success<\/div>
btn+sg-info<\/div>
btn+sg-warning<\/div>
btn+sg-danger<\/div>
btn+sg-light<\/div>
btn+sg-dark<\/div>
btn+sg-medium<\/div>
btn+sg-background<\/div>

Classic Button With Arrow<\/h2>

Using the general bootstrap fields we can create a button that links directly with our theme colors<\/em><\/p>

btn-arrow+sg-blue<\/div>
btn-arrow+sg-lightblue<\/div>
btn-arrow+sg-purple<\/div>
btn-arrow+sg-pink<\/div>
btn-arrow+sg-red<\/div>
btn-arrow+sg-orange<\/div>
btn-arrow+sg-yellow<\/div>
btn-arrow+sg-green<\/div>
btn-arrow+sg-teal<\/div>
btn-arrow+sg-cyan<\/div>
btn-arrow+sg-black<\/div>
btn-arrow+sg-white<\/div>
btn-arrow+sg-grey<\/div>
btn-arrow+sg-mediumgrey<\/div>
btn-arrow+sg-lightgrey<\/div>
btn-arrow+sg-primary<\/div>
btn-arrow+sg-secondary<\/div>
btn-arrow+sg-success<\/div>
btn-arrow+sg-info<\/div>
btn-arrow+sg-warning<\/div>
btn-arrow+sg-danger<\/div>
btn-arrow+sg-light<\/div>
btn-arrow+sg-dark<\/div>
btn-arrow+sg-medium<\/div>
btn-arrow+sg-background<\/div>

Outline Button With Arrow<\/h2>

Using the general bootstrap fields we can create a button that links directly with our theme colors<\/em><\/p>

btn-arrow-outline+sg-blue<\/div>
btn-arrow-outline+sg-lightblue<\/div>
btn-arrow-outline+sg-purple<\/div>
btn-arrow-outline+sg-pink<\/div>
btn-arrow-outline+sg-red<\/div>
btn-arrow-outline+sg-orange<\/div>
btn-arrow-outline+sg-yellow<\/div>
btn-arrow-outline+sg-green<\/div>
btn-arrow-outline+sg-teal<\/div>
btn-arrow-outline+sg-cyan<\/div>
btn-arrow-outline+sg-black<\/div>
btn-arrow-outline+sg-white<\/div>
btn-arrow-outline+sg-grey<\/div>
btn-arrow-outline+sg-mediumgrey<\/div>
btn-arrow-outline+sg-lightgrey<\/div>
btn-arrow-outline+sg-primary<\/div>
btn-arrow-outline+sg-secondary<\/div>
btn-arrow-outline+sg-success<\/div>
btn-arrow-outline+sg-info<\/div>
btn-arrow-outline+sg-warning<\/div>
btn-arrow-outline+sg-danger<\/div>
btn-arrow-outline+sg-light<\/div>
btn-arrow-outline+sg-dark<\/div>
btn-arrow-outline+sg-medium<\/div>
btn-arrow-outline+sg-background<\/div>

Outline Button<\/h2>

An alternative button with no background, on hover we have a shadow<\/em><\/p>

btn-outline+sg-blue<\/div>
btn-outline+sg-lightblue<\/div>
btn-outline+sg-purple<\/div>
btn-outline+sg-pink<\/div>
btn-outline+sg-red<\/div>
btn-outline+sg-orange<\/div>
btn-outline+sg-yellow<\/div>
btn-outline+sg-green<\/div>
btn-outline+sg-teal<\/div>
btn-outline+sg-cyan<\/div>
btn-outline+sg-black<\/div>
btn-outline+sg-white<\/div>
btn-outline+sg-grey<\/div>
btn-outline+sg-mediumgrey<\/div>
btn-outline+sg-lightgrey<\/div>
btn-outline+sg-primary<\/div>
btn-outline+sg-secondary<\/div>
btn-outline+sg-success<\/div>
btn-outline+sg-info<\/div>
btn-outline+sg-warning<\/div>
btn-outline+sg-danger<\/div>
btn-outline+sg-light<\/div>
btn-outline+sg-dark<\/div>
btn-outline+sg-medium<\/div>
btn-outline+sg-background<\/div>

SG Block Title<\/h2>

Use this to split up your text with a striking block of text as an alternative to general headings<\/em><\/p>

sg-block-title+sg-primary<\/div>
sg-block-title+sg-secondary<\/div>
sg-block-title+sg-success<\/div>
sg-block-title+sg-info<\/div>
sg-block-title+sg-warning<\/div>
sg-block-title+sg-danger<\/div>
sg-block-title+sg-light<\/div>
sg-block-title+sg-dark<\/div>
sg-block-title+sg-medium<\/div>
sg-block-title+sg-background<\/div>

Intro Paragraph<\/h2>

This is to create a intro paragraph feature text block that is NOT a heading<\/em><\/p>

sg-intro+sg-blue<\/div>
sg-intro+sg-lightblue<\/div>
sg-intro+sg-purple<\/div>
sg-intro+sg-pink<\/div>
sg-intro+sg-red<\/div>
sg-intro+sg-orange<\/div>
sg-intro+sg-yellow<\/div>
sg-intro+sg-green<\/div>
sg-intro+sg-teal<\/div>
sg-intro+sg-cyan<\/div>
sg-intro+sg-black<\/div>
sg-intro+sg-white<\/div>
sg-intro+sg-grey<\/div>
sg-intro+sg-mediumgrey<\/div>
sg-intro+sg-lightgrey<\/div>
sg-intro+sg-primary<\/div>
sg-intro+sg-secondary<\/div>
sg-intro+sg-success<\/div>
sg-intro+sg-info<\/div>
sg-intro+sg-warning<\/div>
sg-intro+sg-danger<\/div>
sg-intro+sg-light<\/div>
sg-intro+sg-dark<\/div>
sg-intro+sg-medium<\/div>
sg-intro+sg-background<\/div>

Headline \/ Slogan<\/h2>

This is to create a large headline \/ slogan <\/em><\/p>

sg-headline+sg-blue<\/div>
sg-headline+sg-lightblue<\/div>
sg-headline+sg-purple<\/div>
sg-headline+sg-pink<\/div>
sg-headline+sg-red<\/div>
sg-headline+sg-orange<\/div>
sg-headline+sg-yellow<\/div>
sg-headline+sg-green<\/div>
sg-headline+sg-teal<\/div>
sg-headline+sg-cyan<\/div>
sg-headline+sg-black<\/div>
sg-headline+sg-white<\/div>
sg-headline+sg-grey<\/div>
sg-headline+sg-mediumgrey<\/div>
sg-headline+sg-lightgrey<\/div>
sg-headline+sg-primary<\/div>
sg-headline+sg-secondary<\/div>
sg-headline+sg-success<\/div>
sg-headline+sg-info<\/div>
sg-headline+sg-warning<\/div>
sg-headline+sg-danger<\/div>
sg-headline+sg-light<\/div>
sg-headline+sg-dark<\/div>
sg-headline+sg-medium<\/div>
sg-headline+sg-background<\/div>

SG Block Quote<\/h2>

A really simple way to quote within your page using our blockquote feature. This uses your primary web color to surround your text<\/em><\/p>

sg-block-quote Default<\/div>

SG One Color Overlay<\/h2>

Overlays with a single color<\/em><\/p>

sg-overlay-single+sg-primary<\/div>
sg-overlay-single+sg-secondary<\/div>
sg-overlay-single+sg-success<\/div>
sg-overlay-single+sg-info<\/div>
sg-overlay-single+sg-warning<\/div>
sg-overlay-single+sg-danger<\/div>
sg-overlay-single+sg-light<\/div>
sg-overlay-single+sg-dark<\/div>
sg-overlay-single+sg-medium<\/div>
sg-overlay-single+sg-background<\/div>

SG Filter Gradient<\/h2>

Our basic filter gradient class (gradient must overwrite background color in choices). Used purely for color choices within acf fields<\/em><\/p>

sg-filter-gradient Default<\/div>

SG Alerts<\/h2>

replace bootstrap alert alert-primary feature to alert sg-alert sg-primary<\/em><\/p>

sg-alert+sg-primary<\/div>
sg-alert+sg-secondary<\/div>
sg-alert+sg-success<\/div>
sg-alert+sg-info<\/div>
sg-alert+sg-warning<\/div>
sg-alert+sg-danger<\/div>
sg-alert+sg-light<\/div>
sg-alert+sg-dark<\/div>
sg-alert+sg-medium<\/div>
sg-alert+sg-background<\/div>

SG Content Feature Full<\/h2>

A nice simple way to break up your text with a full width chunk of featured content. There is also an option sg-content-feature which will use half the page and float right. This feature uses the same colors as below but is not displayed here.<\/em><\/p>

sg-content-feature-full+sg-primary<\/div>
sg-content-feature-full+sg-secondary<\/div>
sg-content-feature-full+sg-success<\/div>
sg-content-feature-full+sg-info<\/div>
sg-content-feature-full+sg-warning<\/div>
sg-content-feature-full+sg-danger<\/div>
sg-content-feature-full+sg-light<\/div>
sg-content-feature-full+sg-dark<\/div>
sg-content-feature-full+sg-medium<\/div>
sg-content-feature-full+sg-background<\/div>

SG Gradient Box<\/h2>

A nice simple way to break up your text with a full width chunk of featured content with a nice gradient border. There is also an option sg-content-feature which will use half the page and float right. This feature uses the same colors as below but is not displayed here.<\/em><\/p>

sg-gradient-box+sg-primary<\/div>
sg-gradient-box+sg-secondary<\/div>
sg-gradient-box+sg-success<\/div>
sg-gradient-box+sg-info<\/div>
sg-gradient-box+sg-warning<\/div>
sg-gradient-box+sg-danger<\/div>
sg-gradient-box+sg-light<\/div>
sg-gradient-box+sg-dark<\/div>
sg-gradient-box+sg-medium<\/div>
sg-gradient-box+sg-background<\/div>

h1 Default<\/h1>

h2 Default<\/h2>

h3 Default<\/h3>

h4 Default<\/h4>

h5 Default<\/h5>
h6 Default<\/h6>a Default<\/a>","protected":false},"excerpt":{"rendered":"

   <\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"category-terms":[],"subject":[],"class_list":["post-19","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nTest Styles - Women's Health Research Wales<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/whrw.uk\/cy\/test-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test Styles - Women's Health Research Wales\" \/>\n<meta property=\"og:description\" content=\"   \" \/>\n<meta property=\"og:url\" content=\"https:\/\/whrw.uk\/cy\/test-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Women's Health Research Wales\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-26T11:01:02+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 munud\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/whrw.uk\/test-styles\/\",\"url\":\"https:\/\/whrw.uk\/test-styles\/\",\"name\":\"Test Styles - Women's Health Research Wales\",\"isPartOf\":{\"@id\":\"https:\/\/whrw.uk\/#website\"},\"datePublished\":\"2023-10-23T14:54:19+00:00\",\"dateModified\":\"2023-10-26T11:01:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/whrw.uk\/test-styles\/#breadcrumb\"},\"inLanguage\":\"cy\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/whrw.uk\/test-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/whrw.uk\/test-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/whrw.uk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test Styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/whrw.uk\/#website\",\"url\":\"https:\/\/whrw.uk\/\",\"name\":\"Women's Health Research Wales\",\"description\":\"An all-Wales research centre dedicated to women's health, funded by Health and Care Research Wales.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/whrw.uk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cy\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test Styles - Women's Health Research Wales","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/whrw.uk\/cy\/test-styles\/","og_locale":"en_US","og_type":"article","og_title":"Test Styles - Women's Health Research Wales","og_description":"   ","og_url":"https:\/\/whrw.uk\/cy\/test-styles\/","og_site_name":"Women's Health Research Wales","article_modified_time":"2023-10-26T11:01:02+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 munud"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/whrw.uk\/test-styles\/","url":"https:\/\/whrw.uk\/test-styles\/","name":"Test Styles - Women's Health Research Wales","isPartOf":{"@id":"https:\/\/whrw.uk\/#website"},"datePublished":"2023-10-23T14:54:19+00:00","dateModified":"2023-10-26T11:01:02+00:00","breadcrumb":{"@id":"https:\/\/whrw.uk\/test-styles\/#breadcrumb"},"inLanguage":"cy","potentialAction":[{"@type":"ReadAction","target":["https:\/\/whrw.uk\/test-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/whrw.uk\/test-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/whrw.uk\/"},{"@type":"ListItem","position":2,"name":"Test Styles"}]},{"@type":"WebSite","@id":"https:\/\/whrw.uk\/#website","url":"https:\/\/whrw.uk\/","name":"Women's Health Research Wales","description":"An all-Wales research centre dedicated to women's health, funded by Health and Care Research Wales.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/whrw.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cy"}]}},"_links":{"self":[{"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":0,"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"wp:attachment":[{"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category-terms","embeddable":true,"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/category-terms?post=19"},{"taxonomy":"subject","embeddable":true,"href":"https:\/\/whrw.uk\/cy\/wp-json\/wp\/v2\/subject?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}