Profile Pictures

Profile pictures are objects that can be used to communicate a familiar connection to the user. less/components/ProfilePicture.less provides a number of predefined card styles, which are documented below, for most use cases.

ProfilePicture

An img node with a class of ProfilePicture changes its display property value to block, its width property value to 32px, its height property value to 32px, and its border-radius property value to 256px.

To use it, give an img node a class of ProfilePicture.

A profile picture of Steve Dixon

Modifiers

ProfilePicture--extra-large

This modifies a the width and height to 128px.

A profile picture of Steve Dixon

ProfilePicture--large

This modifies a the width and height to 64px.

A profile picture of Steve Dixon

ProfilePicture--medium

This modifies a the width and height to 48px.

A profile picture of Steve Dixon

ProfilePicture--small

This modifies a the width and height to 16px.

A profile picture of Steve Dixon