Identifier
Available since 1.0.0 Last updated 1.3.2
Identifier is a way to visually present something using an icon or user initials.
There are multiple sizes:
- Default matches the base font size (14px)
- Extra Extra Small (
--xxs- 20px) - Extra Small (
--xs- 28px) - Small (
--s) - 32px - Medium (
--m) - 48px - Large (
--l) - 64px - Extra Large (
--xl) - 88px - Extra Extra Large (
--xxl) - 112px
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>