Added support for category headers.

docs/pages/content-design/odi-style-guide.md

@@ -1,6 +1,8 @@
 ---
 title: ODI’s style guide
 description: How ODI keeps our writing consistent, including the reasons for our choices
+headerlabel: Guides and playbooks
+headericon: book
 ---
 
 <p class="text-lead">These are the Office of Data and Innovation’s conventions and standard terms for writing. Our <a href="/content-design/principles/">content design principles</a> provide general guidance in how to write well.</p>

docs/pages/content-design/plain-language-checklist.md

@@ -2,6 +2,8 @@
 title: Plain language checklist
 description: ODI's detailed guide for making sure content is in plain language
 layout: single-column
+headerlabel: Guides and playbooks
+headericon: book
 ---
 
 Adapted from the US Department of Labor’s [Use plain language for claimant notices](https://www.dol.gov/agencies/eta/ui-modernization/claimant-notices)

docs/pages/content-design/plain-language-equity-standard.md

@@ -2,6 +2,8 @@
 layout: page
 title: Plain language equity standard
 description: ODI’s recommendations for how to help everyone understand content
+headerlabel: Standards and principles
+headericon: star
 ---
 
 <p class="text-lead">All state departments should:</p>

docs/pages/content-design/principles.md

@@ -2,8 +2,9 @@
 title: Content design principles
 description: ODI’s 7 keys for writing great content, including ways to implement them
 layout: single-column
+headerlabel: Standards and principles
+headericon: star
 ---
-
 <p class="text-lead">Great content takes work. The good news is that anyone can do it.</p>
 
 These 7 principles contain strategies and tips to help you write excellent content.

docs/pages/content-design/recommended-reading.md

@@ -1,6 +1,8 @@
 ---
 title: "Recommended reading: content design"
 description: Articles, guides, and tools to learn more about content design
+headerlabel: Recommended reading
+headericon: bookmark
 ---
 
 <p class="text-lead">The Office of Data and Innovation (ODI) periodically reviews and adds new resources. We select resources that are easy for people new to plain language and content design to understand and put into practice.</p>

docs/pages/human-centered-design/innovation-skills-accelerator.md

@@ -3,6 +3,8 @@ title: Innovation Skills Accelerator
 description: A 15-unit, self-paced course available to all State of California staff
 layout: single-column
 keywords: 
+headerlabel: Training
+headericon: ribbon
 ---
 
 <p class="text-lead">This 15-unit, self-paced course covers:</p>
@@ -14,6 +16,6 @@ keywords:
 
 State of California staff can take the Accelerator for free. Just sign up with your ca.gov email address.
 
-<button class="btn-primary" name="button" onclick="">Sign up for the Accelerator</button>
+<a class="btn-primary featured-btn external-link" href="http://innovate-us.org/"><span>Sign up for the Accelerator</span></a>
 
 Note: Clicking this link will take you from the Innovation Hub to innovate-us.org. This is not a state website. Be mindful of the information you provide while using that website. Their terms of use apply to any information you share with them.

docs/pages/product-management/product-craft-accessibility.md

@@ -1,6 +1,8 @@
 ---
 title: "Product craft: accessibility"
 description: Videos, guides, and presentations about how to help everyone access information
+headerlabel: Recommended reading
+headericon: bookmark
 ---
 
 <p class="text-lead">Making things accessible is an important part of product management. These are the ODI product managers’ favorite accessibility resources.</p>

docs/pages/product-management/run-of-show.md

@@ -2,6 +2,8 @@
 title: Run-of-show
 description: How to keep things organized in the lead up to a launch, announcement, or update
 layout: single-column
+headerlabel: Templates
+headericon: templates
 ---
 
 <p class="text-lead">A run-of-show tracker is a single unified table, organized by day and time.</p>

docs/site/_includes/layouts/page.njk

@@ -14,9 +14,14 @@
   </div>
   <main id="body-content" class="cagov-main">
     <article id="post-{{ page.fileSlug }}" class="cagov-article with-sidebar with-page-nav">
+      <div>
+      {% if headerlabel %}
+      <div class="content-page-header header-{{headericon}}"><span class="content-page-header-label">{{ headerlabel }}</span></div>
+      {% endif %}
       <h1 class="page-title title-cell">
         {{ title | safe }}
       </h1>
+      </div>
       <div class="sidebar-container everylayout sidebar-cell" style="z-index: 1;">
         <sidebar space="0" side="left">
           {% block contentNavigation %}

docs/site/_includes/layouts/single-column.njk

@@ -14,6 +14,9 @@
   </div>
   <main id="body-content" class="cagov-main">
     <article id="post-{{ page.fileSlug }}" class="cagov-article with-single-column">
+      {% if headerlabel %}
+      <div class="content-page-header header-{{headericon}}"><span class="content-page-header-label">{{ headerlabel }}</span></div>
+      {% endif %}
       <h1 class="page-title">
         {{ title | safe }}
       </h1>

docs/src/css/sass/ds-site-global.scss

@@ -109,6 +109,27 @@ span.title-card-header-label {
   vertical-align:middle;
 }
 
+div.content-page-header {
+  font-size: 14px;
+  border: 1px solid ;
+  font-weight: 400;
+  height: 26px;
+  padding-right:12px;
+  border-radius:8px;
+  display: inline-block;
+  position: relative;
+  background-image: url(/img/tile-icon-star.png);
+  background-repeat: no-repeat;
+  background-size: 24px;
+  background-position: left 4px center;
+  padding-left: 32px;
+}
+
+span.content-page-header-label {
+  vertical-align:middle;
+}
+
+
 /* HOW TO USE TILES */
 div.howtouse-grid-wrapper {
   display: grid;