# Card - Code

> Code examples and API documentation for the ix-action-card, ix-push-card, ix-card

# Card - Code

## Basic

### React Examples

#### card.tsx
```tsx
import './card.scoped.css';

import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-react';
import { iconCapacity } from '@siemens/ix-icons/icons';

export default () => {
  return (
    <IxCard variant="outline" onClick={console.log}>
      <IxCardContent>
        <IxIcon name={iconCapacity}></IxIcon>
        <IxTypography bold>Number of components</IxTypography>
        <IxTypography>
          Vanilla JavaScript
          <br />
          Angular
          <br />
          Blazor
          <br />
          React
          <br />
          Vue.js
        </IxTypography>
        <IxTypography format="h1">123</IxTypography>
      </IxCardContent>
    </IxCard>
  );
};
```

#### card.scoped.css
```css
ix-card {
  height: 15.75rem;
  width: 19.875rem;
  background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: no-repeat;
  cursor: pointer;
}

ix-card ix-typography:last-of-type {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
```

### Angular Examples

#### card.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './card.html',
  styleUrls: ['./card.css'],
})
export default class Card {
  onClick(event: Event) {
    console.log(event);
  }
}
```

#### card.html
```html
<ix-card (click)="onClick($event)" variant="outline">
  <ix-card-content>
    <ix-icon name="capacity"></ix-icon>
    <ix-typography bold>Number of components</ix-typography>
    <ix-typography>
      Vanilla JavaScript<br />
      Angular<br />
      Blazor<br />
      React<br />
      Vue.js
    </ix-typography>
    <ix-typography format="h1">123</ix-typography>
  </ix-card-content>
</ix-card>
```

#### card.css
```css
ix-card {
  height: 15.75rem;
  width: 19.875rem;
  background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: no-repeat;
  cursor: pointer;
}

ix-card ix-typography:last-of-type {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
```

### Angular Standalone Examples

#### card.ts
```ts
import { Component } from '@angular/core';
import {
  IxCard,
  IxCardContent,
  IxIcon,
  IxTypography,
} from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxCard, IxCardContent, IxIcon, IxTypography],
  templateUrl: './card.html',
  styleUrls: ['./card.css'],
})
export default class Card {
  onClick(event: Event) {
    console.log(event);
  }
}
```

#### card.html
```html
<ix-card (click)="onClick($event)" variant="outline">
  <ix-card-content>
    <ix-icon name="capacity"></ix-icon>
    <ix-typography bold>Number of components</ix-typography>
    <ix-typography>
      Vanilla JavaScript<br />
      Angular<br />
      Blazor<br />
      React<br />
      Vue.js
    </ix-typography>
    <ix-typography format="h1">123</ix-typography>
  </ix-card-content>
</ix-card>
```

#### card.css
```css
ix-card {
  height: 15.75rem;
  width: 19.875rem;
  background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: no-repeat;
  cursor: pointer;
}

