Item introduction

[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.

Item introduction

[niqjohnson]

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

I understood what an item introduction is after reading the page, so 👍 there.

Overall, I wanted more specific language and examples on the page. I definitely get wanting to keep the explanation general so we're not too prescriptive on when to use an item introduction, but it took me a while to wrap my head around what exactly an item introduction is. Some changes that might help with that:

• Tie this component to the text introduction component a little more explicitly. I read this page before the text intro page. After I read the text intro page, I finally got it ("oh, all pages that don't have a hero need either a text intro or an item intro, and an item intro is only for pages that are linked to from a list one level up").
• Show examples with real content somewhere on the page in addition to the generic examples that are there now (those examples would have helped me visualize what item intros with and without all the optional components will look like, too).
• Swap the lo-fi examples in the "Behavior" section for ones that are a little higher fidelity. I had trouble connecting each part of the lo-fi examples to the corresponding part in the hi-fi example at the top of the page.

All that said, I still got what an item introduction is from what's there now, so I don't think any of those suggestions need to hold up launching the first version of this page.

[nataliafitzgerald]

@duelj @ajbush

Content feedback:

• Check casing (inconsistent on the page): Change "Item Introduction" to "Item introduction" Change "Breakpoints" to "breakpoints" Change "Document Detail page" to "Document detail page"
• The subheading content seems like it could use some more detail.
• Is there any way to avoid secondary bullet lists?

Design feedback:

• Add more vertical space above "Style". This currently feels crowded.
• For the styling, you list H3 Subheader. Shouldn't this be "Lead paragraph"? See type hierarchy: http://ajbush.github.io/design-manual/identity/typography.html

[schaferjh]

Per @niqjohnson's feedback (thanks!), I suggest rewording the introduction to this item to read:

The item introduction component is a variation of the text introduction component used on pages found in filterable lists such as blog posts, press releases, or documents.

For the MVP version of this page, we're going to hold off on loading up on specific examples while folks try out all these new pages. We'll gather feedback and if they still feel necessary in a few months, compile examples.

@ajbush will be making some tweaks to the generic examples to make them clearer.

[schaferjh]

@ajbush Tweak to the Content guidelines -- update the spacing:

The optional subheader paragraph should be additive to the user experience. Most pages currently using this component do not use the subheader element.

If using the subheader paragraph, it should expand on the page title and help explain why the reader should care. No more than 2 sentences; 50 words.

[ajbush]

Updated!

[schaferjh]

👍 ready to publish!