Update ns-product-card docs

[RobTobias123]

Outcome

An updated Nucleus Docs page for the ns-product-card component, to include latest changes for 'horizontal +' with examples and content guidance etc.

Scope

• Branch
• Purpose - check still relevant
• Content revision
• Update HTML examples
• Guidance - Do/Don'ts
• Guidance - Diagram and key
• Implementation - Placement (automated from component once built)
• Spec/Spec notes (automated from component once built)
• Apply 'updated' badge to LHS menu.
• Share iterations for feedback ad adjustment.
• Merge on approval and coincide with release of code

Child of Epic: #796

[RobTobias123]

Branch: chore/update-ns-product-card-with-horizontal-type

[RobTobias123]

Initial draft and format created to accommodate horizontal type - for further additions.

PR: #727

[RobTobias123]

Added 1x1 720px sq asset to this and section in guidelines/assets page to fit in with current 720 width 4/3 and 16/9 defined for ns-product-card. Updated and checked link in the product-card docs.

[RobTobias123]

Added 'updated' to the badge.json - IIRC this will show when the JSDoc updates?

[RobTobias123]

Just the HTML examples left outstanding now - these are dependent on the build being completed first. The horizontal guidance image has been created from the concept Figma component at the moment but can and should be updated with a screenshot of the real thing once available.

[andij]

I've updated the content Rob initally drafted. Rob helped by updating the guidance image with a screenshot from the latest build.

It's now ready for review.

• [docs] Feature/ns-product-card horizontal #727

[andij]

Removing the Dependencies label as it's a reserved label for Dependabot: https://docs.github.com/en/code-security/dependabot

See example of this label in Muon: https://github.com/centrica-engineering/muon/labels/dependencies

Notice that the Dependabot bot is adding this label: centrica-engineering/muon#622