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	A11y	Description
brand	"uhc" | "optum" | "surest" | undefined			Indicates which brand you want your illustration from
color	IllustrationColor | undefined			Sets color option of the illustration
illustration	"file" | "backpack" | "exercise" | "house" | "language" | "money" | "scale" | "shopping_basket" | "toys" | "watch" | "water_bottle" | "glasses" | "pills" | "artificial_intelligence" | ... 320 more ... | "take_a_health_survey"			The name of the illustration
size	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 Libraryopens in a new window
Optum Libraryopens in a new window

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

Search