import { IllustrationBrand } from '@uhg-abyss/mobile';

size

illustration

variant

color

() => {
  return (
    <IllustrationBrand brand="optum" size={400} illustration="note_taking_1" />
  );
};

Brand

Use the brand property to adjust which brand is being selected.

Size

Use the size property to adjust the size of the illustration.

IllustrationBrand scales proportionally based on the image ratio and renders with a contain resize mode so the full illustration stays visible. If you wrap it, prefer a layout that lets the illustration grow from its width instead of a fixed-height container with clipping styles.

IllustrationBrand Props

Name	Type	Default	Required	Description
brand	'uhc' | 'optum' | 'surest' | undefined	-	-	Indicates which brand you want your illustration from
color	IllustrationColor | undefined	-	-	Sets color option of the illustration
illustration	UhcIllustrationBrandName | undefined | OptumIllustrationBrandName | SurestIllustrationBrandName	-	-	The name of the illustration
size	Abyss.Size | undefined	200	-	Sets the size of the illustration
title	string | undefined	-	-	Set accessibilityLabel of the image
variant	IllustrationVariant | undefined	1	-	The color variant for illustrations with multiple variants on the same background color. Applicable only to certain UHC illustrations

IllustrationBrand Classes

Class Name	Description
abyss-illustration-brand-root	IllustrationBrand root element

The source for these illustrations can be found in the brand libraries.

UnitedHealthCare Library
Optum Library

You can use the search functionality to find the required illustration. Illustrations can be searched using their title, variants, or colors.

Search