Pular para o conteúdo
UI

Fallback Image

Ilustração de placeholder com a marca, renderizada quando falta uma imagem. Desenha o logotipo da Medway sobre um gradiente radial azul-escuro e preenche o container. É a capa padrão de CardLesson, CardContinue e CardNews sempre que nenhum src (nem children personalizado) é informado, e também pode ser usada sozinha.

Exemplos

Padrão

FallbackImage preenche o container pai (size-full). Dê um tamanho ao pai e use overflow-hidden para recortar no formato desejado.

Proporções

O gradiente sempre cobre a área toda, e o logotipo é redimensionado para caber dentro dela e fica centralizado, então nunca é cortado. Em áreas estreitas, o logotipo diminui para manter as margens.

Como capa substituta de card

Esse é o comportamento padrão de CardLesson, CardContinue e CardNews: quando o componente de imagem deles não recebe src nem children, o FallbackImage é renderizado automaticamente.

API

FallbackImage

PropriedadeTipoPadrãoDescrição
labelstring"Medway"Label acessível aplicado como aria-label no SVG.
classNamestring-Mesclado às classes do SVG. O componente já aplica size-full para preencher o container.
...propsReact.ComponentProps<"svg">-Aceita todas as props nativas de SVG.