Images

Responsive image

Images

Examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

Responsive

Responsive image
Responsive image
Responsive image

Thumbnail

Thumbnail image
Thumbnail image
Thumbnail image
Thumbnail image

Aligning Around

Aligning image Aligning image

Aligning Center - Block

Thumbnail image

Aligning Center - Inline Block

Thumbnail image Thumbnail image

Circled

Circled image
Circled image
Circled image

Shadowed

Shadowed image
Shadowed image
Shadowed image

Avatar - Squared

Avatar image Avatar image Avatar image

Avatar - Rounded

Avatar image Avatar image Avatar image

Avatar - Circled

Avatar image Avatar image Avatar image

Avatar - Shadow

Avatar image Avatar image Avatar image

Stack

Avatar image Avatar image Avatar image +5

Stack - Large

Avatar image Avatar image Avatar image +5

Stack - Link

Avatar image Avatar image Avatar image +5

Stack - Status

Avatar image
Avatar image
Avatar image

Avatar Sizes

Avatar image Avatar image Avatar image Avatar image Avatar image Avatar image
Avatar image Avatar image Avatar image Avatar image Avatar image Avatar image
Avatar image Avatar image Avatar image Avatar image Avatar image Avatar image

With Connection Status

Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image
Avatar image

Avatar Placeholder - Squared

AD EH JK

Avatar Placeholder - Rounded

AD EH JK

Avatar Placeholder - Circled

AD EH JK

Avatar Placeholder - Elevation

AD EH JK

Avatar Placeholder - Elevation On Hover

AD EH JK

Avatar Placeholder - Inverse Elevation On Hover

AD EH JK

Avatar Placeholder Sizes

XS SM MD LG XL XXL
XS SM MD LG XL XXL
XS SM MD LG XL XXL

Avatar Placeholder With Connection Status

XS
SM
MD
LG
XL
XXL
XS
SM
MD
LG
XL
XXL
XS
SM
MD
LG
XL
XXL

Avatar Placeholder Color Variations

PR SE SU DA WA IN LI DA