Document Snaps Card Component (#1707)

* Document Snaps Card Component

This closes #1593

Also updates What's New to include Card and Section components.

* Add PRs and fix links in What's New

* Update image sizing for Card example

* Add an info section for Card and reorder the params.

* Update docs/whats-new.md

---------

Co-authored-by: Alexandra Carrillo <[email protected]>

Author: Montoya

docs/whats-new.md

@@ -9,6 +9,11 @@ The latest major MetaMask documentation updates are listed by the month they wer
 For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom
 of the [MetaMask developer page](https://metamask.io/developer/).
 
+## November 2024
+
+- Documented Snaps [`Card`](/snaps/features/custom-ui/#card) and [`Section`](/snaps/features/custom-ui/#section) UI components.
+([#1707](https://github.com/MetaMask/metamask-docs/pull/1707)) ([#1700](https://github.com/MetaMask/metamask-docs/pull/1700))
+
 ## October 2024
 
 - Documented support for [non-EVM networks](/wallet/how-to/use-non-evm-networks), starting with [Starknet](/wallet/how-to/use-non-evm-networks/starknet). ([#1509](https://github.com/MetaMask/metamask-docs/pull/1509))

snaps/assets/custom-ui-card.png

@@ -203,6 +203,66 @@ await snap.request({
 <img src={require("../../assets/custom-ui-button.png").default} alt="Button UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
+### `Card`
+
+Outputs a card component which is used to display values in a card structure. 
+
+:::info
+Unlike many `Card` components from other UI libraries, the Snaps `Card` does not have any shape.
+It is only used for layout. To give a shape to a `Card`, wrap it in a [`Section`](#section) component.
+:::
+
+#### Props
+
+- `title`: `string` - The title of the card.
+- `value`: `string` - The value, shown on the right side. 
+- `image`: `string` - (Optional) An image shown on the left side. Accepts inline SVG.
+- `description`: `string` - (Optional) A description, shown below the title.
+- `extra`: `string` - (Optional) Additional text shown below the value.
+
+#### Example
+
+```js
+import icon from "./../img/icon.svg"
+
+export const onHomePage: OnHomePageHandler = async () => {
+  return {
+    content: (
+      <Box>
+        <Card 
+          image={icon} 
+          title="Card title" 
+          description="Card description" 
+          value="Card value" 
+          extra="Extra value"
+        />
+        <Card 
+          title="Minimal card" 
+          value="Example value" 
+        />
+        <Section>
+          <Card 
+            image={icon} 
+            title="Card title" 
+            description="Card description" 
+            value="Card value" 
+            extra="Extra value"
+          />
+          <Card 
+            title="Minimal card" 
+            value="Example value" 
+          />
+        </Section>
+      </Box>
+    ),
+  };
+};
+```
+
+<p align="center">
+<img src={require("../../assets/custom-ui-card.png").default} alt="Card UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
+</p>
+
 ### `Checkbox`
 
 Outputs a checkbox for use in [interactive UI](interactive-ui.md).