Text introductions

[ajbush]

What is it?

V1 is looking to add its atomic element documentation to the DM for the use of other teams. Because the primary touchpoint with these elements is through the Wagtail CMS we have focused on the components that will be encountered there. This component is actually a grouping of smaller page components and therefore the page abides by the content guidelines as much as possible but has a few differences. This page will live in the "page components" section of the updated DM.

Text introductions

[niqjohnson]

(I volunteered to do the UI review of this one in lieu of @schaferjh.)

This is looking really nice. As opposed to some of the confusion I had with the item introduction in https://github.com/cfpb/design-manual/issues/416#issuecomment-225245236, I understood how a text introduction is used right away. The "[t]ext introductions should be used on every page, except in cases when a hero is used" line is excellent.

I could still see a couple of suggestions I made for the item introduction being helpful here, too (real examples alongside the generic ones and swapping the lo-fi illustrations in the behavior section with higher fidelity ones). I don't think those are necessary to address before launching version 1 of this page, though.

Overall, a big 👍 on this one.

[nataliafitzgerald]

@duelj @ajbush

Content feedback:

• Check casing (inconsistent on the page): "Breakout" and "breakout" are both being used - Use sentence case "Text introduction" or "text introduction" - Use sentence case Check this sentence in particular (bottom of the page): "Spacing: The Breakout may be taller than the Text Intro content, in which case the margin beneath the Breakout should be 60px." (lowercase "breakout" "text intro content" and "breakout"
• In the "Content" section what if you removed the top level of bullets and just made these paragraphs? The first section could then have the two bullets you have there now.

Design feedback:

• Add more vertical space above "Style". This currently feels crowded.
• For the styling, you list H3 Lead paragraph in the sample text and the "Lead paragraph: Heading 3" in the "Style" section. Do you intend for this to pull from the "H3" style or from the "Lead paragraph" style in our type hierarchy? I believe that these two styles are the same at wider widths but when the screen gets smaller they become different. H3 (22/28 Regular) becomes H4 (18/22 Medium) but Lead paragraph goes from 22/28 Regular to 18/22 Regular. I recommend matching what we do for heroes which is to use the "Lead paragraph" style. http://ajbush.github.io/design-manual/ui-toolkit/heroes.html

[schaferjh]

I suggest adding two intro sentences to this page to make it consistent with other pages:

The text introduction component is the standard page introduction component used across all pages that do not have a hero or item introduction.

On landing or sub-landing pages, the text introduction may be accompanied by a breakout sidebar to highlight a specific piece of content from the section.

@ajbush

[schaferjh]

@ajbush One very minor tweak: In the Content guidelines, final paragraph, add the word "Optional" so it reads "The optional call to action link should..."

[ajbush]

Updated!

[schaferjh]

great, ready to publish!