Skip to main content

IllustrationBrand

Used to implement Brand illustrations and adapt their properties.

github
View source code
figma
View design
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="go_paperless" />

        Illustration​

        Use the illustration prop to select the illustration to display.

        Tip

        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​

        NameTypeDefaultRequiredDescription
        altText
        string | undefined
        		--
        The alt text for the illustration.
        brand
        'uhc' | 'optum' | 'surest' | undefined
        		--
        The brand to use for the illustration.
        color
        IllustrationColor | undefined
        'white'
        		-
        The color of the illustration. Applicable only to UHC illustrations.
        illustration
        UhcIllustrationBrandName | OptumIllustrationBrandName | SurestIllustrationBrandName
        		-
        The name of the illustration.
        size
        string | number | undefined
        '100%'
        		-
        The width of the illustration.
        variant
        IllustrationVariant | undefined
        1
        		-
        The color variant for illustrations with multiple variants on the same background color. Applicable only to certain UHC illustrations.

        IllustratedIconBrand Classes​

        Class NameDescription
        .abyss-illustration-brand-rootIllustrationBrand 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.

        Table of Contents