Enhancement[card]: add 1:1 card to component library

[jeanservaas]

Enhancement: the 1:1 Card

@DianaStanciulescu is currently updating the Gatsby kit and there are several high priority component enhancements that we would like to add to our Gatsby component library.

The specs are below, so this is solely a dev work stream that's needed.

Justification

Although the 1:1 card with no image is being used widely in Gatsby sites and in product, it does not exist as a component. As a result teams need to modify the 1:1 image component to achieve this card, but more importantly, they don't understand type hierarchy in this card. Offering type hierarchy variants alone with drastically decrease support questions for Gatsby theme.

Some use cases:

https://www.ibm.com/able/
https://www.ibm.com/able/toolkit
https://www.ibm.com/design/thinking/page/courses/Practitioner
https://www.ibm.com/design/thinking/page/toolkit
https://www.ibm.com/design/research/guiding-principles/principles-overview
https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/

Design specs and variants

Ideally this card configuration can work with an H2 title or an H3 title.

The is an enhancement of the image component so grid behavior is exactly the same as it is for that component.

Sketch file attached

1:1 Card Specs.zip

This is a brand prioritized issue so that Diana's kit matches what is available in the code

[mjabbink]

@jeanservaas @vpicone moved this to Brand priority. We should get this into upcoming sprints

[mjabbink]

@jeanservaas Let’s connect with Vince on these two issues

[vpicone]

@jeanservaas using a % from the padding seems counter to other component style approaches. Is there a reason to not use a static value from the spacing scale?

[mjabbink]

@vpicone I think the spacing strategy is up to you and the intent is that the content does not extend to the far right margin so the additional padding (however it’s done) prevents that from happening. I think @jeanservaas mentioned % because I think we all understand that is how the main body copy is done so the text does not fully span 8 columns.

[alisonjoseph]

SquareCard
FeatureSquareCard

[mjabbink]

@DianaStanciulescu I think this type of usage with 14px label over 28px is good to have and is currently used on the Carbon for IBM.com page https://www.ibm.com/standards/carbon/#latest-updates

[DianaStanciulescu]

@mjabbink I added this one to the specs.
1 1 Card Specs_v2.sketch.zip

I also noticed we had an open issue regarding leading for productive heading 3: I think Jeannie was thinking about having a "long" option for it, at 20/28 type.