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.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

Prop Name	Type	Default	Description
affiliate	aarp_extra_assurance_benefits | aarp_medicare_advantage_walgreens | aarp_medicare_plans | aarp_medicare_prescription | aarp_medicare_prescription_walgreens | aarp_medicare_supplement | aarp_supplemental_personal_health | community_plan | dental | dual_complete | global | hearing | medicare_advantage | group_medicare_advantage | medicare_plans | medicare_solutions | oxford | student_resources | uhc | vision	-	Indicates the brandmark affiliate
brand	uhc	-	Indicates which brand you want your brandmark from
color	string	-	Set color option of the brandmark
size	number | string	$brandmark.sizing.lg	Set the size of the brandmark
sizes	Record	{sm: 100, md: 150, lg: 200}	Pre programmed sizes for the brandmark
title	string	-	Set title for the brandmark
variant	lockup | lockup_horizontal | u_mark | u_mark_horizontal | monogram | stacked_wordmark | wordmark	-	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

Search tokens

Brandmark Tokens

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