import { IllustrationBrand } from '@uhg-abyss/web/ui/IllustrationBrand';// Disclaimer: Not all brand/color combinations are applicable; inapplicable combinations will display as empty
<IllustrationBrand brand="uhc" size={400} color="primary" illustration="calendar" />Illustration
Use the illustration prop to select the illustration to display.
Note: When using TypeScript, the icon property only accepts valid icon names. If an invalid icon name is provided, an error will be thrown. To verify that a given value is a valid icon name, use the isValidAssetName tool or use the ValidIllustrationBrandName type:
import { ValidIllustrationBrandName } from '@uhg-abyss/web/ui/IllustrationBrand';
let illustrationName: ValidIllustrationBrandName;Brand
Use the brand prop to adjust which brand is selected. By default, the brand is set to the same brand as the brand used in the ThemeProvider.
Size
Use the size property to adjust the width of the illustration. This can be either a number (i.e. a pixel value) or a string. The default value is "100%". The height of the illustration will scale proportionally to the width.
Color
Use the color property to select available illustration colors. The available colors are "primary", "pacific", and "white". The default color is "white"".
Variant
Some UHC illustrations have multiple variants of accent colors on the same background color. Use the variant prop to select the color combination. Valid values are 1 and 2.
Alt text
Use the altText property to provide an accessible description of the illustration. This text should be descriptive enough to convey the meaning of the illustration. See the Accessibility tab for more information.
IllustrationBrand Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
altText | string | - | - | The alt text for the illustration. |
brand | "optum" | "uhc" | - | The brand to use for the illustration. | |
className | string | - | - | CSS class name to apply to each element within the component |
color | "pacific" | "primary" | "white" | 'white' | - | The color of the illustration. Applicable only to UHC illustrations. |
css | Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>> | - | - | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation |
data-testid | string | - | - | Suffix used to create a unique ID used for automated testing |
disableDefaultProviderProps | boolean | false | - | If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored. |
size | string | number | '100%' | - | The width of the illustration. |
variant | 1 | 2 | 1 | - | The color variant for illustrations with multiple variants on the same background color. Applicable only to certain UHC illustrations. |
IllustratedIconBrand Classes
| Class Name | Description |
|---|---|
| .abyss-illustration-brand-root | IllustrationBrand root element |
Screen Reader Support
Brand illustrations are intended to be used as decorative images and as such, are ignored by screen readers by default. However, should a case arise in which an illustration needs to be accessible, use the altText prop to provide accessible alt text to the image. This text should be descriptive enough to convey the meaning of the illustration.
Illustration Source
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.