[Lead space] medium variation

[wonilsuhibm]

Task

A lot of efforts has been done to identify the height and usage for different lead spaces, so far only the tallest was built. Our goal this round would be to design and spec 1-2 more variants that might be shorter, more practical, and allow more content to show above the fold.

• [x] Design explorations & synthesis of past work #5197
• [x] Review with core team + design leads of AEM & HC
• [x] Spec
• [ ] Update documentation (website) FYI @JennySanchez
• [ ] Build

Additional Information

• box folder with updated specs
• Original size standards
• Solutions page template
• Services page template
• Support landing page
• Products landing page

Resources

• Current one in our library: https://ibmdotcom-web-components.mybluemix.net/?path=/story/components-leadspace--default-with-no-image

• Different use cases are captured in Ideation repo issue: https://app.zenhub.com/workspaces/carbon-for-ibmcom-5d449f3642eb1962336cbe52/issues/carbon-design-system/digital-design-ideation/126

• Research and explorations from Lara:

  Here is the lead space research work I shared today during Reboot design review. Feel free to dig around and challenge anything in the Sketch file or report. I added questions and potential directions to move forward with but all of this will need further review and probing by design and content strategy! Let me know if you have questions. Sketch file with competitor audits and internal audit/journey proposals: https://ibm.box.com/s/jyhzoysxeca8lenhz37gf8hfreoturjm Research report: https://ibm.box.com/s/2fywsn7qwhev2ay4ia3jknhh17ugx5vj Draft content for lead spaces pattern (to publish on IBM.com Library) Boxnote: https://ibm.box.com/s/00ayfghsn26ge4g19lcn59buylav2xix

• Hybrid Cloud library: https://pages.github.ibm.com/MSC-Cloud/hc_fractal/components/detail/2a--white.html

• AEM proposal: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5094

[RobertaJHahn]

Some examples of Events and Think Lead space modifications. https://www.ibm.com/events/ and https://www.ibm.com/events/think/

Rafeal to provide more details about the sizes to Jenny and document here.

[shixiedesign]

Documented slack discussion below. FYI @JennySanchez @oliviaflory @photodow @DragosRistici Please keep tabs on updating Design spec, Fun spec, Website respectively. Thank you!

Lead space variants

• super
• tall (default)
• medium
• short

Alignment options

left center

Type options

TBD proposal:

Light (display-01 in super, expressive-heading-05 in tall medium short) Semibold (expressive-heading-06)