Gradients - React

Use gradient to retrieve colour stops by token name.

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

gradient('products.broadband-essential');
// returns ['#ff5c00', '#e30253']

Some gradients include explicit stop positions. An unknown or removed token returns null; check the result before accessing its stops. See the available gradients.

Backgrounds

Pass 'background' as the second argument to generate gradient background CSS:

import styled from 'styled-components';
import { gradient } from '@sky-uk/ui-core';

const Background = styled.div`
  ${gradient('products.broadband-essential', 'background')}
`;

Gradients must not be used on typography or icons. See the usage guidance.