Sidebar/pre-footer page

[duelj]

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.

Sidebar/pre-footer page

[nataliafitzgerald]

@ajbush @duelj

Content edits

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

Design edits

• Can we include more vertical space above the "Style" heading. The content feels crowded there.
• Remove extra space here (before "prefooter")

• For the images under style we will want to be sure to follow our editorial style standards for date and time formatting. (1–3 p.m. CST) - Also, add a space after the comma in the date (March 21, 2015)

[ielerol]

I'm providing some UX review for the content and design of this page.

• I suggested this on the full-text component issue as well, if others agree with the idea it should be added to the design manual content guidelines more generally, but I think when we have text links to larger versions of mockup images, the images themselves should also be linked to the larger versions.
• I suggest adding the call to action as one of the primary layout variations. I know it's not going to look much different from the related links styling, but there are guidelines around how to use a sidebar call-to-action that are important to include, like, there should be a single clear next step, not a whole block of suggestions. And when a sidebar includes a CTA along with other content like related posts/pages, the CTA should be the first thing in the stack.

If there's a plan to make a separate call-to-action component page the way contact info is now, well, carry on!

[schaferjh]

@sarahsimpson09 We want to add the button/CTA option to this page, per Lorelei's note above. @ajbush is pulling the design specs from GHE/flapjack/Modules-V1/wiki/Standalone-CTA-(with-button) but I think we should add some content strategy thinking around when to use this option and any initial guidelines we may have around the content in the slug or on the button.

[ajbush]

Hey @schaferjh and @sarahsimpson09

I dropped in a CTA with button section and some placeholder content. Let me know if we'd like to beef up the content.

[schaferjh]

Thanks @ajbush.

In the Use section I would suggest the following edit --

When to use When highlighting or featuring a call to take a specific action.

When other options are better When the "action" is navigating to another page of the site or downloading a document. Refer to the buttons page for more information.

@sarahsimpson09 do you think we need any content guidelines around whether the prompt text for the call to action is in the slug or the paragraph text? In general we might want to make a point about that here -- are slugs descriptors or CTAs or both?

[ajbush]

Updated and dropped in your new content @schaferjh. I also changed "CTA with button" to "Call to action with button".

[schaferjh]

@ajbush Just add a hard return into the intro paragraph:

Sidebars are present across most page templates to house information related to the main content of the page. On pages with leftside sub-navigation, sidebar content may be displayed as an optional prefooter at the bottom of the main content.

Sidebars may can contain related posts, calls to action, metadata, email sign ups, contact information, etc. Primary layout variations as seen in basic sidebar format:

[ajbush]

Updated!

[schaferjh]

👍 ready to publish!