Create style utility classes and page header variant needed for Rent/Buy affordable housing header

[akegan]

DAHLIA Jira issue

Components

Goal

As as developer I want access to common building blocks for simple text styles

Underlined Heading

Propose implementing as a custom css class .underlined-heading with a helper to add caps .is-caps ( see global/text.scss , currently.text-caps-underline)

Numbered List

Propose implementing as a custom css class rather than a component .numbered-list (see .custom-counter as an example)

Aside Block

We have a current css utility called .aside-block that could be leveraged for this. (see global/blocks.scss as an example)

Utility Mockups
https://www.figma.com/file/tUtgsJO8XnF9Ij2dwu22EF/bloom-general?node-id=338%3A515

Page Header

Propose adding background color option to page header component
https://www.figma.com/file/tUtgsJO8XnF9Ij2dwu22EF/bloom-general?node-id=335%3A470

Context

At the top of our rental and sale listing pages, we provide a bit of additional context to users, including eligibility requirements for the Sale directory. I don't think that we necessarily need to put the whole headers into the ui-components library, but we should probably add some pieces of the components

DAHLIA designs

Sale version

Desktop:

Mobile:

Rental header

The rental version is much simpler, and might not require any new UI components (maybe just they grey background?
Desktop:

Mobile:

Suggested components

From a look at our pattern lib and the bloom ui-components, these are the components I think we'd need. I've linked to the DAHLIA pattern lib version too in case that helps.

1. This header variation (unless it exists in bloom components elsewhere). We might also want to consider not using all-caps when reproducing it because it's harder for folks to read.
   

2. This white box with info which it looks like we call a directory header sidebar
   

3. This numbered list
   

[slowbot]

@akegan I think we have styles for much of this.

Is your desire to have distinct components or custom utility classes that could be applied when building the layout?
Ex. h-caps-lined could be broken into two css utilities that could be applied or you could have a single component with a variation

[akegan]

Custom utility classes could be fine! For the header it'd be nice to have a component (or a variation on a component) since we'll use it in a few different places.

Do you have the numbered list somewhere? Could it be a variation on a component that already exists?

[akegan]

closing because much of this was accomplished in #1696