@utilitywarehouse/hearth-react 0.31.9 → 0.32.1

package/public/llms/components/card.md

@@ -1,6 +1,11 @@
 # Card
 
-Use Cards as containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.
+Use Card as a container for concise information about a single subject:
+featured information, related content, or navigational choices. In groups,
+cards present collections of similar content and should be rendered as list
+items. Cards are static by default; wrap an interactive child (a link or
+button) in `CardInteraction` to make the whole card clickable. For
+highlighting key marketing messaging, use HighlightBanner instead.
 
 - [Components](#components)
 - [Alternatives](#alternatives)
@@ -53,7 +58,7 @@ The `variant` prop controls the visual weight of the card. Use `subtle` for a lo
 
 ## Color Scheme
 
-The `colorScheme` prop sets the colour family applied to the card surface. It works in combination with `variant` — `subtle` applies a light tint of the colour, while `emphasis` uses a stronger fill. All available colour schemes are shown below, each with both variants.
+The `colorScheme` prop sets the colour family applied to the card surface. It works in combination with `variant`: `subtle` applies a light tint of the colour, while `emphasis` uses a stronger fill. All available colour schemes are shown below, each with both variants.
 
 > **Note:** The `highlight` colour scheme is only available with the `subtle` variant.
 
@@ -409,7 +414,7 @@ clickable, but do not overlay the primary action.
 
 You can set a shadow on the `Card` component using the `shadowColor` prop.
 
-Shadows serve as a visual cue for interactivity. While interactive cards do not
+Shadows are a visual cue for interactivity. While interactive cards do not
 require a shadow, shadows should only be applied to cards that contain an
 action. Don't apply a shadow to a static card.
 
@@ -727,62 +732,62 @@ This component is based on the `Flex` component and supports the following commo
 - Opacity
 - Order
 
-| Prop              | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                            |
-| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`         | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                         | —       | Set responsive spacing between child elements.                                                                                                         |
-| `display`         | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —       |                                                                                                                                                        |
-| `direction`       | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`                                                                                                                                       | —       |                                                                                                                                                        |
-| `wrap`            | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | —       |                                                                                                                                                        |
-| `alignContent`    | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       |                                                                                                                                                        |
-| `alignItems`      | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —       |                                                                                                                                                        |
-| `alignSelf`       | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `flex`            | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexBasis`       | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexShrink`      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexGrow`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gap`             | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `rowGap`          | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `columnGap`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `gridColumnSpan`  | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —       |                                                                                                                                                        |
-| `gridArea`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumn`      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnStart` | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnEnd`   | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRow`         | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowStart`    | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowEnd`      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `justifyContent`  | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
-| `margin`          | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginTop`       | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginRight`     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginBottom`    | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginLeft`      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginX`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginY`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `opacity`         | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `order`           | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `overflow`        | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowX`       | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowY`       | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `position`        | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | —       |                                                                                                                                                        |
-| `inset`           | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `top`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `right`           | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `bottom`          | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `left`            | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `width`           | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxWidth`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minWidth`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `height`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxHeight`       | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minHeight`       | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `textAlign`       | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —       |                                                                                                                                                        |
-| `textTransform`   | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —       | Set the text-transform on the component.                                                                                                               |
-| `zIndex`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `variant`         | `"emphasis" \| "subtle"`                                                                                                                                                                                   | —       | Sets the card's visual variant                                                                                                                         |
-| `colorScheme`     | `"brand" \| "mobile" \| "neutralStrong" \| "neutralSubtle" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"`                                                                | —       | Sets the card's colour scheme                                                                                                                          |
-| `paddingNone`     | `boolean`                                                                                                                                                                                                  | —       | Remove padding                                                                                                                                         |
-| `shadowColor`     | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"`                                                                                                     | —       | Sets the card shadow colour                                                                                                                            |
+| Prop              | Type                                                                                                                                                                                                       | Default     | Description                                                                                                                                               |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `spacing`         | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                         | —           | Set responsive spacing between child elements.                                                                                                            |
+| `display`         | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —           | Sets the CSS `display` property to a flex value. Can be set responsively.                                                                                 |
+| `direction`       | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`                                                                                                                                       | `row`       | Sets the direction of the flex container's main axis. Can be set responsively.                                                                            |
+| `wrap`            | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | `nowrap`    | Sets whether flex items wrap onto multiple lines. Can be set responsively.                                                                                |
+| `alignContent`    | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | Set how a flex or grid container distributes space between and around its lines when there is extra space in the cross axis. Supports responsive values.  |
+| `alignItems`      | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —           | Set how a flex or grid container aligns its items along the cross axis. Supports responsive values.                                                       |
+| `alignSelf`       | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —           | Override the container's `align-items` value for this individual flex or grid item, aligning it along the cross axis. Supports responsive values.         |
+| `flex`            | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `flex-grow`, `flex-shrink` and `flex-basis`, controlling how a flex item grows or shrinks to fit the space available in its flex container. |
+| `flexBasis`       | `Responsive<string>`                                                                                                                                                                                       | —           | Set the initial main-size of a flex item before remaining space is distributed along the main axis.                                                       |
+| `flexShrink`      | `Responsive<string>`                                                                                                                                                                                       | `1`         | Set how much a flex item shrinks relative to the rest of the flex items when there isn't enough space in the container.                                   |
+| `flexGrow`        | `Responsive<string>`                                                                                                                                                                                       | `0`         | Set how much a flex item grows relative to the rest of the flex items when there is extra space in the container.                                         |
+| `gap`             | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Shorthand for `row-gap` and `column-gap`, setting the space between rows and columns in a flex or grid container. Supports responsive values.             |
+| `rowGap`          | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between rows in a flex or grid container. Supports responsive values.                                                                       |
+| `columnGap`       | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between columns in a flex or grid container. Supports responsive values.                                                                    |
+| `gridColumnSpan`  | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —           | Set the number of grid columns this item spans. Supports responsive values.                                                                               |
+| `gridArea`        | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, placing an item within a named grid area or by line numbers.   |
+| `gridColumn`      | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-column-start` and `grid-column-end`, setting an item's size and location within the grid column.                                      |
+| `gridColumnStart` | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid column.                                                                                                       |
+| `gridColumnEnd`   | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid column.                                                                                                         |
+| `gridRow`         | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start` and `grid-row-end`, setting an item's size and location within the grid row.                                               |
+| `gridRowStart`    | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid row.                                                                                                          |
+| `gridRowEnd`      | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid row.                                                                                                            |
+| `justifyContent`  | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property.    |
+| `margin`          | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin` CSS property on all sides of the element.                                                                                    |
+| `marginTop`       | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` CSS property.                                                                                                            |
+| `marginRight`     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-right` CSS property.                                                                                                          |
+| `marginBottom`    | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-bottom` CSS property.                                                                                                         |
+| `marginLeft`      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` CSS property.                                                                                                           |
+| `marginX`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` and `margin-right` CSS properties.                                                                                      |
+| `marginY`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` and `margin-bottom` CSS properties.                                                                                      |
+| `opacity`         | `Responsive<string>`                                                                                                                                                                                       | —           | Set the transparency of an element, from `0` (fully transparent) to `1` (fully opaque). Supports responsive values.                                       |
+| `order`           | `Responsive<string>`                                                                                                                                                                                       | —           | Set the order in which the component appears among its flex or grid siblings.                                                                             |
+| `overflow`        | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled, on both axes.                                                                              |
+| `overflowX`       | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the horizontal axis.                                                                     |
+| `overflowY`       | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the vertical axis.                                                                       |
+| `position`        | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | `'static'`  | Set how the component is positioned in the document.                                                                                                      |
+| `inset`           | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of all four edges (top, right, bottom, left) of a positioned component from its containing block.                                        |
+| `top`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the top edge of a positioned component from its containing block.                                                                     |
+| `right`           | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the right edge of a positioned component from its containing block.                                                                   |
+| `bottom`          | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the bottom edge of a positioned component from its containing block.                                                                  |
+| `left`            | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the left edge of a positioned component from its containing block.                                                                    |
+| `width`           | `Responsive<string>`                                                                                                                                                                                       | —           | Set the width of the component.                                                                                                                           |
+| `maxWidth`        | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum width the component can grow to.                                                                                                          |
+| `minWidth`        | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum width the component can shrink to.                                                                                                        |
+| `height`          | `Responsive<string>`                                                                                                                                                                                       | —           | Set the height of the component.                                                                                                                          |
+| `maxHeight`       | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum height the component can grow to.                                                                                                         |
+| `minHeight`       | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum height the component can shrink to.                                                                                                       |
+| `textAlign`       | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —           | Set the horizontal alignment of text within the component.                                                                                                |
+| `textTransform`   | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —           | Set the text-transform on the component.                                                                                                                  |
+| `zIndex`          | `Responsive<string>`                                                                                                                                                                                       | —           | Set the stack order of a positioned component relative to its siblings.                                                                                   |
+| `variant`         | `"emphasis" \| "subtle"`                                                                                                                                                                                   | —           | Sets the card's visual variant                                                                                                                            |
+| `colorScheme`     | `"brand" \| "mobile" \| "neutralStrong" \| "neutralSubtle" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"`                                                                | —           | Sets the card's colour scheme                                                                                                                             |
+| `paddingNone`     | `boolean`                                                                                                                                                                                                  | —           | Remove padding                                                                                                                                            |
+| `shadowColor`     | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"`                                                                                                     | —           | Sets the card shadow colour                                                                                                                               |
 
 ### CardInteraction API
 
@@ -797,184 +802,184 @@ This component is based on the `ul` element and supports the following common pr
 | Prop        | Type                            | Default | Description                                                                                      |
 | ----------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
 | `as`        | `"ul" \| "ol"`                  | `ul`    | Shorthand for changing the default rendered element into a semantically appropriate alternative. |
-| `direction` | `Responsive<"column" \| "row">` | —       |                                                                                                  |
+| `direction` | `Responsive<"column" \| "row">` | `row`   | Sets the direction actions are laid out in.                                                      |
 
 ### CardActionLink API
 
 This component is based on the `a` element.
 
-| Prop                              | Type                                                                                       | Default    | Description                                                         |
-| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------------------------------- |
-| `heading`                         | `string`                                                                                   | —          |                                                                     |
-| `helperText`                      | `string`                                                                                   | —          | Optional helper text to provide additional context or instructions. |
-| `leadingIcon`                     | `ReactNode`                                                                                | —          |                                                                     |
-| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | —          |                                                                     |
-| `trailingIcon`                    | `ReactNode`                                                                                | —          |                                                                     |
-| `badge`                           | `ReactNode`                                                                                | —          |                                                                     |
-| `badgePlacement`                  | `"middle" \| "bottom" \| "right"`                                                          | `'bottom'` | Placement of the badge element                                      |
-| `asChild`                         | `boolean`                                                                                  | —          |                                                                     |
+| Prop                              | Type                                                                                       | Default    | Description                                                                                                                               |
+| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `heading`                         | `string`                                                                                   | —          | The action's heading text.                                                                                                                |
+| `helperText`                      | `string`                                                                                   | —          | Optional helper text to provide additional context or instructions.                                                                       |
+| `leadingIcon`                     | `ReactNode`                                                                                | —          | Optional icon shown at the start of the action.                                                                                           |
+| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | —          | Sets the colour scheme of the container rendered around `leadingIcon`. When unset, `leadingIcon` renders without a container.             |
+| `trailingIcon`                    | `ReactNode`                                                                                | —          | Optional icon shown at the end of the action. Defaults to a chevron icon when not set.                                                    |
+| `badge`                           | `ReactNode`                                                                                | —          | Optional badge shown alongside the action.                                                                                                |
+| `badgePlacement`                  | `"middle" \| "bottom" \| "right"`                                                          | `'bottom'` | Placement of the badge element                                                                                                            |
+| `asChild`                         | `boolean`                                                                                  | —          | Merges the component's props onto its immediate child instead of rendering its own `a` element, so the child determines the rendered tag. |
 
 ### CardActionButton API
 
 This component is based on the `button` element.
 
-| Prop                              | Type                                                                                       | Default    | Description                                                         |
-| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------------------------------- |
-| `heading`                         | `string`                                                                                   | —          |                                                                     |
-| `helperText`                      | `string`                                                                                   | —          | Optional helper text to provide additional context or instructions. |
-| `leadingIcon`                     | `ReactNode`                                                                                | —          |                                                                     |
-| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | —          |                                                                     |
-| `trailingIcon`                    | `ReactNode`                                                                                | —          |                                                                     |
-| `badge`                           | `ReactNode`                                                                                | —          |                                                                     |
-| `badgePlacement`                  | `"middle" \| "bottom" \| "right"`                                                          | `'bottom'` | Placement of the badge element                                      |
+| Prop                              | Type                                                                                       | Default    | Description                                                                                                                   |
+| --------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `heading`                         | `string`                                                                                   | —          | The action's heading text.                                                                                                    |
+| `helperText`                      | `string`                                                                                   | —          | Optional helper text to provide additional context or instructions.                                                           |
+| `leadingIcon`                     | `ReactNode`                                                                                | —          | Optional icon shown at the start of the action.                                                                               |
+| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | —          | Sets the colour scheme of the container rendered around `leadingIcon`. When unset, `leadingIcon` renders without a container. |
+| `trailingIcon`                    | `ReactNode`                                                                                | —          | Optional icon shown at the end of the action. Defaults to a chevron icon when not set.                                        |
+| `badge`                           | `ReactNode`                                                                                | —          | Optional badge shown alongside the action.                                                                                    |
+| `badgePlacement`                  | `"middle" \| "bottom" \| "right"`                                                          | `'bottom'` | Placement of the badge element                                                                                                |
 
 ### CardContent API
 
 This component is based on the `Card` component, supporting the same props except for those related to appearance and polymorphism.
 
-| Prop                | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                            |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `spacing`           | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                         | —       | Set responsive spacing between child elements.                                                                                                         |
-| `display`           | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —       |                                                                                                                                                        |
-| `direction`         | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`                                                                                                                                       | —       |                                                                                                                                                        |
-| `wrap`              | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | —       |                                                                                                                                                        |
-| `alignContent`      | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       |                                                                                                                                                        |
-| `alignItems`        | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —       |                                                                                                                                                        |
-| `alignSelf`         | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `flex`              | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexBasis`         | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexShrink`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexGrow`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gap`               | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `rowGap`            | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `columnGap`         | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `gridColumnSpan`    | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —       |                                                                                                                                                        |
-| `gridArea`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumn`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnStart`   | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnEnd`     | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRow`           | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowStart`      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowEnd`        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `justifyContent`    | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
-| `margin`            | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginTop`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginRight`       | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginBottom`      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginLeft`        | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginX`           | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginY`           | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `opacity`           | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `order`             | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `overflow`          | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowX`         | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowY`         | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `position`          | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | —       |                                                                                                                                                        |
-| `inset`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `top`               | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `right`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `bottom`            | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `left`              | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `width`             | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxWidth`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minWidth`          | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `height`            | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxHeight`         | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minHeight`         | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `textAlign`         | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —       |                                                                                                                                                        |
-| `textTransform`     | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —       | Set the text-transform on the component.                                                                                                               |
-| `zIndex`            | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `paddingNone`       | `boolean`                                                                                                                                                                                                  | —       | Remove padding                                                                                                                                         |
-| `shadowColor`       | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"`                                                                                                     | —       | Sets the card shadow colour                                                                                                                            |
-| `paddingBottomNone` | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
+| Prop                | Type                                                                                                                                                                                                       | Default     | Description                                                                                                                                               |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `spacing`           | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`                                                                                                                                         | —           | Set responsive spacing between child elements.                                                                                                            |
+| `display`           | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —           | Sets the CSS `display` property to a flex value. Can be set responsively.                                                                                 |
+| `direction`         | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">`                                                                                                                                       | `row`       | Sets the direction of the flex container's main axis. Can be set responsively.                                                                            |
+| `wrap`              | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | `nowrap`    | Sets whether flex items wrap onto multiple lines. Can be set responsively.                                                                                |
+| `alignContent`      | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | Set how a flex or grid container distributes space between and around its lines when there is extra space in the cross axis. Supports responsive values.  |
+| `alignItems`        | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —           | Set how a flex or grid container aligns its items along the cross axis. Supports responsive values.                                                       |
+| `alignSelf`         | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —           | Override the container's `align-items` value for this individual flex or grid item, aligning it along the cross axis. Supports responsive values.         |
+| `flex`              | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `flex-grow`, `flex-shrink` and `flex-basis`, controlling how a flex item grows or shrinks to fit the space available in its flex container. |
+| `flexBasis`         | `Responsive<string>`                                                                                                                                                                                       | —           | Set the initial main-size of a flex item before remaining space is distributed along the main axis.                                                       |
+| `flexShrink`        | `Responsive<string>`                                                                                                                                                                                       | `1`         | Set how much a flex item shrinks relative to the rest of the flex items when there isn't enough space in the container.                                   |
+| `flexGrow`          | `Responsive<string>`                                                                                                                                                                                       | `0`         | Set how much a flex item grows relative to the rest of the flex items when there is extra space in the container.                                         |
+| `gap`               | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Shorthand for `row-gap` and `column-gap`, setting the space between rows and columns in a flex or grid container. Supports responsive values.             |
+| `rowGap`            | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between rows in a flex or grid container. Supports responsive values.                                                                       |
+| `columnGap`         | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between columns in a flex or grid container. Supports responsive values.                                                                    |
+| `gridColumnSpan`    | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —           | Set the number of grid columns this item spans. Supports responsive values.                                                                               |
+| `gridArea`          | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, placing an item within a named grid area or by line numbers.   |
+| `gridColumn`        | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-column-start` and `grid-column-end`, setting an item's size and location within the grid column.                                      |
+| `gridColumnStart`   | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid column.                                                                                                       |
+| `gridColumnEnd`     | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid column.                                                                                                         |
+| `gridRow`           | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start` and `grid-row-end`, setting an item's size and location within the grid row.                                               |
+| `gridRowStart`      | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid row.                                                                                                          |
+| `gridRowEnd`        | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid row.                                                                                                            |
+| `justifyContent`    | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property.    |
+| `margin`            | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin` CSS property on all sides of the element.                                                                                    |
+| `marginTop`         | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` CSS property.                                                                                                            |
+| `marginRight`       | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-right` CSS property.                                                                                                          |
+| `marginBottom`      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-bottom` CSS property.                                                                                                         |
+| `marginLeft`        | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` CSS property.                                                                                                           |
+| `marginX`           | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` and `margin-right` CSS properties.                                                                                      |
+| `marginY`           | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` and `margin-bottom` CSS properties.                                                                                      |
+| `opacity`           | `Responsive<string>`                                                                                                                                                                                       | —           | Set the transparency of an element, from `0` (fully transparent) to `1` (fully opaque). Supports responsive values.                                       |
+| `order`             | `Responsive<string>`                                                                                                                                                                                       | —           | Set the order in which the component appears among its flex or grid siblings.                                                                             |
+| `overflow`          | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled, on both axes.                                                                              |
+| `overflowX`         | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the horizontal axis.                                                                     |
+| `overflowY`         | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the vertical axis.                                                                       |
+| `position`          | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | `'static'`  | Set how the component is positioned in the document.                                                                                                      |
+| `inset`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of all four edges (top, right, bottom, left) of a positioned component from its containing block.                                        |
+| `top`               | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the top edge of a positioned component from its containing block.                                                                     |
+| `right`             | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the right edge of a positioned component from its containing block.                                                                   |
+| `bottom`            | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the bottom edge of a positioned component from its containing block.                                                                  |
+| `left`              | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the left edge of a positioned component from its containing block.                                                                    |
+| `width`             | `Responsive<string>`                                                                                                                                                                                       | —           | Set the width of the component.                                                                                                                           |
+| `maxWidth`          | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum width the component can grow to.                                                                                                          |
+| `minWidth`          | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum width the component can shrink to.                                                                                                        |
+| `height`            | `Responsive<string>`                                                                                                                                                                                       | —           | Set the height of the component.                                                                                                                          |
+| `maxHeight`         | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum height the component can grow to.                                                                                                         |
+| `minHeight`         | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum height the component can shrink to.                                                                                                       |
+| `textAlign`         | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —           | Set the horizontal alignment of text within the component.                                                                                                |
+| `textTransform`     | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —           | Set the text-transform on the component.                                                                                                                  |
+| `zIndex`            | `Responsive<string>`                                                                                                                                                                                       | —           | Set the stack order of a positioned component relative to its siblings.                                                                                   |
+| `paddingNone`       | `boolean`                                                                                                                                                                                                  | —           | Remove padding                                                                                                                                            |
+| `shadowColor`       | `"brand" \| "mobile" \| "energy" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "functional"`                                                                                                     | —           | Sets the card shadow colour                                                                                                                               |
+| `paddingBottomNone` | `boolean`                                                                                                                                                                                                  | —           | Removes the bottom padding, useful when `CardActions` sits directly below with no additional spacing needed.                                              |
 
 ### CardBannerContent API
 
 This component is based on the `Flex` component.
 
-| Prop                          | Type                                                                                                                                                                                                       | Default | Description                                                                                                                                            |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `asChild`                     | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `display`                     | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —       |                                                                                                                                                        |
-| `wrap`                        | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | —       |                                                                                                                                                        |
-| `alignContent`                | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       |                                                                                                                                                        |
-| `alignItems`                  | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —       |                                                                                                                                                        |
-| `alignSelf`                   | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `backgroundColor`             | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})``                                                                                                                                              | —       |                                                                                                                                                        |
-| `borderColor`                 | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —       |                                                                                                                                                        |
-| `borderTopColor`              | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —       |                                                                                                                                                        |
-| `borderRightColor`            | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —       |                                                                                                                                                        |
-| `borderBottomColor`           | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —       |                                                                                                                                                        |
-| `borderLeftColor`             | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —       |                                                                                                                                                        |
-| `borderRadius`                | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">`                                                                                                                        | —       |                                                                                                                                                        |
-| `borderRadiusTopLeftNone`     | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusTopRightNone`    | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusBottomLeftNone`  | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusBottomRightNone` | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusTopNone`         | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusRightNone`       | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusBottomNone`      | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderRadiusLeftNone`        | `boolean`                                                                                                                                                                                                  | —       |                                                                                                                                                        |
-| `borderStyle`                 | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —       |                                                                                                                                                        |
-| `borderTopStyle`              | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —       |                                                                                                                                                        |
-| `borderRightStyle`            | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —       |                                                                                                                                                        |
-| `borderBottomStyle`           | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —       |                                                                                                                                                        |
-| `borderLeftStyle`             | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —       |                                                                                                                                                        |
-| `borderWidth`                 | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `borderTopWidth`              | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `borderRightWidth`            | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `borderBottomWidth`           | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `borderLeftWidth`             | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —       |                                                                                                                                                        |
-| `color`                       | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})``                                                                                                               | —       |                                                                                                                                                        |
-| `flex`                        | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexBasis`                   | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexShrink`                  | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `flexGrow`                    | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gap`                         | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `rowGap`                      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `columnGap`                   | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `gridColumnSpan`              | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —       |                                                                                                                                                        |
-| `gridArea`                    | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumn`                  | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnStart`             | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridColumnEnd`               | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRow`                     | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowStart`                | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `gridRowEnd`                  | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `justifyContent`              | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —       | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
-| `margin`                      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginTop`                   | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginRight`                 | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginBottom`                | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginLeft`                  | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginX`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `marginY`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —       |                                                                                                                                                        |
-| `opacity`                     | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `order`                       | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `overflow`                    | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowX`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `overflowY`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | —       |                                                                                                                                                        |
-| `padding`                     | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingTop`                  | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingRight`                | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingBottom`               | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingLeft`                 | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingX`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `paddingY`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —       |                                                                                                                                                        |
-| `position`                    | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | —       |                                                                                                                                                        |
-| `inset`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `top`                         | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `right`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `bottom`                      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `left`                        | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —       |                                                                                                                                                        |
-| `width`                       | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `height`                      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `maxHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `minHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `textAlign`                   | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —       |                                                                                                                                                        |
-| `textTransform`               | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —       | Set the text-transform on the component.                                                                                                               |
-| `zIndex`                      | `Responsive<string>`                                                                                                                                                                                       | —       |                                                                                                                                                        |
-| `heading`                     | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                        |
-| `description`                 | `string`                                                                                                                                                                                                   | —       |                                                                                                                                                        |
+| Prop                          | Type                                                                                                                                                                                                       | Default     | Description                                                                                                                                               |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `asChild`                     | `boolean`                                                                                                                                                                                                  | `false`     | Merges the component's props onto its immediate child instead of rendering its own DOM element, so the child determines the rendered tag.                 |
+| `display`                     | `Responsive<"flex" \| "none" \| "inline-flex">`                                                                                                                                                            | —           | Sets the CSS `display` property to a flex value. Can be set responsively.                                                                                 |
+| `wrap`                        | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`                                                                                                                                                         | `nowrap`    | Sets whether flex items wrap onto multiple lines. Can be set responsively.                                                                                |
+| `alignContent`                | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | Set how a flex or grid container distributes space between and around its lines when there is extra space in the cross axis. Supports responsive values.  |
+| `alignItems`                  | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">`                                                                                                                                      | —           | Set how a flex or grid container aligns its items along the cross axis. Supports responsive values.                                                       |
+| `alignSelf`                   | `Responsive<"center" \| "start" \| "end" \| "stretch">`                                                                                                                                                    | —           | Override the container's `align-items` value for this individual flex or grid item, aligning it along the cross axis. Supports responsive values.         |
+| `backgroundColor`             | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})``                                                                                                                                              | —           | Sets the `background-color` CSS property.                                                                                                                 |
+| `borderColor`                 | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —           | Sets the `border-color` CSS property on all sides of the element.                                                                                         |
+| `borderTopColor`              | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —           | Sets the `border-top-color` CSS property.                                                                                                                 |
+| `borderRightColor`            | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —           | Sets the `border-right-color` CSS property.                                                                                                               |
+| `borderBottomColor`           | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —           | Sets the `border-bottom-color` CSS property.                                                                                                              |
+| `borderLeftColor`             | `"strong" \| `var(--h-${string})` \| "subtle"`                                                                                                                                                             | —           | Sets the `border-left-color` CSS property.                                                                                                                |
+| `borderRadius`                | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">`                                                                                                                        | —           | Sets the responsive `border-radius` CSS property on all corners of the element.                                                                           |
+| `borderRadiusTopLeftNone`     | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the top-left corner.                                                                                                       |
+| `borderRadiusTopRightNone`    | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the top-right corner.                                                                                                      |
+| `borderRadiusBottomLeftNone`  | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the bottom-left corner.                                                                                                    |
+| `borderRadiusBottomRightNone` | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the bottom-right corner.                                                                                                   |
+| `borderRadiusTopNone`         | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the top-left and top-right corners.                                                                                        |
+| `borderRadiusRightNone`       | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the top-right and bottom-right corners.                                                                                    |
+| `borderRadiusBottomNone`      | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the bottom-left and bottom-right corners.                                                                                  |
+| `borderRadiusLeftNone`        | `boolean`                                                                                                                                                                                                  | —           | Removes the border radius from the top-left and bottom-left corners.                                                                                      |
+| `borderStyle`                 | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —           | Sets the responsive `border-style` CSS property on all sides of the element.                                                                              |
+| `borderTopStyle`              | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —           | Sets the responsive `border-top-style` CSS property.                                                                                                      |
+| `borderRightStyle`            | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —           | Sets the responsive `border-right-style` CSS property.                                                                                                    |
+| `borderBottomStyle`           | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —           | Sets the responsive `border-bottom-style` CSS property.                                                                                                   |
+| `borderLeftStyle`             | `Responsive<"none" \| "solid">`                                                                                                                                                                            | —           | Sets the responsive `border-left-style` CSS property.                                                                                                     |
+| `borderWidth`                 | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —           | Sets the responsive `border-width` CSS property on all sides of the element.                                                                              |
+| `borderTopWidth`              | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —           | Sets the responsive `border-top-width` CSS property.                                                                                                      |
+| `borderRightWidth`            | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —           | Sets the responsive `border-right-width` CSS property.                                                                                                    |
+| `borderBottomWidth`           | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —           | Sets the responsive `border-bottom-width` CSS property.                                                                                                   |
+| `borderLeftWidth`             | `Responsive<`var(--h-${string})` \| "0" \| "1" \| "2">`                                                                                                                                                    | —           | Sets the responsive `border-left-width` CSS property.                                                                                                     |
+| `color`                       | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})``                                                                                                               | —           | Sets the text `color` CSS property.                                                                                                                       |
+| `flex`                        | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `flex-grow`, `flex-shrink` and `flex-basis`, controlling how a flex item grows or shrinks to fit the space available in its flex container. |
+| `flexBasis`                   | `Responsive<string>`                                                                                                                                                                                       | —           | Set the initial main-size of a flex item before remaining space is distributed along the main axis.                                                       |
+| `flexShrink`                  | `Responsive<string>`                                                                                                                                                                                       | `1`         | Set how much a flex item shrinks relative to the rest of the flex items when there isn't enough space in the container.                                   |
+| `flexGrow`                    | `Responsive<string>`                                                                                                                                                                                       | `0`         | Set how much a flex item grows relative to the rest of the flex items when there is extra space in the container.                                         |
+| `gap`                         | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Shorthand for `row-gap` and `column-gap`, setting the space between rows and columns in a flex or grid container. Supports responsive values.             |
+| `rowGap`                      | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between rows in a flex or grid container. Supports responsive values.                                                                       |
+| `columnGap`                   | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Set the space between columns in a flex or grid container. Supports responsive values.                                                                    |
+| `gridColumnSpan`              | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>`                                                                                           | —           | Set the number of grid columns this item spans. Supports responsive values.                                                                               |
+| `gridArea`                    | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`, placing an item within a named grid area or by line numbers.   |
+| `gridColumn`                  | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-column-start` and `grid-column-end`, setting an item's size and location within the grid column.                                      |
+| `gridColumnStart`             | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid column.                                                                                                       |
+| `gridColumnEnd`               | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid column.                                                                                                         |
+| `gridRow`                     | `Responsive<string>`                                                                                                                                                                                       | —           | Shorthand for `grid-row-start` and `grid-row-end`, setting an item's size and location within the grid row.                                               |
+| `gridRowStart`                | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's starting line within the grid row.                                                                                                          |
+| `gridRowEnd`                  | `Responsive<string>`                                                                                                                                                                                       | —           | Set an item's ending line within the grid row.                                                                                                            |
+| `justifyContent`              | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">`                                                                                                               | —           | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property.    |
+| `margin`                      | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin` CSS property on all sides of the element.                                                                                    |
+| `marginTop`                   | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` CSS property.                                                                                                            |
+| `marginRight`                 | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-right` CSS property.                                                                                                          |
+| `marginBottom`                | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-bottom` CSS property.                                                                                                         |
+| `marginLeft`                  | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` CSS property.                                                                                                           |
+| `marginX`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-left` and `margin-right` CSS properties.                                                                                      |
+| `marginY`                     | `Responsive<`var(--h-${string})` \| "auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | —           | Sets the responsive `margin-top` and `margin-bottom` CSS properties.                                                                                      |
+| `opacity`                     | `Responsive<string>`                                                                                                                                                                                       | —           | Set the transparency of an element, from `0` (fully transparent) to `1` (fully opaque). Supports responsive values.                                       |
+| `order`                       | `Responsive<string>`                                                                                                                                                                                       | —           | Set the order in which the component appears among its flex or grid siblings.                                                                             |
+| `overflow`                    | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled, on both axes.                                                                              |
+| `overflowX`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the horizontal axis.                                                                     |
+| `overflowY`                   | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">`                                                                                                                                        | `'visible'` | Set how content that overflows the component's box is handled on the vertical axis.                                                                       |
+| `padding`                     | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding` CSS property on all sides of the element.                                                                                   |
+| `paddingTop`                  | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-top` CSS property.                                                                                                           |
+| `paddingRight`                | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-right` CSS property.                                                                                                         |
+| `paddingBottom`               | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-bottom` CSS property.                                                                                                        |
+| `paddingLeft`                 | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-left` CSS property.                                                                                                          |
+| `paddingX`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-left` and `padding-right` CSS properties.                                                                                    |
+| `paddingY`                    | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">`           | —           | Sets the responsive `padding-top` and `padding-bottom` CSS properties.                                                                                    |
+| `position`                    | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">`                                                                                                                                  | `'static'`  | Set how the component is positioned in the document.                                                                                                      |
+| `inset`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of all four edges (top, right, bottom, left) of a positioned component from its containing block.                                        |
+| `top`                         | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the top edge of a positioned component from its containing block.                                                                     |
+| `right`                       | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the right edge of a positioned component from its containing block.                                                                   |
+| `bottom`                      | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the bottom edge of a positioned component from its containing block.                                                                  |
+| `left`                        | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>`                    | —           | Set the distance of the left edge of a positioned component from its containing block.                                                                    |
+| `width`                       | `Responsive<string>`                                                                                                                                                                                       | —           | Set the width of the component.                                                                                                                           |
+| `maxWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum width the component can grow to.                                                                                                          |
+| `minWidth`                    | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum width the component can shrink to.                                                                                                        |
+| `height`                      | `Responsive<string>`                                                                                                                                                                                       | —           | Set the height of the component.                                                                                                                          |
+| `maxHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —           | Set the maximum height the component can grow to.                                                                                                         |
+| `minHeight`                   | `Responsive<string>`                                                                                                                                                                                       | —           | Set the minimum height the component can shrink to.                                                                                                       |
+| `textAlign`                   | `Responsive<"center" \| "right" \| "left">`                                                                                                                                                                | —           | Set the horizontal alignment of text within the component.                                                                                                |
+| `textTransform`               | `"none" \| "uppercase" \| "lowercase" \| "capitalize"`                                                                                                                                                     | —           | Set the text-transform on the component.                                                                                                                  |
+| `zIndex`                      | `Responsive<string>`                                                                                                                                                                                       | —           | Set the stack order of a positioned component relative to its siblings.                                                                                   |
+| `heading`                     | `string`                                                                                                                                                                                                   | —           | The banner's heading text.                                                                                                                                |
+| `description`                 | `string`                                                                                                                                                                                                   | —           | Supporting text shown below the heading.                                                                                                                  |