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

size

affiliate

variant

color

<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	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"	-	-	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	-	-	CSS class name to apply to each element within the component
color	string	-		Set the color of the Brandmark
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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.
size	string | number	-	-	Set the size of the Brandmark
sizes	Record<string, string | number>	'{ sm: '100px', md: '150px', lg: '200px', },'	-	Defines a set of sizes to choose from
title	string	-	-	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