Configure large stat figures on impact report

[amwhitty]

Is it possible to replicate the big state/by the numbers style on project pages to be used on impact report pages?

The goal is to have these 4 impact report pages have large stat figures. I tried putting the stats in the SSA page like a project page, but that seems wrong.
https://usds.github.io/website-staging/impact-report/2024/ssa/
https://usds.github.io/website-staging/impact-report/2024/covid-reporting/
https://usds.github.io/website-staging/impact-report2024/medicaid-renewals/
https://usds.github.io/website-staging/impact-report/2024/medicaid-renewals/

Let me know if this is possible to potentially resolve by Wed 5/8. Thank you.

[TomNUSDS]

@amwhitty
It has to do with the template used for the various pages.

I can probably copy the "stats" template code over and get it working.

Let me look into it and I can let you know by tomorrow.

[TomNUSDS]

One issue is how the layout would look. The "right side" is taken up by the nav on the Reports to Congress:

But so are the figures:

"nesting" on inside the other might be odd looking?

[amwhitty]

@TomNUSDS Yes I agree have the left vertical stats and the left vertical nav won't work. Is it possible to take the text style but layout horizontal? Don't spend too long on this. Was mostly inquiring if it's a relatively simple enhancement. I can just add a "by the numbers" header and use the stats in a bulleted list like the rest of the text.

[TomNUSDS]

Interesting. The mobile view of the "Figures" looks like this:

We could try to mix them. It might be a challenge css layout wise?

Would you want to appear at the top or bottom of the report?

[TomNUSDS]

https://www.usds.gov/report-to-congress/2017/fall/immigration-system/ has an impact section in it. But it's hacked as inline html in the markdown.

Preview

Source

### Impact

<div class="margin-bottom-3">
  <div>
    <span class="text-primary text-bold font-body-3xl">5</span>
    <span class="text-primary text-bold font-body-2xl">%</span> 
    <span class="text-primary text-bold font-body-3xl"> &rarr; 50</span>
    <span class="text-primary text-bold font-body-2xl">%</span>
  </div>
  <div>Increase in immigration workload completed digitally</div>
</div>

<div class="margin-bottom-3">
  <div>
    <span class="text-primary text-bold font-body-3xl">100</span>
    <span class="text-primary text-bold font-body-2xl">%</span>
  </div>
  <div>of new N-400 applications electronically processed since late Oct. 2017</div>
</div>

My example

Here's what I've hacked together that uses Impact sections from the header:

[TomNUSDS]

Pull request here: #964