Components

Images

Images are used to provide a visual representation of context. When an avatar isn’t available for an object, the object icon will always be displayed in it’s place.

AvatarAvatar › SquareAvatar › CircleAvatar › Square InitialsAvatar › Circle InitialsAvatardev ready

Preview

Code

<span class="slds-avatar slds-avatar--medium">
  <img src="/assets/images/avatar2.jpg" alt="company name" />
</span>

An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires .slds-avatar as the base class. Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the .slds-avatar--circle class. Four additional classes are available for sizing.

If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If initials are not available, use the object icon as a fallback.

Avatar SizeAvatar Size › X SmallAvatar Size › SmallAvatar Size › MediumAvatar Size › LargeAvatar Sizedev ready

Preview

Code

<span class="slds-avatar slds-avatar--x-small">
  <img src="/assets/images/avatar2.jpg" alt="person name" />
</span>

FigureFigure › CardFigure › OverlayFiguredev ready

Preview

Code

<figure class="slds-image slds-image--card">
  <a href="javascript:void(0);" class="slds-image__crop slds-image__crop--16-by-9">
    <img src="/assets/images/placeholder-img@16x9.jpg" alt="Description of the image" />
  </a>
  <figcaption class="slds-image__title slds-image__title--card">
    <span class="slds-image__text slds-truncate" title="Image Title">Image Title</span>
  </figcaption>
</figure>

A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of .slds-image__crop and passing in a ratio class such as .slds-image__crop--16-by-9.

Figure RatioFigure Ratio › 16:9Figure Ratio › 4:3Figure Ratio › 1:1Figure Ratiodev ready

Preview

Code

<figure class="slds-image slds-image--card">
  <a href="javascript:void(0);" class="slds-image__crop slds-image__crop--16-by-9">
    <img src="/assets/images/placeholder-img@16x9.jpg" alt="Description of the image" />
  </a>
  <figcaption class="slds-image__title slds-image__title--card">
    <span class="slds-image__text slds-truncate" title="Image Title">Image Title</span>
  </figcaption>
</figure>

Component Overview

Accessibility

Every <img> you add to your site needs to have an alt attribute. If the image is informational, set the alt equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create avatars.
Class NameUsage
.slds-avatar
Applied to:

span

Outcome:

Defines an image as an avatar

Required:

Required

Comments:

By default avatars have a rounded square shape

.slds-avatar--circle
Applied to:

.slds-avatar

Outcome:

Creates a circular avatar shape

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--empty
Applied to:

.slds-avatar

Outcome:

Creates a dashed outline around an empty avatar

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--x-small
Applied to:

.slds-avatar

Outcome:

Creates a 1.5rem×1.5rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--small
Applied to:

.slds-avatar

Outcome:

Creates a 2.25rem×2.25rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--medium
Applied to:

.slds-avatar

Outcome:

Creates a 3rem×3rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-avatar--large
Applied to:

.slds-avatar

Outcome:

Creates a 5rem×5rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-image
Applied to:

div

Outcome:

Image wrapper, not intended to wrap icons

Required:

Required

Comments:

--

.slds-image--card
Applied to:

.slds-image

Outcome:

Adds styles to give image a "card" look

Required:

Required

Comments:

--

.slds-image__crop
Applied to:

div

Outcome:

Optional if you need to crop image at a specific ratio

Required:

No, optional element or modifier

Comments:

--

.slds-image__crop--16x9
Applied to:

.slds-image__crop

Outcome:

Crop image at a 16x9 ratio, contrained to the parents width

Required:

No, optional element or modifier

Comments:

--

.slds-image__crop--4x3
Applied to:

.slds-image__crop

Outcome:

Crop image at a 4x3 ratio, contrained to the parents width

Required:

No, optional element or modifier

Comments:

--

.slds-image__crop--1x1
Applied to:

.slds-image__crop

Outcome:

Crop image at a 1x1 ratio, contrained to the parents width

Required:

No, optional element or modifier

Comments:

--

.slds-image__title
Applied to:

figcaption or div

Outcome:

Image title

Required:

No, optional element or modifier

Comments:

--

.slds-image__title--overlay
Applied to:

.slds-image__title

Outcome:

Text overlay on top of image, has opaque overlay

Required:

No, optional element or modifier

Comments:

--

.slds-image__icon
Applied to:

.slds-icon_container

Outcome:

If file is missing an image, an icon should replace it. This class helps with the positioning of that icon.

Required:

No, optional element or modifier

Comments:

--

.slds-image__actions
Applied to:

.slds-button-group

Outcome:

If file has actions, then this class helps with the positioning of those actions

Required:

No, optional element or modifier

Comments:

--

.slds-image--overlay
Applied to:

div

Outcome:

Applies overlay to an image

Required:

No, optional element or modifier

Comments:

--

.slds-image__text
Applied to:

span

Outcome:

Text inside of .slds-image__title

Required:

No, optional element or modifier

Comments:

--