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

# Feature — React

Feature is a pattern, used to introduce a product or proposition.

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

## Examples

### Minimal

```tsx
<Feature
  heading="Sky Glass"
  bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor. Sed vestibulum ante pellentesque justo lobortis, sed consectetur massa dapibus."
  cta={{ text: 'Take a closer look', href: '#' }}
/>
```

### Legal Text

```tsx
<Feature
  heading="Sky Glass"
  bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor. Sed vestibulum ante pellentesque justo lobortis, sed consectetur massa dapibus."
  legal="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
  cta={{ text: 'Take a closer look', href: '#' }}
/>
```

### Light Appearance

```tsx
<Feature
  $appearance="light"
  heading="Sky Glass"
  bodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor. Sed vestibulum ante pellentesque justo lobortis, sed consectetur massa dapibus."
  legal="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id libero tortor."
  cta={{ text: 'Take a closer look', href: '#' }}
/>
```

## Props

- $appearance: `'light'` | `'default'` | `undefined`
- $theme: `string` ([gradient](/foundations/gradients/))
- bodyText: `string`
- cta: `object`
  - accessibleTitle: `string`
  - href: `string`
  - text: `string`
- heading: `string`
- legal: `string`

## System Modifiers

The `Feature` 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/)
- [margin](/core/system/margin/)
- [padding](/core/system/padding/)
- [width](/core/system/width/)