Fallback image maintains consistent spacing and alignment when content without an image appears alongside siblings that typically have images.
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.
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.
<pennlibs-fallback-img style="max-width: 26rem; margin: 1rem;"></pennlibs-fallback-img>
<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>
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.