Info Card - React

View on Figma View on GitHub

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.

<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 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 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)

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.

The InlineAlert supports all of the InlineAlert subcomponents and props.

InfoCard.LinkListItem

The InfoCard.LinkListItem extends the Text Link component.

The LinkListItem supports the use of as if the use case requires a button.

Multiple Info Cards

<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>