Identifier

Available since 1.0.0 Last updated 1.6

Identifier is a way to visually present something using an icon or user initials.

Recommended sizes:

Extra Small (--xs - 28px)
Small (--s) - 32px
Medium (--m) - 48px
Large (--l) - 64px
Extra Large (--xl) - 80px
Extra Extra Large (--xxl) - 112px

Other sizes:

Default matches the base font size (14px)
Extra Extra Small (--xxs - 20px)

Icon

Include role="presentation" when the identifier is used for only illustrative purposes. For example, if the icon sits right next to a label, use role.

<span class=" fd-identifier--xxs sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--xs sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--s sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--m sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--l sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--xl sap-icon--washing-machine" role="presentation"></span>
<span class=" fd-identifier--xxl sap-icon--washing-machine" role="presentation"></span>

Initials

Include aria-label when there is no text equivalent for the identifier. This is not necessary if the identifier is used for illustrative purposes only. See Icon above.

WW WW WW WW WW WW WW

<span class=" fd-identifier--xxs" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--xs" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--s" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--m" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--l" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--xl" aria-label="Wendy Wallace">WW</span>
<span class=" fd-identifier--xxl" aria-label="Wendy Wallace">WW</span>

Circle

A circle style can be rendered using the --circle modifier.

WW WW WW WW WW WW WW

<span class=" fd-identifier--xxs fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xs fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--s fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--m fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--l fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xl fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xxl fd-identifier--circle sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xxs fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xs fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--s fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--m fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--l fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xl fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xxl fd-identifier--circle" 
      aria-label="Wendy Wallace">WW</span>

Background image

A background image can be applied to any style using the --thumbnail modifier.

<span class=" fd-identifier--xxs fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--xs fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--s fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--m fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--l fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--xl fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

<span class=" fd-identifier--xxl fd-identifier--circle fd-identifier--thumbnail" 
      style="background-image: url('/images/thumbs/headshot-male.jpg')" 
      role="presentation" aria-label="John Doe"></span>

Transparent

A transparent style can be rendered using the --transparent modifier.

WW WW WW WW WW WW WW

<span class=" fd-identifier--xxs fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xs fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--s fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--m fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--l fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xl fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xxl fd-identifier--circle fd-identifier--transparent sap-icon--money-bills" 
      role="presentation"></span>

<span class=" fd-identifier--xxs fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xs fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--s fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--m fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--l fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xl fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

<span class=" fd-identifier--xxl fd-identifier--circle fd-identifier--transparent" 
      aria-label="Wendy Wallace">WW</span>

Accent Colors

Use helpers classes to change the background colors, for example, .fd-has-background-color-accent-9.

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-1" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-2" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-3" 
       role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-4" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-5" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-6" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-7" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-8" 
      role="presentation"></span>

<span class=" fd-identifier--m sap-icon--money-bills fd-has-background-color-accent-9" 
      role="presentation"></span>