Add "pull out quote" style

[outerpress]

In some cards, we ended up using centered text at the top, then left aligned text. This was because we needed the equivalent of a "pull out quote" summary of the card.

I'll mock up a style for this, then note where it should be applied.

[outerpress]

Adjust the following:

• Text align primary headers left. Width should be the same as the paragraphs below (475 px)
• Add a 50px top margin and a 25px bottom margin.
• Add a new style that can optionally go below initial header
  • Font: Rubik
  • Align: left
  • 25 px bottom margin

Both should appear within the gray background that spans the width of the screen.

I kludged together a close approximation of what it should look like. Here's the HTML output and a screenshot:

<div style="background-color: rgb(243, 242, 243); height: auto; margin: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-bottom: thin solid rgb(243,242,243);"><h1 style="text-align: left;font-weight: bold;margin: 50px 0 0 0;width: 475px;">Homeless Population</h1>
<p style="margin-bottom:25px; text-align: left;color: rgb(97, 72, 97);line-height: 1.6em;font-family: rubik;width: 475px;">People experiencing homelessness are more likely to be people of color, male, and more likely to have a disabling condition than Multnomah County residents as a whole.</p></div>`

[clemf]

Re: our meeting, I'll use the StoryCard styles for this and see how it looks.

[clemf]

Ok StoryCard styles are in, I had to change the H2 titles to H3 so they weren't the same as the card styles. We can still build something like this if you'd like, I think there is a lot we can improve in terms of text/title hierarchy.

[outerpress]

Nice, looks great! I agree with you that the hierarchy can be improved, but I'm going to close this so we can fry bigger fish...