[Layout foundations] Update `AlphaCard` component docs and guidance

[laurkim]

Update AlphaCard docs

• Description
• Examples: descriptions and visuals
• Add related components section (some questions about this in the figma file)

Update
Description	Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.
With subdued background example	Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants.
With varying padding example	Use the padding property to adjust the spacing within a card. You can also specify spacing values at different breakpoints.
Rounded corners	Cards have an 8px border radius by default. Rounding may also be applied responsively with the roundedAbove prop. This enables cards to be softened on larger screens, but squared off when they are full bleed on smaller devices.
Best practices	Cards should:
	Group related information
	Display information in a way that prioritizes what the merchant needs to know most first

Before and after

Link to Figma

[laurkim]

Resolved by #7568