Add bureau page text & media object, content title/description, and content_block modifier patterns

[virginiacc]

• Add Bureau landing page text
• Add content_block__padded-top, content_block__border-top, and content_block__border-bottom modifiers
• Add OOCSS-based media object
• Add content_title and content_desc hierarchy classes
• Add list__branded with CFPB-green bullets
• Add u-show-on-mobile and u-hide-on-mobile utility classes

[himedlooff]

cf-core has a .u-clearfix utility you can call here instead: https://cfpb.github.io/cf-core/docs/#clearfix
It's a little different, so let me know if we should rethink the utility class or if it's sufficient.

[himedlooff]

Can you just add some space after the semicolon to these three lines?

[himedlooff]

If this is bureau specific can you name it something bueau-y? Or move it to layouts.less with a topdoc comment so it can be discovered and reused through the docs.

[virginiacc]

Yes, that makes sense. Any suggestions for naming? The purpose is readability, so maybe something like readable-max-width?

[himedlooff]

How dangerous would it be to set a max-width on all paragraphs and headings?

[himedlooff]

If we stick with a class name then some off the top of my head ideas are:

• .readable-max
• .readable-line-length

[virginiacc]

It would be more convenient to have max-width applied automatically than have to add a class in lots of places if this is a site-wide readability standard.

It looks like the blog content maxes out at 652px wide, and the line breaks in the bureau landing page design suggests a max-width closer to 620px. Would we need to standardize? Would other elements -- lists, links -- need a max-width too?

[Scotchester]

I would be in favor of at least testing out a site-wide standard on all text elements. Perhaps something like max-width: 40em would be a good start?

[himedlooff]

@virginiacc, one last thing, I promise. Can you add quick Topdoc comments to the following new patterns so they show up in the docs pages?

• hide/show on mobile (these can be two patterns under the same Topdoc comment)
• .u-mb0
• the .content_title's (again these can be under the same Topdoc comment but make a pattern for each one)

[himedlooff]

Thank you!