Fallback Image

Fallback image maintains consistent spacing and alignment when content without an image appears alongside siblings that typically have images.

When to use

Use fallback images when displaying collections of content where some items have images and others don't. This is especially useful for search results, listings, cards, or any grid-based layouts where visual consistency is important for readability.

How to use

Use consistently across your site. Apply the fallback image pattern in the same contexts throughout your website to create predictable user experiences.

Consider your layout. The fallback image displays at a 3:2 aspect ratio by default, which works well for most content layouts, but you can customize this.

Default

<pennlibs-fallback-img style="max-width: 26rem; margin: 1rem;"></pennlibs-fallback-img>

Add your styles

<style>
  pennlibs-fallback-img {
    max-width: 20rem;
    margin: 1rem;
    aspect-ratio: 1;
    border-radius: var(--pl-border-radius-subtle);
    background: var(--pl-color-bg-subtle-brand);
  }
</style>

<pennlibs-fallback-img></pennlibs-fallback-img>

Accessibility

This pattern includes an empty alt attribute since it serves as decoration and doesn't convey essential information. Screen readers will skip over it, which provides the intended behavior for placeholder content.

Where it's used

• Digital Collections