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

size

affiliate

variant

color

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<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

Prop Name	Type	Default	Description
affiliate	optum | optum_financial | optum_frontier_therapies | optum_health-education | optum_now | optum_perks | optum_prescription | optum_serve | optum_store	-	Indicates the brandmark affiliate
brand	optum	-	Indicates which brand you want your brandmark from
color	string	-	Set color option of the brandmark
size	number | string	100%	Set the size of the brandmark
variant	lockup	-	Indicates the brandmark variant

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

Search tokens

Brandmark Tokens

Token Name	Value
brandmark.sizing.sm	100
brandmark.sizing.md	150
brandmark.sizing.lg	200