Cards : fix design + add design callout messages

[isabellechanclou]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

-- TO DO --

card/#about

• Add an 'informational' design callout message explaining the following:
  • You'll find in the DSM [link of the Cards DSM page] the specifications of card component as Orange designers want them to be represented and used
  • You'll find in Boosted Card component variants that can be used as Cards and some others to use as containers
  • In the DSM, cards components come in 3 sizes that can't be changed (adjust the number of cards displayed on a same line and/or the card size choosing among the 3 available ones depending on the screen size). In Boosted, there are more size variants + responsive sizes to be able to adjust the size when a card is used as a container.

card/#example

• Replace the button "Primary" by a button "Outline"

card/#titles-text-and-links

• Adjust spaces (margin, padding) for consistency if possible technically speaking. Design provides values for the adjustments.

card/#images

• Text "Some quick example..." should be regular and not bold anymore.

card/#list-groups

• 1st variant : Adjust Boosted design according to the rendering of the list-group component specifications : vertical + horizontal lines of 1px thickness (2px now), text to turn regular (bold now), text padding/margin, ...
• 2nd variant with a "Featured" item on top of the list (with black background + white text): remove black background + put text in black and bold
• 3rd variant with "Card footer" item at the en of the list (bold and not vertically centered) : adjust paddings/margins to match DSM standard ones for consistency.

card/#kitchen-sink

• Note: see what's done in PR List group: Branded #1467. Detected problem when combining the work done in this PR and the usage of flush: a gap appears between the flush text left alignment and the one of the card description situated upper in the card.
• Solve the issue
• Adjust margin/padding + typography if needed for DSM consistency

card/#header-and-footer

• 1st + 2nd variants:
  • Remove the black background
  • Write "Featured" in black + bold
  • Add a 1px divider line below "Featured"
  • Replace the button "Primary" by a button "Outline"
• 3rd variant (Quote):
  • Remove the black background
  • Write "Featured" in black + bold
  • Add a 1px divider line below "Featured"
  • Replace the button "Primary" by a button "Outline"
  • Add more space between both sentences "A well-known quote, contained..." and "--Someone famous in Source Title"
• 4th variant (all content centered):
  • Add a design callout message saying that this variant can't be used because of the centered layout.
• Note: design will provide specs for all of these changes

card/sizing

• #using-grid-markup + #using-utilities + #using-custom-css:
  • Replace the button "Primary" by a button "Outline"
  • Adjust the design/rendering of the card if needed for DSM consistency
  • Note: as documented in the DSM, cards come in 3 specific sizes and their unitary size shouldn't be responsible as it is in Boosted doc.

card/#text-alignment

• Add a design callout message saying that 2nd ans 3rd variant with centered and right layout shouldn't be used.

card/#navigation

• Add a design callout message saying that shouldn't be used (no more explanation needed).

card/#image-cap

• 2nd variant: adjust if needed padding/margin/typography

card/#image-overlays (used in carousels)

• Add a design callout message saying that this variant can't be used because of accessibility matters.

card/#horizontal

• Adjust the design/rendering of the card if needed for DSM consistency, especially check the metadata layout (should be in bold)
• Note: this variant will be added in the DSM

card/#card-styles

• Add a design callout message above the title "Background and color" saying that none of the variants can be used.
• Note IC: I placed the design callout message just before the examples of cards with a background color. Thought it more appropriate...

card/#border

• Split the example section in 2 sections:
  • 1st section:
    • contains the 1st 8 cards with a colored border.
    • above this 1st section, add a design callout message saying that none of the variants can be used.
  • 2nd section:
    • contains only the card borderless
    • note: this variant can be used and therefore doesn't have a design callout message. IC comment: I displayed this variant before the example containing the 8 cards because it's the only one that can be used (so logic that it comes before the ones that shouldn't be used) and because it is more understandable that the design callout message applies only the the 8 cards with colored borders.

card/#mixins-utilities

• Add a design callout message saying that none of the variants can be used.

card/card-layout

• #card-groups: Add a design callout message saying that none of the variants can be used because there is no gap between cards.
• #grid-cards: OK as is but check margin/padding/typo and fix what is needed for DSM consistency

Motivation and context

This issue is part of the work done in issue #1199 and its PR #1614. This issue concerns the Cards component reviewed with design and dev to identify where to add design callout messages and where to modify Boosted doc.