Feature - React

View on Figma View on GitHub

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

Examples

Minimal

Select background colour

<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: '#' }}
/>

<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: '#' }}
/>

Coloured Heading and Legal Text

Select background colour

<Feature
  $theme="products.glass"
  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: '#' }}
/>

<Feature
  $theme="products.glass"
  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

Select background colour

<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: '#' }}
/>

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