Eyebrow: Mobile style mismatch between CF.gov and Design System

[meissadia]

Issue

The responsive styles we see achieved on CF.gov Owning a home do not align with the capabilities of the DS Eyebrow.

There is an unwanted margin-top in the DS Eyebrow on mobile

CF.Gov	DS

Question: How do we match the Eyebrow we see on CF.gov using DS classes?

• Can the CF.gov styles for .eyebrow be added to the DS .h5 class?

Investigation

• (1) The DS docs implementation is as below.

<div class='h5'>Eyebrow</div>
<h1>Subheading</h1>

• (2) CF.gov example uses a .eyebrow class: https://www.consumerfinance.gov/owning-a-home/prepare/

<div class='eyebrow'>Eyebrow</div>
<h1>Subheading</h1>

The official implementation (1) gets an undesirable margin-top due to this CSS from the DS. We have tried to mimic the CF.gov example (2) but the .eyebrow class does not exist in the DS. I've also experimented with the DS .m-global-eyebrow but that is not a drop-in replacement for the .h5 or .eyebrow styles.

Based on code inspection on CF.gov Owning a home, I think the .eyebrow styles would come from the cf-typography library but I have not yet been able to find a repo that provides the CSS definition, so I am not sure how best to get the DS (1) implementation to match.

[sonnakim]

@contolini will check with Meissa in the Mattermost channel to see if this is still relevant (thank you!).