Disclaimer

Not all affiliate variant/color combinations are applicable, and some may not be available. Inapplicable combinations will render as empty.

import { Brandmark } from '@uhg-abyss/web/ui/Brandmark';

size

affiliate

variant

color

() => {
  return (
    <Box
      color="$web.semantic.color.surface.container.tertiary"
      padding="$web.semantic.spacing.scale.4xl"
    >
      <Brandmark
        brand="uhc"
        size="100%"
        affiliate="uhc"
        variant="lockup"
        color="blue"
      />
    </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.

The size property sets the width of the image. It can be a number of pixels, like 200px, or a percent value, like 100%.

It can also be a string such as sm, md, or lg to choose from a menu of pre-defined sizes.

The sizes property controls this menu of pre-defined sizes. By default, it is set to this:

{
  sm: '100px',
  md: '150px',
  lg: '200px',
}

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	Default	Required	Description
affiliate	string	-		Set the affiliate of the Brandmark. Within a brand, there are affiliates that have their own logo. For example, if brand is set to "optum", an example of an affiliate option is "optum_financial"
brand	'uhc' | 'optum' | 'uhg' | 'surest' | undefined	-	-	The brand to use for the Brandmark. If not specified here, the brand will be determined by the theme set in the application's ThemeProvider or AbyssProvider.
color	string	-		Set the color of the Brandmark
size	string | number | undefined	-	-	Set the size of the Brandmark
sizes	Record<string, string | number> | undefined	'{ sm: '100px', md: '150px', lg: '200px', },'	-	Defines a set of sizes to choose from
title	string | undefined	-	-	Sets the alt (alternative text) value of the image. Important for accessibility.
variant	string	-		Set the variant of the Brandmark. For certain brand and affiliate combinations, there are one or more variants of the Brandmark.

Brandmark Classes

Class Name	Description
.abyss-brandmark	Brandmark root element

The source for these brandmarks can be found in the Brandmark Library.

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

Search

Search