ix-card ix-typography:last-of-type {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
```

### Vue Examples

#### card.vue
```vue
<script setup lang="ts">
import { iconCapacity } from '@siemens/ix-icons/icons';
import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-vue';

const onClick = (event: Event) => {
  console.log(event);
};
</script>

<style scoped src="./card.css"></style>

<template>
  <IxCard variant="outline" @click="onClick">
    <IxCardContent>
      <IxIcon :name="iconCapacity"></IxIcon>
      <IxTypography bold>Number of components</IxTypography>
      <IxTypography>
        Vanilla JavaScript<br />
        Angular<br />
        Blazor<br />
        React<br />
        Vue.js
      </IxTypography>
      <IxTypography format="h1">123</IxTypography>
    </IxCardContent>
  </IxCard>
</template>
```

#### card.css
```css
ix-card {
  height: 15.75rem;
  width: 19.875rem;
  background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: no-repeat;
  cursor: pointer;
}

ix-card ix-typography:last-of-type {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
```

## Action Card

### React Examples

#### action-card.tsx
```tsx
import { iconRefresh } from '@siemens/ix-icons/icons';
import { IxActionCard } from '@siemens/ix-react';

export default () => {
  return (
    <IxActionCard
      icon={iconRefresh}
      heading="Scan for new devices"
      subheading="Secondary text"
      variant="outline"
      onClick={console.log}
    ></IxActionCard>
  );
};
```

### Angular Examples

#### action-card.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './action-card.html',
})
export default class ActionCard {
  onClick(event: Event) {
    console.log(event);
  }
}
```

#### action-card.html
```html
<ix-action-card
  icon="refresh"
  heading="Scan for new devices"
  subheading="Secondary text"
  variant="outline"
  (click)="onClick($event)"
></ix-action-card>
```

### Angular Standalone Examples

#### action-card.ts
```ts
import { Component } from '@angular/core';
import { IxActionCard } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxActionCard],
  templateUrl: './action-card.html',
})
export default class ActionCard {
  onClick(event: Event) {
    console.log(event);
  }
}
```

#### action-card.html
```html
<ix-action-card
  icon="refresh"
  heading="Scan for new devices"
  subheading="Secondary text"
  variant="outline"
  (click)="onClick($event)"
></ix-action-card>
```

### Vue Examples

#### action-card.vue
```vue
<script setup lang="ts">
import { IxActionCard } from '@siemens/ix-vue';
import { iconRefresh } from '@siemens/ix-icons/icons';

const onClick = (event: Event) => {
  console.log(event);
};
</script>

<template>
  <IxActionCard
    :icon="iconRefresh"
    heading="Scan for new devices"
    subheading="Secondary text"
    variant="outline"
    @click="onClick"
  ></IxActionCard>
</template>
```

## Push Card

### React Examples

#### push-card.tsx
```tsx
import { iconBulb } from '@siemens/ix-icons/icons';
import { IxPushCard } from '@siemens/ix-react';

export default () => {
  return (
    <IxPushCard
      icon={iconBulb}
      notification="99"
      heading="Heading content"
      subheading="Subheading"
      variant="outline"
    >
      <table className="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </IxPushCard>
  );
};
```

### Angular Examples

#### push-card.ts
```ts
import { Component } from '@angular/core';

@Component({
  standalone: false,
  selector: 'app-example',
  templateUrl: './push-card.html',
})
export default class PushCard {}
```

#### push-card.html
```html
<ix-push-card
  icon="bulb"
  notification="99"
  heading="Heading content"
  subheading="Subheading"
  variant="outline"
>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>&#64;mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>&#64;fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>&#64;twitter</td>
      </tr>
    </tbody>
  </table>
</ix-push-card>
```

### Angular Standalone Examples

#### push-card.ts
```ts
import { Component } from '@angular/core';
import { IxPushCard } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxPushCard],
  templateUrl: './push-card.html',
})
export default class PushCard {}
```

#### push-card.html
```html
<ix-push-card
  icon="bulb"
  notification="99"
  heading="Heading content"
  subheading="Subheading"
  variant="outline"
>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>&#64;mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>&#64;fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>&#64;twitter</td>
      </tr>
    </tbody>
  </table>
</ix-push-card>
```

### Vue Examples

#### push-card.vue
```vue
<script setup lang="ts">
import { iconBulb } from '@siemens/ix-icons/icons';
import { IxPushCard } from '@siemens/ix-vue';
</script>

<template>
  <IxPushCard
    :icon="iconBulb"
    notification="99"
    heading="Heading content"
    subheading="Subheading"
    variant="outline"
  >
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </IxPushCard>
</template>
```

## API for ix-action-card

### Properties

| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| ariaLabelCard | { "ARIA label for the card" } | aria-label-card | string \| undefined |  |
| ariaLabelIcon | { "ARIA label for the icon" } | aria-label-icon | string \| undefined |  |
| heading | { "Card heading" } | heading | string \| undefined |  |
| icon | { "Card icon" } | icon | string \| undefined | undefined |
| passive | { "If true, disables hover and active styles and changes cursor to default" } | passive | boolean | false |
| selected | { "Card selection" } | selected | boolean | false |
| subheading | { "Card subheading" } | subheading | string \| undefined |  |
| variant | { "Card variant" } | variant | "alarm" \| "critical" \| "filled" \| "info" \| "neutral" \| "outline" \| "primary" \| "success" \| "warning" | 'outline' |

### Slot

| Name | Description |
| --- | --- |
| default | { "Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button." } |

## API for ix-push-card

### Properties

| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| ariaLabelIcon | { "ARIA label for the icon" } | aria-label-icon | string \| undefined |  |
| expanded | { "Expand the card" } | expanded | boolean | false |
| heading | { "Card heading" } | heading | string \| undefined |  |
| icon | { "Card icon" } | icon | string \| undefined |  |
| notification | { "Card KPI value" } | notification | string \| undefined |  |
| passive | { "If true, disables hover and active styles and changes cursor to default" } | passive | boolean | false |
| subheading | { "Card subheading" } | subheading | string \| undefined |  |
| variant | { "Card variant" } | variant | "alarm" \| "critical" \| "filled" \| "info" \| "neutral" \| "outline" \| "primary" \| "success" \| "warning" | 'outline' |

### Slot

| Name | Description |
| --- | --- |
| default | { "Expandable card content." } |
| title-action | { "Action displayed next to the card title." } |

## API for ix-card

### Properties

| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| passive | { "If true, disables hover and active styles and changes cursor to default" } | passive | boolean | false |
| selected | { "Show card in selected state" } | selected | boolean | false |
| variant | { "Card variant" } | variant | "alarm" \| "critical" \| "filled" \| "info" \| "neutral" \| "outline" \| "primary" \| "success" \| "warning" | 'outline' |

### Slot

| Name | Description |
| --- | --- |
| card-accordion | { "Accordion displayed in the card footer." } |
| default | { "Main card content." } |