Skip to main content

Brandmark

Logos/Brandmarks for Optum brands.

github
View source code
figma
View design
import { Brandmark } from '@uhg-abyss/mobile';
        () => {
          return (
            <Box
              color="$semantic.color.surface.container.emphasis.2"
              style={{ justifyContent: 'center', alignItems: 'center' }}
            >
              <Brandmark
                brand="optum"
                size="$lg"
                affiliate="optum"
                variant="lockup"
                color="orange"
              />
            </Box>
          );
        };

        Brand​

        Use the brand property to adjust which brand is being selected.

        Size​

        Use the size property to adjust the size of the brandmark.

        Affiliate​

        Use the affiliate property to select the required brandmark affiliates.

        Variant​

        Use the variant property to select the required brandmark variants.

        Color​

        Use the color property to select available brandmark colors.

        Brandmark Props​

        Name
        Type
        		DefaultRequiredA11yDescription
        affiliate
        "uhg" | "surest" | UHCAffiliate | OptumAffiliate
        Indicates the brandmark affiliate
        brand
        "uhc" | "optum" | "uhg" | "surest" | undefined
        Indicates which brand you want your brandmark from
        color
        string | undefined
        Set color option of the brandmark
        onError
        (() => void) | undefined
        Callback function when the brandmark has an error loading
        onLoad
        (() => void) | undefined
        Callback function when the brandmark is loaded
        size
        number | "$sm" | "$md" | "$lg" | undefined
        200
        Set size of brandmark
        sizes
        Record<string, number> | undefined
        { sm: 100, md: 150, lg: 200 }
        Pre programmed sizes for the brandmark
        title
        string | undefined
        Set title for the brandmark. Also used as its accessibilityLabel
        variant
        UHCVariant | "s_mark"
        Indicates the brandmark variant

        Brandmark Classes​

        Class NameDescription
        abyss-brandmark-rootBrandmark root element.

        The source for these brandmarks can be found in the Brandmark Libraryopens in a new window.

        You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

        Search

        Brandmark Tokens​

        Token NameValue
        brandmark.sizing.sm
        100
        brandmark.sizing.md
        150
        brandmark.sizing.lg
        200
        Table of Contents