FR: Create [v2-Key-Facts] Block

[ZoeBeykirch]

Context/Description

After investigating the issue with the Key Facts block reported in ticket https://github.com/hlxsites/vg-volvotrucks-us/issues/777#issuecomment-2418870267, the determined solution is to develop a dedicated [V2-key-facts] block to ensure that it is styled appropriately according to the v2 design specifications.

Acceptance Criteria

Editor AC:

• Content editors can copy and paste the V2 Key Facts block from the Sidekick Library.
• Content editors can use the block on any V2 redesign page.
• Content editors can use this block with any of the colored backgrounds via metadata (black, grey, etc.)

Non-functional AC:

• A new v2-key-facts block is created that adheres to the below Figma designs.
• Video with auto-play can be used in the block.
• Images can be used in the block.
• The content makes use of available space as much as possible:
  • On mobile and tablet, the facts are placed below the visual
  • When possible, the facts are placed in one row.
  • On desktop, the facts are shown next to the visual.
    Technical notes

Note

Example of Key Facts block in production: https://www.volvotrucks.us/trucks/all-new-vnl/#powertrain

Attachment / link to Figma

Figma: https://www.figma.com/design/02CNUdjDefh83K5OeFx9PI/Volvo-Component-Library-C%26T?node-id=1675-142&t=wRJS5x0l1o9q5XNB-1

Desktop

Mobile

Tablet

[AsmitKMishra]

Testing Completed. Feature works as expected and adheres to the Figma design.