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

size

illustration

variant

color

() => {
  return (
    <IllustrationBrand
      brand="uhc"
      size={400}
      color="primary"
      illustration="heart"
    />
  );
};

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.

Color

Use the color property to select available illustration colors.

Variant

Some UHC illustrations have multiple variants of accent colors on the same background color. Use the variant prop to select the color combination.

IllustrationBrand Props

Prop Name	Type	Default	Description
brand	"uhc" | "optum"	-	Indicates which brand you want your illustration from
color	"white"| "primary" | "pacific"	white	Set color option of the illustration
illustration	string	-	The name of the illustration
size	number | string	100%	Set the size of the illustration
title	string	-	Set accessibilityLabel of the image
variant	1 | 2	1	For illustrations with variants on the same background color. Applicable only to 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