---
title: "Info Card — React"
canonical: https://sky-ui.cf.sky.com/components/info-card/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Info Card — React

The Info Card structures information and directs user to further actions.

```js
import { InfoCard } from '@sky-uk/ui-core';
```

The Info Card displays information in a consistent and flexible way, with the option for additional links for action.

```tsx
<InfoCard $width="288px">
  <InfoCard.Image
    src="https://placehold.co/576x162/"
    $aspectRatio="32 / 9"
    role="presentation"
    alt=""
  />
  <InfoCard.Heading src={tvLinear}>Headline</InfoCard.Heading>
  <InfoCard.Tag label="Label" />
  <InfoCard.Description
    content={`Optional description to support the user in understanding the content within this info card.`}
  />
  <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
  <InfoCard.InlineAlert $variant="information" $showIcon>
    <InfoCard.InlineAlert.Heading>Heading Text</InfoCard.InlineAlert.Heading>
    <InfoCard.InlineAlert.Content>Content</InfoCard.InlineAlert.Content>
  </InfoCard.InlineAlert>
  <InfoCard.LinkListItem href="http://www.sky.com" target="_blank">
    Text Link
  </InfoCard.LinkListItem>
</InfoCard>
```

## Props

### InfoCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| $stackedList | boolean | undefined | The format of the text list. This prop is [responsive](/core/hooks/use-responsive-props/) and can be used to set the `TextListItem` item format at different breakpoints. |

### InfoCard.Image

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| $aspectRatio | string | `16 / 9` | The aspect ratio of the image. This prop is [responsive](/core/hooks/use-responsive-props/) and can be used to set the `Image` aspect ratio at different breakpoints. |

### InfoCard.Heading

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| src | string | undefined | The `src` prop expects a partial SVG `path` of the icon that you want to render to the left of the Heading text. It is recommend to use icons from the Skycons package. [(See Skycons)](/skycons/) |

### InfoCard.Description

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| content | string | undefined | The `content` prop expects either a `string` or `Markdown` to be rendered as the description text. |

### InfoCard.TextListItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| heading | string | undefined | The `heading` prop expects a `string` to be rendered as the text list sub headline. |
| body | string | undefined | The `body` prop expects a `string` to be rendered as the text list content. |

### InfoCard.InlineAlert

The `InfoCard.InlineAlert` extends the [Inline Alert component](/components/inline-alert/react/).

**Important:** The `InlineAlert` supports all of the InlineAlert subcomponents and props.

### InfoCard.LinkListItem

The `InfoCard.LinkListItem` extends the [Text Link component](/components/text-link/react/).

**Important:** The `LinkListItem` supports the use of `as` if the use case requires a button.

## Multiple Info Cards

```tsx
<Flex $flexDirection={{xs: 'column', lg: 'row'}} $gap={{xs: 4, lg: 5}}>
  <InfoCard $flex="1 1 50%">
    <InfoCard.Image
      src="https://placehold.co/576x162/"
      $aspectRatio="32 / 9"
      role="presentation"
      alt=""
    />
    <InfoCard.Heading src={tvLinear}>Headline</InfoCard.Heading>
    <InfoCard.Tag label="Label" />
    <InfoCard.Description
      content={`Optional description to support the user in understanding the content within this info card.`}
    />
    <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
    <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
    <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
    <InfoCard.LinkListItem href="http://www.sky.com" target="_blank">
      Text Link
    </InfoCard.LinkListItem>
  </InfoCard>
  <InfoCard $flex="1 1 50%">
    <InfoCard.Heading src={tvLinear}>Headline</InfoCard.Heading>
    <InfoCard.Tag label="Label" />
    <InfoCard.Description
      content={`Optional description to support the user in understanding the content within this info card.`}
    />
    <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
    <InfoCard.LinkListItem href="http://www.sky.com" target="_blank">
      Text Link
    </InfoCard.LinkListItem>
    <InfoCard.LinkListItem href="http://www.sky.com" target="_blank">
      Text Link
    </InfoCard.LinkListItem>
    <InfoCard.LinkListItem href="http://www.sky.com" target="_blank">
      Text Link
    </InfoCard.LinkListItem>
  </InfoCard>
  <InfoCard $flex="1 1 50%">
    <InfoCard.Image
      src="https://placehold.co/576x162/"
      $aspectRatio="32 / 9"
      role="presentation"
      alt=""
    />
    <InfoCard.Heading>Headline</InfoCard.Heading>
    <InfoCard.Description
      content={`Optional description.`}
    />
    <InfoCard.TextListItem heading="Sub headline" body="Sub content" />
  </InfoCard>
</Flex>
```