{"id":730,"date":"2020-11-05T17:02:49","date_gmt":"2020-11-05T17:02:49","guid":{"rendered":"https:\/\/sustainabilityreport.ucop.edu\/?page_id=730"},"modified":"2020-11-05T17:02:49","modified_gmt":"2020-11-05T17:02:49","slug":"styleguide","status":"publish","type":"page","link":"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/","title":{"rendered":"Styleguide"},"content":{"rendered":"<h3 class=\"expandable wp-block-heading\" role=\"button\">Headings<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Heading 1 Page Title<\/h1>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> Heading 1 is the largest header and is typically used to wrap around the page title. <strong>This heading tag should not be used to style your content.<\/strong> The purpose of the heading tag is to provide structure for your document, much like an outline displays the structure of a term paper or technical document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Heading 2<\/h2>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> H2 is the first level heading in the content area. When adding new content to pages or posts, this should be the top level heading and should be used to break up text into main sections.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Heading 3<\/h3>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> H3 is the second level heading in the content area.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Heading 4<\/h4>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> H4 is the third level heading in the content area.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Heading 5<\/h5>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> H5 is the fourth level heading in the content area.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\">Heading 6<\/h6>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> H6 is the fifth level heading in the content area.<\/p>\n<\/div><\/div>\n\n\n<h3 class=\"expandable wp-block-heading\" role=\"button\">Text Styles<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Font Stack<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Kievet Pro Web, sans-serif<br>\n    <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Font Weights<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">400, 400 italic, 500, 500 italic, 700, 700 italic<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h4 class=\"wp-block-heading\">Intro Text<\/h4>\n\n\n\n<p class=\"intro wp-block-paragraph\">Vivamus imperdiet pharetra tempus. Duis cursus iaculis lectus, sed rutrum turpis sollicitudin sit amet. Fusce eleifend eros in eros sodales sollicitudin. Donec ullamcorper mi nec neque facilisis, ut fringilla sapien consequat. Nam sed velit nisl. Pellentesque lorem magna, ultrices vel suscipit in, pharetra nec lectus.<\/p>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> The intro class should be used for introductory paragraphs on landing pages that need more visual prominence or need to be set apart in some way from the rest of the text. To apply an intro class, create a paragraph block, open the sidebar block settings, and add the word &#8220;intro&#8221; to the &#8220;Advanced &gt; Additional CSS Class&#8221; area.     <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Body Text<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus nunc consequat mauris volutpat, eleifend accumsan metus tempor. Cras venenatis, urna in tincidunt maximus, nisi mauris cursus sem, quis volutpat ex nulla nec est. Mauris ornare orci diam, ut pretium eros tristique in. Donec massa mi, ultricies sit amet velit ut, semper vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Quote<\/h4>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p>Mauris eleifend sem id velit tincidunt, nec dapibus ex consectetur. Pellentesque dignissim vestibulum neque nec varius. Estibulum a varius metus. Quisque a ex ante. Morbi purus urna, tristique a cursus vel, dictum id felis. Proin nec tristique mi.<\/p><cite>Lorem Ipsum, dolor semet<\/cite><\/blockquote>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> A quote block is used for quotations or to highlight a specific piece of content. A citation can be added below the quote, if necessary.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Separator<\/h4>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> Also known as a horizontal rule, a separator defines a thematic break in a page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Other<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><a target=\"\" rel=\"noopener noreferrer\">Link in paragraph text<\/a><\/p>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> A hyperlink is used to link from one page to another, or to an image or document. Use the popup toolbar to add a link. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>This is bold<\/strong>, <em>this is italic<\/em>, <u>this is underlined<\/u><\/p>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> Italics can be used for added emphasis or to denote an article. Bold defines important text. <strong>Tip:<\/strong> Avoid using underline since it could be confused for a hyperlink.\n\n    <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><small>This is small text and can be used for downplaying elements, like citations at the end of an article.<\/small><\/p>\n<\/div><\/div>\n\n\n<h3 class=\"expandable wp-block-heading\" role=\"button\">Lists<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Bulleted List<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Risus ipsum maximus enim<\/li><li>Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc<\/li><li>Sed sagittis dictum felis<\/li><\/ul>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> Use the list block to create an unordered list.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Numbered List<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li>Risus ipsum maximus enim<\/li><li>Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc<\/li><li>Sed sagittis dictum felis eu porttitor<\/li><\/ol>\n\n\n\n<p class=\"usage wp-block-paragraph\"><strong>Usage:<\/strong> Use the list block to create a numbered list.\n<\/p>\n<\/div><\/div>\n\n\n<h3 class=\"expandable wp-block-heading\" role=\"button\">Colors<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Primary Colors<\/h4>\n\n\n\n<p class=\"circle primary1 has-light-gray-color has-text-color wp-block-paragraph\">blue<br>#1295D8<\/p>\n\n\n\n<p class=\"circle primary2 wp-block-paragraph\">gold<br>#FFB511<\/p>\n\n\n\n<p class=\"circle primary3 has-light-gray-color has-text-color wp-block-paragraph\">dark blue<br>#005581<\/p>\n\n\n\n<p class=\"circle primary4 border wp-block-paragraph\">white<br>#FFFFFF<\/p>\n\n\n\n<p class=\"circle primary5 wp-block-paragraph\">light gray<br>#F0EFED<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Secondary Colors<\/h4>\n\n\n\n<p class=\"circle secondary1 wp-block-paragraph\">yellow<br>#FFD200<\/p>\n\n\n\n<p class=\"circle secondary2 wp-block-paragraph\">light yellow<br>#FFE552<\/p>\n\n\n\n<p class=\"circle secondary3 has-light-gray-color has-text-color wp-block-paragraph\">orange red<br>#FF6E1B<\/p>\n\n\n\n<p class=\"circle secondary4 wp-block-paragraph\">orange<br>#FF8F28<\/p>\n\n\n\n<p class=\"circle secondary5 wp-block-paragraph\">bronze<br>#B4975A<\/p>\n\n\n\n<p class=\"circle secondary6 has-light-gray-color has-text-color wp-block-paragraph\">teal<br>#00778B<\/p>\n\n\n\n<p class=\"circle secondary7 has-light-gray-color has-text-color wp-block-paragraph\">light teal<br>#00A3AD<\/p>\n\n\n\n<p class=\"circle secondary8 has-light-gray-color has-text-color wp-block-paragraph\">fushia<br>#E44C9A<\/p>\n\n\n\n<p class=\"circle secondary9 wp-block-paragraph\">pink<br>#FEB2E0<\/p>\n\n\n\n<p class=\"circle secondary10 has-light-gray-color has-text-color wp-block-paragraph\">dark gray<br>#707070<\/p>\n\n\n\n<p class=\"circle secondary11 wp-block-paragraph\">gray<br>#BEB6AF<\/p>\n\n\n\n<p class=\"circle secondary12 has-light-gray-color has-text-color wp-block-paragraph\">text<br>#434343<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n<h3 class=\"expandable wp-block-heading\" role=\"button\">Buttons<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\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\">Fill Button<svg class=\"icon svg-icon icon-arrow-right \"><use xlink:href=\"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-content\/themes\/sustainability-uoc\/images\/icons.svg#icon-arrow-right\"><\/use><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\">Outline button<svg class=\"icon svg-icon icon-arrow-right \"><use xlink:href=\"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-content\/themes\/sustainability-uoc\/images\/icons.svg#icon-arrow-right\"><\/use><\/svg><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-default\"><a class=\"wp-block-button__link\">Underlined Arrow Button<svg class=\"icon svg-icon icon-arrow-right \"><use xlink:href=\"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-content\/themes\/sustainability-uoc\/images\/icons.svg#icon-arrow-right\"><\/use><\/svg><\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"expandable wp-block-heading\" role=\"button\">Images<\/h3>\n\n\n<div class=\"wp-block-group section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Header Image<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A header image should be at least 600px wide and 600px tall.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Content Images<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A standard image that appears within the content area of a page should be at least 690px wide.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A large separator image in the content area of a page should be at least 1000px wide.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Headshot<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A headshot photo should be at least 600px wide, and preferably square. <\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Headings Heading 1 Page Title Usage: Heading 1 is the largest header and is typically used to wrap around the page title. This heading tag should not be used to style your content. The purpose of the heading tag is to provide structure for your document, much like an outline displays the structure of a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":80,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-730","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Styleguide - Sustainability Annual Report 2020<\/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:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styleguide - Sustainability Annual Report 2020\" \/>\n<meta property=\"og:description\" content=\"Headings Heading 1 Page Title Usage: Heading 1 is the largest header and is typically used to wrap around the page title. This heading tag should not be used to style your content. The purpose of the heading tag is to provide structure for your document, much like an outline displays the structure of a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/\" \/>\n<meta property=\"og:site_name\" content=\"Sustainability Annual Report 2020\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/\",\"url\":\"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/\",\"name\":\"Styleguide - Sustainability Annual Report 2020\",\"isPartOf\":{\"@id\":\"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/#website\"},\"datePublished\":\"2020-11-05T17:02:49+00:00\",\"dateModified\":\"2020-11-05T17:02:49+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/#website\",\"url\":\"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/\",\"name\":\"Sustainability Annual Report 2020\",\"description\":\"Resilience: From Coronavirus to Climate Change. The University of California is bringing people together to protect a rapidly changing and warming planet. Our 2020 Sustainability annual report displays progress towards our commitments\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styleguide - Sustainability Annual Report 2020","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:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/","og_locale":"en_US","og_type":"article","og_title":"Styleguide - Sustainability Annual Report 2020","og_description":"Headings Heading 1 Page Title Usage: Heading 1 is the largest header and is typically used to wrap around the page title. This heading tag should not be used to style your content. The purpose of the heading tag is to provide structure for your document, much like an outline displays the structure of a [&hellip;]","og_url":"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/","og_site_name":"Sustainability Annual Report 2020","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/","url":"https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/","name":"Styleguide - Sustainability Annual Report 2020","isPartOf":{"@id":"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/#website"},"datePublished":"2020-11-05T17:02:49+00:00","dateModified":"2020-11-05T17:02:49+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sustainabilityreport.ucop.edu\/2020\/styleguide\/"]}]},{"@type":"WebSite","@id":"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/#website","url":"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/","name":"Sustainability Annual Report 2020","description":"Resilience: From Coronavirus to Climate Change. The University of California is bringing people together to protect a rapidly changing and warming planet. Our 2020 Sustainability annual report displays progress towards our commitments","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sec-1127-sustainabilityreport-multi.pantheonsite.io\/2020\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/pages\/730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/comments?post=730"}],"version-history":[{"count":0,"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/pages\/730\/revisions"}],"wp:attachment":[{"href":"https:\/\/sustainabilityreport.ucop.edu\/2020\/wp-json\/wp\/v2\/media?parent=730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}