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

size

affiliate

variant

color

() => {
  return (
    <Box
      color="$web.semantic.color.surface.container.emphasis.2"
      padding="$web.semantic.spacing.scale.4xl"
    >
      <Brandmark
        brand="optum"
        size="100%"
        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.

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	A11y	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	"optum" | "uhc" | "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.
className	string | undefined				CSS class name to apply to each element within the component
color	string				Set the color of the Brandmark
css	CSSProperties | Partial<Record<"abyss-brandmark", 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.
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
slotProps	Partial<Record<"brandmark", SlotPropsLeafValue>> | undefined				Props to pass to individual internal slots of the component. See slotProps for more information
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.
visibleFrom	Breakpoint | undefined				When defined, the component is hidden until the screen width reaches the specified breakpoint.

Brandmark Classes

Class Name	Description
.abyss-brandmark	Brandmark 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

Search