Feature List - React

View on Figma View on GitHub

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

Examples

Minimal

<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

<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

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

FeatureList.Item

$theme: string (gradient)
bodyText: string
cta: object
- accessibleTitle: string
- href: string
- text: string
heading: string
media: object
- Image props

System Modifiers

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