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​

        Name
        Type
        		DefaultRequiredA11yDescription
        altText
        string | undefined
        The alt text for the illustration.
        brand
        "optum" | "uhc" | "surest" | undefined
        The brand to use for the illustration.
        className
        string | undefined
        CSS class name to apply to each element within the component
        color
        IllustrationColor | undefined
        'white'
        The color of the illustration. Applicable only to UHC illustrations.
        css
        CSSProperties | Partial<Record<"abyss-illustration-brand-root", CSSProperties>> | undefined
        Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation
        See CSS Prop Styling for more information
        data-testid
        string | undefined
        Suffix used to create a unique ID used for automated testing
        See Component Testing for more information
        disableDefaultProviderProps
        boolean | undefined
        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.
        hiddenFrom
        Breakpoint | undefined
        When defined, the component is hidden once the screen width reaches the specified breakpoint.
        illustration
        "mask" | "file" | "alert" | "tree" | "cursor" | "scale" | "value" | "backpack" | "blood_pressure" | "breastfeeding" | "cake" | "cast" | "chat_bubble" | "dashboard" | "desk" | "exercise" | ... 999 more ... | "take_a_health_survey"
        The name of the illustration.
        size
        string | number | undefined
        '100%'
        The width of the illustration.
        slotProps
        Partial<Record<string, SlotPropsValue<string>>> | undefined
        Props to pass to individual internal slots of the component, keyed by the slot name
        (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
        data-testid, and nested slotProps for child Abyss components.
        See slotProps for more information
        variant
        IllustrationVariant | undefined
        1
        The color variant for illustrations with multiple variants on the same background color. Applicable only to certain UHC illustrations.
        visibleFrom
        Breakpoint | undefined
        When defined, the component is hidden until the screen width reaches the specified breakpoint.

        IllustrationBrand Classes​

        Class NameDescription
        .abyss-illustration-brand-rootIllustrationBrand root element

        Screen Reader Support​

        Brand illustrations are intended to be used as decorative imagesopens in a new window 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 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.

        Table of Contents