---
title: "Feature List — React"
canonical: https://sky-ui.cf.sky.com/components/feature-list/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Feature List — React

List multiple key points to help unpack a proposition.

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

## Examples

### Minimal

```tsx
<FeatureList>
  <FeatureList.Item
    heading="Recordings, only better"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
  <FeatureList.Item
    heading="Start, from the start"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
  <FeatureList.Item
    heading="Recorded, saved, stored"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
</FeatureList>
```

### Coloured Text with Individual Colour Override

```tsx
<FeatureList $theme="sky">
  <FeatureList.Item
    heading="Recordings, only better"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/400x300', alt: 'Alt' }}
  />
  <FeatureList.Item
    $theme="products.glass"
    heading="Start, from the start"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/400x300', alt: 'Alt' }}
  />
  <FeatureList.Item
    heading="Recorded, saved, stored"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/400x300', alt: 'Alt' }}
  />
</FeatureList>
```

### Light Appearance

```tsx
<FeatureList $appearance="light">
  <FeatureList.Item
    heading="Recordings, only better"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
  <FeatureList.Item
    heading="Start, from the start"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
  <FeatureList.Item
    heading="Recorded, saved, stored"
    bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
    cta={{ href: '#', text: 'CTA' }}
    media={{ src: 'https://placehold.co/300x200', alt: 'Alt' }}
  />
</FeatureList>
```

## Props

### FeatureList

- $appearance: `'light'` | `'default'` | `undefined`
- $theme: `string` ([gradient](/foundations/gradients/))
- [Grid](/components/grid/) props

### FeatureList.Item

- $theme: `string` ([gradient](/foundations/gradients/))
- bodyText: `string`
- cta: `object`
  - accessibleTitle: `string`
  - href: `string`
  - text: `string`
- heading: `string`
- media: `object`
  - [Image](/components/image/) props

## System Modifiers

The `FeatureList` component also supports the props applied using the following system modifiers:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [grid-parent](/core/system/grid-parent/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [overflow](/core/system/overflow/)
- [width](/core/system/width/)