@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/components-card-docs.md

@@ -1,944 +0,0 @@
-[](#card)Card
-=============
-
-Overview
---------
-
-Cards are used to group small, related pieces of information into one digestible unit.
-
-* * *
-
-Updated
-
-**Recently updated**
-
-This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
-
-Read more
-
-A single card will typically include a few different types of media, such as an image, a title, a synopsis, a call-to-action button or sub actions buttons - all associated with the same concept.
-
-Cards can be configured in a variety of ways. You can use the render props (slots) if you want to create a structured layout, or you can create a custom card with your own markup if you need more flexibility.
-
-I'm a card
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard\>
-  I'm a card
-</IressCard\>
-
-Copy
-
-[](#props)Props
----------------
-
-| Name | Description | Default | Control |
-| --- | --- | --- | --- |
-| bg | 
-**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
-
-We recommend using the following token values for best background contrast:
-
-*   `colour.primary.fill` for primary backgrounds that need to stand out
-*   `colour.primary.surface` for primary backgrounds that need to be less prominent
-*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
-*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
-*   `colour.system.danger.fill` for error backgrounds that need to stand out
-*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
-*   `colour.system.success.fill` for success backgrounds that need to stand out
-*   `colour.system.success.surface` for success backgrounds that need to be less prominent
-*   `colour.system.warning.fill` for warning backgrounds that need to stand out
-*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
-*   `colour.system.info.fill` for info backgrounds that need to stand out
-*   `colour.system.info.surface` for info backgrounds that need to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| borderRadius | 
-
-The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **4** | **4** | **5** | **12** | **9** |
-| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
-
-ResponsiveProp<RadiusToken> | undefined
-
- | \- | Set object |
-| children | 
-
-Main body of the card
-
-ReactNode
-
-
-
- | \- | 
-
-"I'm a card"
-
- |
-| color | 
-
-The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
-
-We recommend using the following token values for best color contrast:
-
-*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
-*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
-*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
-*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
-*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
-*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
-*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
-*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
-*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
-*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
-*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
-*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
-
-ResponsiveProp<ColorToken> | undefined
-
- | \- | Set object |
-| element | 
-
-Element type to render the Card as.
-
-ElementTypeundefined
-
-
-
- | \- | Set object |
-| focusable | 
-
-The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
-
-"true""within"undefined
-
-
-
- | \- | Set object |
-| footer | 
-
-Section that sticks to the bottom of the card
-
-ReactNode
-
-
-
- | \- | Set object |
-| heading | 
-
-Heading slot. Often used for a title or description.
-
-ReactNode
-
-
-
- | \- | Set object |
-| hide | 
-
-Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-Notes:
-
-*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
-*   Consider if you can conditionally render the element instead of hiding it.
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| layerStyle | 
-
-Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
-
-*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
-*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
-*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
-
-ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
-
- | \- | Set object |
-| m | 
-
-The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| maxWidth | 
-
-The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **7** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-| mb | 
-
-The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| media | 
-
-Section (often for an image, table or chart) that appears before the heading
-
-ReactNode
-
-
-
- | \- | Set object |
-| ml | 
-
-The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mr | 
-
-The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mt | 
-
-The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
-
-It uses the spacing tokens in the design system.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| mx | 
-
-The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| my | 
-
-The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<SpacingToken | "auto"> | undefined
-
- | \- | Set object |
-| noGutter | 
-
-The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| p | 
-
-The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pb | 
-
-The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pl | 
-
-The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| pr | 
-
-The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| prepend | 
-
-Slot to the left of card content.
-
-ReactNode
-
-
-
- | \- | Set object |
-| pt | 
-
-The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| px | 
-
-The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| py | 
-
-The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
-
-It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| rowGap | 
-
-The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-
-Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **47** | **52** | **10.1** | **16** | No |
-
-ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
-
- | \- | Set object |
-| selected | 
-
-When set to true, card appears selected.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| srOnly | 
-
-Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
-
-Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
-
-ResponsiveProp<boolean> | undefined
-
- | \- | Set object |
-| stretch | 
-
-The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
-
-booleanundefined
-
-
-
- | \- | Set object |
-| textAlign | 
-
-The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **3** |
-
-ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
-
- | \- | Set object |
-| textStyle | 
-
-Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
-
-*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
-*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
-*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
-*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
-*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
-*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
-*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
-*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
-*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
-
-ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
-
- | \- | Set object |
-| topRight | 
-
-Slot positioned to the top right of the card, often used for an icon or action menu
-
-ReactNode
-
-
-
- | \- | Set object |
-| width | 
-
-The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
-
-This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
-
-| Chrome | Firefox | Safari | Edge | IE |
-| --- | --- | --- | --- | --- |
-| **1** | **1** | **1** | **12** | **4** |
-
-ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
-
- | \- | Set object |
-
-[](#examples)Examples
----------------------
-
-### [](#simple-cards)Simple cards
-
-All slots and props for card are optional. You can create a simple card by adding some content to the default slot.
-
-I'm a simple card
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard\>
-  I'm a simple card
-</IressCard\>
-
-Copy
-
-### [](#padding)Padding
-
-Padding can be controlled using the `padding` prop. It can be set to `none`, `sm`, `md` or `lg`. It defaults to `md`.
-
-I’m a card with none padding
-
-I’m a card with sm padding
-
-I’m a card with md padding
-
-I’m a card with lg padding
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gap\="md"\>
-  <IressCard p\="none"\>
-    I’m a card with none padding  </IressCard\>
-  <IressCard p\="sm"\>
-    I’m a card with sm padding  </IressCard\>
-  <IressCard p\="md"\>
-    I’m a card with md padding  </IressCard\>
-  <IressCard p\="lg"\>
-    I’m a card with lg padding  </IressCard\>
-</IressStack\>
-
-Copy
-
-### [](#stretch)Stretch
-
-The `stretch` prop can be used to stretch the card to fill its container.
-
-I’m a stretched card
-
-I’m a card with lots of content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressRow
-  gutter\="md"
-  verticalAlign\="stretch"
-\>
-  <IressCol\>
-    <IressCard stretch\>
-      I’m a stretched card    </IressCard\>
-  </IressCol\>
-  <IressCol\>
-    <IressCard\>
-      I’m a card with lots of content. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.    </IressCard\>
-  </IressCol\>
-</IressRow\>
-
-Copy
-
-### [](#selected)Selected
-
-Setting the `selected` prop highlights the card, usually to allow selection in a list.
-
-I'm a selected card
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard selected\>
-  I'm a selected card
-</IressCard\>
-
-Copy
-
-[](#render-props-slots)Render props (slots)
--------------------------------------------
-
-If you're coming from v4 or earlier, you might be used to slots. In v5, we've replaced slots with render props which align with the React API. Render props allow you to create a structured layout for your card, while still having the flexibility to add custom content. They are simply functions that return JSX, so you can pass any component you like.
-
-However, please be diligent as the component you use may not fit withing the confines of the `IressCard` layout.
-
-### [](#prepend)Prepend
-
-Use the `prepend` prop to add content to the left side of the card.
-
-I'm a card using the prepend render prop
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard prepend\={<IressIcon name\="star" />}\>
-  I'm a card using the prepend render prop
-</IressCard\>
-
-Copy
-
-### [](#top-right)Top Right
-
-Use the `topRight` prop to add content to the top right of the card. This is useful for adding a badge, icon, or an actions menu.
-
-More actions in here
-
-I'm a card using the topRight render prop
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard topRight\={<IressPopover activator\={<IressButton mode\="tertiary" textStyle\="typography.body.lg"\><IressIcon name\="ellipsis-v" /></IressButton\>} align\="bottom-end"\><IressPanel\>More actions in here</IressPanel\></IressPopover\>}\>
-  I'm a card using the topRight render prop
-</IressCard\>
-
-Copy
-
-### [](#heading)Heading
-
-Use the `heading` prop to add a header to the card. The header can be any component you like, but it is designed to support a simple heading element, optionally wrapped with a link.
-
-**Note:** `headingText` and `headingLevel` props have been replaced with the `heading` render prop to give you more control over the heading element and its content. To use the previous behaviour, you can pass a string which will automatically create a `h2` element, or pass a `h*` element with the text as a child.
-
-Welcome to Iress!
------------------
-
-I'm a card using the heading render prop
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard heading\={<h2\>Welcome to Iress!</h2\>}\>
-  I'm a card using the heading render prop
-</IressCard\>
-
-Copy
-
-### [](#media)Media
-
-Use the `media` prop to add media to the card. The media can be any component you like, but it is designed to support an image or video.
-
-![A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground](https://www.iress.com/media/images/media-contact.width-600.png)
-
-I'm a card using the media render prop
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard media\={<img alt\="A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground" src\="https://www.iress.com/media/images/media-contact.width-600.png" width\="250"/>}\>
-  I'm a card using the media render prop
-</IressCard\>
-
-Copy
-
-### [](#content)Content
-
-Use the `content` prop to add content to the card. The content can be any component you like, but it is designed to support simple text based elements.
-
-Find out all the onboarding material you need [with this easy guide](https://iress.com).
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard\>
-  <IressText\>
-    Find out all the onboarding material you need{' '}
-    <a href\="https://iress.com"\>
-      with this easy guide    </a\>
-    .  </IressText\>
-</IressCard\>
-
-Copy
-
-### [](#footer)Footer
-
-Use the `footer` prop to add a footer to the card. The footer can be any component you like, but it is designed to support buttons.
-
-I'm a card using the footer render prop
-
-#new-starter#first-day
-
-NEW
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard footer\={<IressInline gap\="sm" horizontalAlign\="between"\><IressInline gap\="sm"\><IressBadge pill\>#new-starter</IressBadge\><IressBadge pill\>#first-day</IressBadge\></IressInline\><IressBadge mode\="success"\>NEW</IressBadge\></IressInline\>}\>
-  I'm a card using the footer render prop
-</IressCard\>
-
-Copy
-
-### [](#all-slots)All slots
-
-You can use all the slots together to create a custom card layout.
-
-prepend
-
-media
-
-heading
-
-topRight
-
-children
-
-footer
-
-* * *
-
-More actions in here
-
-![A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground](https://www.iress.com/media/images/media-contact.width-600.png)
-
-Welcome to Iress!
------------------
-
-Find out all the onboarding material you need [with this easy guide](https://iress.com).
-
-#new-starter#first-day
-
-NEW
-
-More actions in here
-
-![A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground](https://www.iress.com/media/images/media-contact.width-600.png)
-
-Welcome to Iress!
------------------
-
-Find out all the onboarding material you need [with this easy guide](https://iress.com).
-
-#new-starter#first-day
-
-NEW
-
-More actions in here
-
-![A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground](https://www.iress.com/media/images/media-contact.width-600.png)
-
-Welcome to Iress!
------------------
-
-Find out all the onboarding material you need [with this easy guide](https://iress.com).
-
-#new-starter#first-day
-
-NEW
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-const supportedCardSlots \= {
-  prepend: <IressIcon name\="star" />,
-  media: (
-    <img
-      src\="https://www.iress.com/media/images/media-contact.width-600.png"
-      width\="250"
-      alt\="A man in an Iress branded t-shirt smiles at the camera while two female colleagues have a discussion in the foreground"
-    />
-  ),
-  heading: <h2\>Welcome to Iress!</h2\>,
-  topRight: (
-    <IressPopover
-      align\="bottom-end"
-      activator\={
-        <IressButton mode\="tertiary" textStyle\="typography.body.lg"\>
-          <IressIcon name\="ellipsis-v" />
-        </IressButton\>
-      }
-    \>
-      <IressPanel\>More actions in here</IressPanel\>
-    </IressPopover\>
-  ),
-  children: (
-    <IressText\>
-      Find out all the onboarding material you need{' '}
-      <a href\="https://iress.com"\>with this easy guide</a\>.
-    </IressText\>
-  ),
-  footer: (
-    <IressInline gap\="sm" horizontalAlign\="between"\>
-      <IressInline gap\="sm"\>
-        <IressBadge pill\>#new-starter</IressBadge\>
-        <IressBadge pill\>#first-day</IressBadge\>
-      </IressInline\>
-      <IressBadge mode\="success"\>NEW</IressBadge\>
-    </IressInline\>
-  ),
-};
-const SUPPORTED\_CARD\_SLOTS \= Object.keys(supportedCardSlots);
-type SupportedCardSlots \= keyof typeof supportedCardSlots;
-
-export const CardAllSlots \= () \=> {
-  const \[show, setShow\] \= useState({
-    children: true,
-    prepend: false,
-    media: true,
-    heading: true,
-    topRight: true,
-    footer: true,
-  });
-  const filteredArgs \= Object.fromEntries(
-    Object.entries(supportedCardSlots).filter(
-      (\[key\]) \=> show\[key as SupportedCardSlots\] || !(key in show),
-    ),
-  );
-  return (
-    <IressStack maxWidth\="container.lg" gap\="md" mx\="auto"\>
-      <IressInline gap\="md"\>
-        {SUPPORTED\_CARD\_SLOTS.map((slot) \=> (
-          <IressToggle
-            key\={slot}
-            checked\={show\[slot as never\]}
-            onChange\={(checked) \=> {
-              setShow({ ...show, \[slot\]: checked });
-            }}
-          \>
-            {slot}
-          </IressToggle\>
-        ))}
-      </IressInline\>
-      <IressDivider />
-      <IressRow gutter\="md"\>
-        <IressCol\>
-          <IressCard {...filteredArgs} />
-        </IressCol\>
-        <IressCol\>
-          <IressCard {...filteredArgs} />
-        </IressCol\>
-        <IressCol\>
-          <IressCard {...filteredArgs} />
-        </IressCol\>
-      </IressRow\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-[](#clickable-cards)Clickable cards
------------------------------------
-
-Note: The `clickable` prop has been deprecated in favour of using component variations, or the `onClick` prop.
-
-### [](#heading-only)Heading only
-
-Since the `heading` prop now renders the component you give it, you have full control over the content of the `heading`. This means you can add pass it a heading with a link.
-
-[Clickable heading](https://iress.com)
---------------------------------------
-
-I'm a card with a clickable heading. NEVER use me when the whole card is clickable.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard heading\={<h2\><a href\="https://iress.com"\>Clickable heading</a\></h2\>}\>
-  I'm a card with a clickable heading. NEVER use me when the whole card is clickable.
-</IressCard\>
-
-Copy
-
-### [](#whole-card)Whole card
-
-The whole card can be made clickable by passing an `onClick` prop. All the appropriate styling will be added as well.
-
-It's recommended to add `role="button"` and `tabindex="0"` to the card to make it clear to screen readers that the card is clickable.
-
-I am a card with an onClick handler. Click me to see what happens.
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressCard
-  onClick\={() \=> alert("Card clicked")}
-  onKeyDown\={() \=> alert("Key down on card (for keyboard users)")}
-  role\="button"
-  tabIndex\={0}
-\>
-  I am a card with an onClick handler. Click me to see what happens.
-</IressCard\>
-
-Copy
-
-### [](#links-and-buttons)Links and Buttons
-
-To simplify the process of making the whole card clickable, you can use the `IressLinkCard` and `IressButtonCard` components. These components look exactly the same as the `IressCard` component, however their base tags are different, allowing you to use them exactly like you would a html link and button.
-
-**Note:** These components replace the `button`, `clickable` and `href` props. You no longer need `button` and `clickable`, as these are automatically inferred. To mimic the `href` prop, simply change the component you are using to `IressLinkCard`.
-
-I am a card with a button element
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressButtonCard
-  onClick\={() \=> alert("Card clicked")}
-  type\="button"
-\>
-  I am a card with a button element
-</IressButtonCard\>
-
-Copy
-
-[I am a card with an anchor element](https://iress.com)
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressLinkCard
-  href\="https://iress.com"
-  target\="\_blank"
-\>
-  I am a card with an anchor element
-</IressLinkCard\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Simple cards](#simple-cards)
-    *   [Padding](#padding)
-    *   [Stretch](#stretch)
-    *   [Selected](#selected)
-*   [Render props (slots)](#render-props-slots)
-    *   [Prepend](#prepend)
-    *   [Top Right](#top-right)
-    *   [Heading](#heading)
-    *   [Media](#media)
-    *   [Content](#content)
-    *   [Footer](#footer)
-    *   [All slots](#all-slots)
-*   [Clickable cards](#clickable-cards)
-    *   [Heading only](#heading-only)
-    *   [Whole card](#whole-card)
-    *   [Links and Buttons](#links-and-buttons)