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

size

affiliate

variant

color

() => {
  return (
    <Box
      color="$semantic.color.surface.container.tertiary"
      style={{ justifyContent: 'center', alignItems: 'center' }}
    >
      <Brandmark
        brand="uhc"
        size={400}
        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.

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	'aarp_extra_assurance_benefits' | 'aarp_medicare_plans' | 'aarp_medicare_prescription' | 'aarp_medicare_advantage' | 'aarp_medicare_supplement' | 'aarp_supplemental_personal_health' | 'community_plan' | 'dental' | 'dual_complete' | 'global' | 'hearing' | 'medicare_advantage' | 'medicare_plans' | 'medicare_solutions' | 'oxford' | 'uhc' | 'vision' | 'optum' | 'optum_financial' | 'optum_frontier_therapies' | 'optum_perks' | 'optum_prescription' | 'optum_serve' | 'optum_store' | 'uhg' | 'surest'	-		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	'$sm' | '$md' | '$lg' | number | 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
variant	'lockup' | 'lockup_horizontal' | 'u_mark' | 'u_mark_horizontal' | 'monogram' | 'stacked_wordmark' | 'wordmark' | 'lockup' | 'lockup' | 's_mark'	-		Indicates the brandmark variant

Brandmark Classes

Class Name	Description
abyss-brandmark-root	Brandmark root element

Brandmark Translations

Translation Key	Value
Brandmark.fromUHC	from UnitedHealthcare

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

Brandmark Tokens

Search tokens

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