Images
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
Thumbnail
Aligning Around
Aligning Center - Block
Aligning Center - Inline Block
Circled
Shadowed
Avatar - Squared
Avatar - Rounded
Avatar - Circled
Avatar - Shadow
Stack
Stack - Large
Stack - Link
Stack - Status
Avatar Sizes
With Connection Status
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