VF Blocks: Summary - Align figma and live variants, responsiveness update

[bhushan-ebi]

Some inconsistencies were spotted in the vf-summary existing in the live and on the figma library. Review the design of the variants and propose solutions to address the elements that are out of sync. Here are the issues noted:

• The vf-summary–article variant has a “leave comment” link in figma which does not show on live
• The vf-summary–event variant has the date in sentence case on live and capitals in figma
• The news has image variant has the text “GENERAL” in figma but not on live
• Review the documentation as it currently references the vf-box which has been deprecated

The current “news has image variant” does not stack the elements in responsive mode. This causes the image and the body of text to compete for the limited horizontal space on mobile and hence having poor readability for body texts with short line length.

• Design the responsive behaviour for this variant.
  Examples of implementations where the component stacks the image:

• Training site

• Intranet announcements

Useful links

• Vf-summary
• Vf-summary in figma
• Component review sheet
• Vf figma library
• Vf-blocks review in figjam
• Slides: Review of vf blocks