Fallback Image

A branded placeholder illustration rendered when an image is missing. It draws the Medway wordmark over a dark blue radial gradient and fills its container. It is used as the default cover for CardLesson, CardContinue and CardNews whenever no src (and no custom children) is provided, and can also be used standalone.

Examples

Default

FallbackImage fills its parent container (size-full). Give the parent a size and overflow-hidden to clip it to the desired shape.

import { FallbackImage } from "@medway-ui/core";
 
<div className="h-[200px] w-[360px] overflow-hidden rounded-lg">
  <FallbackImage />
</div>

Aspect ratios

The illustration uses preserveAspectRatio="xMidYMid slice", so the gradient always covers the frame and the wordmark stays centered. Since the wordmark is wide, prefer landscape or square frames — very narrow frames will crop it.

import { FallbackImage } from "@medway-ui/core";
 
<div className="aspect-video w-[240px] overflow-hidden rounded-md">
  <FallbackImage />
</div>
<div className="aspect-[4/3] w-[180px] overflow-hidden rounded-md">
  <FallbackImage />
</div>
<div className="aspect-square w-[140px] overflow-hidden rounded-md">
  <FallbackImage />
</div>

As a card cover fallback

This is the default behavior of CardLesson, CardContinue and CardNews: when their image component receives no src and no children, FallbackImage is rendered automatically.

import { CardLesson, CardLessonImage } from "@medway-ui/core";
 
<CardLesson>
  <CardLessonImage />
  {/* ...rest of the card */}
</CardLesson>

API

FallbackImage