Component: Refactor kicker deck and title

[lcummings12]

Summary

To enhance clarity, a new partial called universal-header.html was created which is designed to handle the display logic for page headers.

Preview

New Component	Production
Events page	Events page
Guides	Guides
Resources	Resources

Solution

A new partial, guide-details.html, was created to separate the logic for guide headers from the main template. This partial is integrated into the existing guide-header.html.

How To Test

A correct implementation should have no visual differentiation from the production site. Attached are two images showing this.

1. Run npm start
2. visit any page in the guides/resources section on local server
3. open the same page on the production site and compare the header

---

Dev Checklist

• PR has correct labels
• A11y testing (voice over testing, meets WCAG, run axe tools)
• Code is formatted properly

[github-actions]

🔍 Preview in Federalist

[nick-mon1]

@lcummings12 This is a good start. We should expand the scope of this card to cover all templates that use the kicker, title and summary fields.
Insted of just the guides page, each of the content/**/single.html templates use these fields.
It would be ideal to extract this into a page-header component that can be used for all templates pages and not just the guides.

I've updated the trello card description to expand the scope and provide some directions.

Note

We do not link trello cards in PR's to prevent access to our trello board. I've removed the link in the description.

The new page-header component should not include grid styles, we will set those in the template (single.html, list.html) that includes the component partial.

Sample Code

    {{- if .Params.kicker -}}
    <p class="kicker">{{- .Params.kicker -}}</p>
    {{- end -}}
    {{/* Page Title */}}
    <h1>{{- .Title | markdownify -}}</h1>

    {{/* Deck */}}
    {{- if .Params.deck -}}
    <div class="deck">{{- .Params.deck | markdownify -}}</div>
    {{- end -}}

[ch-tyson]

Hi @lcummings12! Overall I think this is moving in the right direction. some suggestions below:

• Consider renaming to something more generic, e.g. 'page-header.html' or 'page-details.html' to use in all single.html and list.html markup templates.
• Add comments explaining usage and required parameters

[nick-mon1]

Closing, replaced by #7803