@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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

@@ -0,0 +1,1970 @@
+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.
+
+[](./iframe.html?id=components-card--default)
+
+I'm a card
+
+```
+
+<IressCard\>
+  I'm a card
+</IressCard\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Simple cards
+
+All slots and props for card are optional. You can create a simple card by adding some content to the default slot.
+
+[](./iframe.html?id=components-card--simple)
+
+I'm a simple card
+
+```
+
+<IressCard\>
+  I'm a simple card
+</IressCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a simple card"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### Padding
+
+Padding can be controlled using the `padding` prop. It can be set to `none`, `sm`, `md` or `lg`. It defaults to `md`.
+
+[](./iframe.html?id=components-card--padding)
+
+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
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### Stretch
+
+The `stretch` prop can be used to stretch the card to fill its container.
+
+[](./iframe.html?id=components-card--stretch)
+
+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.
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### Selected
+
+Setting the `selected` prop highlights the card, usually to allow selection in a list.
+
+[](./iframe.html?id=components-card--selected)
+
+I'm a selected card
+
+```
+
+<IressCard selected\>
+  I'm a selected card
+</IressCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a selected card"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+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
+
+Use the `prepend` prop to add content to the left side of the card.
+
+[](./iframe.html?id=components-card-slots--prepend)
+
+I'm a card using the prepend render prop
+
+```
+
+<IressCard prepend\={<IressIcon name\="star" />}\>
+  I'm a card using the prepend render prop
+</IressCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card using the prepend render prop"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+prepend :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, fixedWidth, flip, name, rotate, screenreaderText, set = "fal", spin, ...restProps }) => { const prefix = "fa-"; const classes = icon({ flip, rotate, spin }); return /\* @\_\_PURE\_\_ \*/ jsxDEV( styled.span, { role: "img", className: cx( classes, GlobalCSSClass.Icon, set, \`${prefix}${name}\`, fixedWidth && "fa-fw", className ), "aria-hidden": !screenreaderText && "true", "aria-label": screenreaderText, ...restProps }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Icon/Icon.tsx", lineNumber: 67, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-card-slots--top-right)
+
+More actions in here
+
+I'm a card using the topRight render prop
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card using the topRight render prop"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+topRight :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type :
+    
+    {...} 3 keys
+    
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+
+### 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.
+
+[](./iframe.html?id=components-card-slots--heading)
+
+Welcome to Iress!
+-----------------
+
+I'm a card using the heading render prop
+
+```
+
+<IressCard heading\={<h2\>Welcome to Iress!</h2\>}\>
+  I'm a card using the heading render prop
+</IressCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card using the heading render prop"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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
+
+
+
+ | \- | 
+
+RAW
+
+heading :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "h2"
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-card-slots--media)
+
+![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
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card using the media render prop"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+media :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "img"
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-card-slots--content)
+
+Find out all the onboarding material you need [with this easy guide](https://iress.com).
+
+```
+
+<IressCard\>
+  <IressText\>
+    Find out all the onboarding material you need{' '}
+    <a href\="https://iress.com"\>
+      with this easy guide    </a\>
+    .  </IressText\>
+</IressCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+children :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => { \_s(); const Component = useMemo( () => styled(restProps.element ?? "div", text), \[restProps.element\] ); return /\* @\_\_PURE\_\_ \*/ jsxDEV( Component, { ...restProps, className: cx(className, GlobalCSSClass.Text) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Text/Text.tsx", lineNumber: 46, columnNumber: 5 }, this ); }
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-card-slots--footer)
+
+I'm a card using the footer render prop
+
+#new-starter#first-day
+
+NEW
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card using the footer render prop"
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | Set object |
+| footer | 
+
+Section that sticks to the bottom of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+RAW
+
+footer :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : ({ className, ...restProps }) => /\* @\_\_PURE\_\_ \*/ jsxDEV(Component, { ...restProps, className: cx(className, GlobalCSSClass.Inline) }, void 0, false, { fileName: "/home/runner/work/design-system/design-system/packages/components/src/components/Inline/Inline.tsx", lineNumber: 51, columnNumber: 1 }, this)
+*   key : null
+*   props :
+    
+    {...} 3 keys
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| heading | 
+
+Heading slot. Often used for a title or description.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### All slots
+
+You can use all the slots together to create a custom card layout.
+
+[](./iframe.html?id=components-card-slots--all-slots)
+
+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
+
+```
+
+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\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | \- |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | Set object |
+| footer | 
+
+Section that sticks to the bottom of the card
+
+ReactNode
+
+
+
+ | \- | \- |
+| heading | 
+
+Heading slot. Often used for a title or description.
+
+ReactNode
+
+
+
+ | \- | \- |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | \- |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | \- |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| stretch | 
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | \- |
+
+Clickable cards
+---------------
+
+Note: The `clickable` prop has been deprecated in favour of using component variations, or the `onClick` prop.
+
+### 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.
+
+[](./iframe.html?id=components-card-clickable--heading-only)
+
+[Clickable heading](https://iress.com)
+--------------------------------------
+
+I'm a card with a clickable heading. NEVER use me when the whole card is clickable.
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I'm a card with a clickable heading. NEVER use me when the whole card is clickable."
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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
+
+
+
+ | \- | 
+
+RAW
+
+heading :
+
+{
+
+*   $$typeof : Symbol(react.transitional.element)
+*   type : "h2"
+*   key : null
+*   props :
+    
+    {...} 1 key
+    
+*   \_owner : null
+*   \_store :
+    
+    {...} 0 keys
+    
+
+}
+
+
+
+
+
+
+
+ |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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.
+
+[](./iframe.html?id=components-card-clickable--whole-card)
+
+I am a card with an onClick handler. Click me to see what happens.
+
+```
+
+<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\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | 
+
+"I am a card with an onClick handler. Click me to see what happens."
+
+ |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| onClick | 
+
+function
+
+
+
+ | \- | \- |
+| onKeyDown | 
+
+function
+
+
+
+ | \- | \- |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| role | 
+
+string
+
+
+
+ | \- | button |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| tabIndex | 
+
+number
+
+
+
+ | \- |  |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+
+### 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`.
+
+[](./iframe.html?id=components-card-clickable--button-card)
+
+I am a card with a button element
+
+```
+
+<IressButtonCard
+  onClick\={() \=> alert("Card clicked")}
+  type\="button"
+\>
+  I am a card with a button element
+</IressButtonCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | Set object |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| onClick | 
+
+function
+
+
+
+ | \- | \- |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |
+| type | 
+
+string
+
+
+
+ | \- | button |
+
+[](./iframe.html?id=components-card-clickable--link-card)
+
+[I am a card with an anchor element](https://iress.com)
+
+```
+
+<IressLinkCard
+  href\="https://iress.com"
+  target\="\_blank"
+\>
+  I am a card with an anchor element
+</IressLinkCard\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Main body of the card
+
+ReactNode
+
+
+
+ | \- | Set object |
+| element | 
+
+Element type to render the Card as.
+
+E
+
+
+
+ | \- | 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 |
+| href | 
+
+string
+
+
+
+ | \- | https://iress.com |
+| media | 
+
+Section (often for an image, table or chart) that appears before the heading
+
+ReactNode
+
+
+
+ | \- | Set object |
+| prepend | 
+
+Slot to the left of card content.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| selected | 
+
+When set to true, card appears selected.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| target | 
+
+string
+
+
+
+ | \- | \_blank |
+| topRight | 
+
+Slot positioned to the top right of the card, often used for an icon or action menu
+
+ReactNode
+
+
+
+ | \- | Set object |