Full-width text

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

Full-width text

[nataliafitzgerald]

@ajbush @duelj

Content edits

• For the "When to use" section is there a way to format this content without using secondary bullets? Design edits
• Change "Content Guidelines" to "Content guidelines" (sentence case)
• Change "Content & media" to "Content and media"

design

• A lot of the content here is going full width and the line lengths are quite long at desktop. Are we going with the existing standard max width of 6 columns?
• Can we include more vertical space above the "Style" heading. The content feels crowded there.
• Can we include more vertical space above the "Behavior" heading. The content feels crowded there.

[ielerol]

I'm providing some UX review for the content and design of this page. I do have a couple of suggestions, mainly with the description of the component itself.

• Maybe make the mockup images themselves also links to larger versions when available? It's good to have the explicit text, but I definitely directly clicked on the images several times trying to see them larger.
• The mockup shown for the basic content component looks like it's highlighting a pull quote within the body of an article, and the style section for "Content and media" also shows a set-aside area within longer text, but the description of the component and the content variation make it sound like this component covers the entire body text of a page, so I think this needs clarification.

If the intent of the component is to highlight some text within a larger flow, that needs to be clearer. If the intent is for the component to cover both "vanilla" body text and featured text like a pull quote, I think those may need to be separate variations on the component. Basically, if I have a browse page with 3 paragraphs of body text plus I want to highlight a pull quote, I can't tell from this page if it should all be built of full-width text components or if there's some other "body" component that would have a full-width text component embedded in it for the pull quote.

[schaferjh]

@ajbush A handful of tweaks here:

• [x] Change the final sentence of the intro paragraph to better line up with the examples below: "...with the option to add pull quotes, media, inset information, and tables in-line."
• [x] Per Lorelei's feedback above, can the three mockup images also be links to the larger versions? So I could click on the image or the link to get the larger version?
• [x] On the mockups seen in Behavior > Content and media -- Change the "Inset content or media" label to "Quote text or media" and make the label type and box stroke gray, so they blend in with the rest of the mock up. I want to avoid confusion with the Inset mockup below and make it clear that this mockup is not just about the media box, but about all the content as a unit.
• [x] Under Style > Content and media, let's clarify that the style points are about the media or quote box, not all full-width content. Change the first bullet to read: "Quote or media container padding: 30 px top and bottom. Side padding is removed so element is flush left and right."

[ajbush]

Updates made!

[schaferjh]

@ajbush great, ready to publish!