Ir al contenido

Componentes · Ola 4 · Editorial

Figure

Una imagen con su proporción, su pie y su crédito; sin foto, la luz de Arche con el sigilo del producto. Sin radio, sin borde y sin velo; mientras carga, el marco es la capa elevada. Dentro de un Container en grilla puede sangrar hasta el ancho de página o de la ventana.

import { Figure } from '@archeblack/ui';

Ejemplos

Imagen con pie y crédito

wide es 4:3 en una figura de menos de 30rem (el teléfono), 16:9 de 30rem a 40rem (una tableta vertical) y 21:9 desde 40rem. Con width y height el lugar queda reservado mientras carga.

La carta XII del Tarot, El Colgado, sostenida en alto frente a un bosque desenfocado
El Colgado: la carta que mira el mundo al revés Foto: archivo de Hermes
Svelte 
<script lang="ts">
	import { Figure } from '@archeblack/ui';
	import cover from '../../_media/el-alma-pide-locura.jpg';
</script>

<!-- wide: 4:3 por debajo de 30rem, 16:9 de 30rem a 40rem y 21:9 desde 40rem (el ancho de la figura).
     Con crédito, el pie va sin punto final: los separa « · ». -->
<div style="width: 100%">
	<Figure
		src={cover}
		alt="La carta XII del Tarot, El Colgado, sostenida en alto frente a un bosque desenfocado"
		width={1600}
		height={676}
		caption="El Colgado: la carta que mira el mundo al revés"
		credit="Foto: archivo de Hermes"
	/>
</div>

Sin foto

La luz de Arche sobre el vacío con el sigilo del producto (mark), en el rol brand: dentro de data-product="hermes" sale en el acento de Hermes, con su halo; en Arche, blanco. Con alt es una imagen con nombre; con alt="", decorativa.

Svelte 
<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Figure } from '@archeblack/ui';
</script>

<!-- Sin foto: la luz sobre el vacío con el sigilo del producto, que mide de 24 a 40 px.
     El sigilo pinta con el rol brand: dentro de data-product="hermes" sale en el acento de Hermes. -->
<div
	style="display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--arche-spacing-6); width: 100%"
>
	<Figure data-product="hermes" alt="Portada de «El Daimon en la Máquina»" mark="hermes" />
	<Figure alt="" mark="arche" />
</div>

Sin foto en una tarjeta

En una figura de unos 280 px, el sigilo queda en su mínimo de 24 px: por debajo, su detalle se pierde.

4:3 a 280 px
1:1 a 280 px
Svelte 
<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Figure } from '@archeblack/ui';
</script>

<!-- En una tarjeta de unos 280 px, el sigilo queda en su mínimo de 24 px. -->
<div style="display: flex; flex-wrap: wrap; gap: var(--arche-spacing-6); width: 100%">
	<div style="inline-size: min(100%, 17.5rem)">
		<Figure data-product="hermes" alt="" mark="hermes" ratio="4:3" caption="4:3 a 280 px" />
	</div>
	<div style="inline-size: min(100%, 17.5rem)">
		<Figure data-product="hermes" alt="" mark="hermes" ratio="1:1" caption="1:1 a 280 px" />
	</div>
</div>

Si la imagen no carga

Pasa al estado sin foto y llama a onerror.

Lo Numinoso en CONTROL
La imagen no está: queda la luz con el sigilo.

Errores de carga: 0

Svelte 
<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Figure } from '@archeblack/ui';

	let failures = $state(0);
</script>

<!-- Si la imagen no carga, pasa al estado sin foto y avisa con onerror. -->
<div style="display: grid; gap: var(--arche-spacing-3); width: 100%; max-width: 30rem">
	<Figure
		data-product="hermes"
		src="/media/no-existe.jpg"
		alt="Lo Numinoso en CONTROL"
		mark="hermes"
		ratio="16:9"
		caption="La imagen no está: queda la luz con el sigilo."
		onerror={() => failures++}
	/>
	<p style="margin: 0; font-size: var(--arche-font-size-xs); color: var(--arche-color-text-muted)">
		Errores de carga: {failures}
	</p>
</div>

Proporciones

16:9, 4:3 y 1:1. La imagen se recorta al centro.

La carta XII del Tarot frente a un bosque
16:9
La carta XII del Tarot frente a un bosque
4:3
La carta XII del Tarot frente a un bosque
1:1
Svelte 
<script lang="ts">
	import { Figure } from '@archeblack/ui';
	import cover from '../../_media/el-alma-pide-locura.jpg';

	const alt = 'La carta XII del Tarot frente a un bosque';
</script>

<!-- Proporciones fijas: la imagen se recorta al centro (object-fit: cover). -->
<div
	style="display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--arche-spacing-6); width: 100%"
>
	<Figure src={cover} {alt} ratio="16:9" caption="16:9" />
	<Figure src={cover} {alt} ratio="4:3" caption="4:3" />
	<Figure src={cover} {alt} ratio="1:1" caption="1:1" />
</div>

Props

PropDescripción
src? string La imagen. Sin src, o si no carga, se ve el estado sin foto.
alt string Texto alternativo; "" si es decorativa. Sin foto, el marco lleva el mismo nombre.
width, height? number Tamaño intrínseco de la imagen: reserva su lugar antes de que cargue.
srcset, sizes? string Las del <img>.
ratio? 'wide' | '4:3' | '16:9' | '1:1' | 'auto' Por defecto 'wide'Proporción del marco. wide cambia con el ancho de la figura (con una consulta de contenedor: también dentro de una tarjeta): 4:3 por debajo de 30rem (480 px), 16:9 hasta 40rem (640 px) y 21:9 desde ahí. auto usa la de la imagen.
bleed? 'none' | 'page' | 'full' Por defecto 'none'Sangrado dentro de un Container con layout="grid": hasta el ancho de página o de borde a borde. El pie no sangra.
caption? string | Snippet Pie de foto. Con credit, sin punto final: los separa « · ».
credit? string | Snippet Crédito, después del pie y en text-subtle («Foto: Nombre»).
mark? MarkName Por defecto 'arche'Sigilo del estado sin foto: el del producto.
priority? boolean Por defecto falseLa imagen principal de la página: carga de inmediato (loading="eager", fetchpriority="high"). Sin priority, loading="lazy".
onerror? (event: Event) => void Se llama si la imagen no carga, después de pasar al estado sin foto. Otra src vuelve a intentarlo.
class? ClassValue Se suma a arche-figure.
...rest HTMLAttributes Van al <figure>.

Accesibilidad

  • Es un <figure> con su <figcaption>: el pie queda asociado a la imagen.
  • alt es obligatorio. Describe lo que muestra la imagen; si ya lo dice el pie o es decorativa, alt="".
  • Sin foto, el marco es una imagen con nombre (role="img" y aria-label con el alt), como una imagen que no carga; con alt="", queda oculto. El sigilo es decorativo.
  • Nada se anima: la luz del estado sin foto es fija.
  • En colores forzados la luz desaparece y quedan el borde y el sigilo en el color del texto.

Qué evitar

  • Esquinas, corchetes, rayados o la inicial del tema sobre la imagen. La imagen sola; sin foto, la luz con el sigilo (D4).
  • Radio o un velo oscuro sobre la imagen de portada. La imagen a sangre, sin radio, y el texto debajo (D10).
  • Un sigilo grande como logo en el estado sin foto. El tamaño de Figure: de 24 a 40 px. El sigilo es un detalle.
  • bleed fuera de un Container en grilla. <Container layout="grid">: sus líneas page y full son las que usa el sangrado.