Figure

Figure is a presentational <figure> with an image and an optional caption. Image optimization is out of scope. Use src/alt for a simple image, or pass a custom img element to control srcSet/sizes and other attributes.

// apps/docs/src/components/examples/figure/default/react.tsx
import { Figure } from '@cloudvoyant/helical-react';

const src = `${import.meta.env.BASE_URL}figure-example.svg`;

export default function ReactFigureDefault() {
  return (
    <Figure
      caption="Sunrise over layered mountain ranges"
      img={
        <img
          src={src}
          srcSet={`${src} 1x, ${src} 2x`}
          sizes="(min-width: 640px) 640px, 100vw"
          alt="Sunrise over layered mountain ranges"
          loading="lazy"
          className="rounded-lg border border-border"
        />
      }
    />
  );
}

<!-- apps/docs/src/components/examples/figure/default/svelte.svelte -->
<script lang="ts">
  import { Figure } from '@cloudvoyant/helical-svelte';

  const src = `${import.meta.env.BASE_URL}figure-example.svg`;
</script>

<Figure caption="Sunrise over layered mountain ranges">
  {#snippet img()}
    <img
      {src}
      srcSet={`${src} 1x, ${src} 2x`}
      sizes="(min-width: 640px) 640px, 100vw"
      alt="Sunrise over layered mountain ranges"
      loading="lazy"
      class="rounded-lg border border-border"
    />
  {/snippet}
</Figure>

Examples

API Reference

Prop	Type	Description
`src`	`string`	Image URL (used to build a default `<img>`).
`alt`	`string`	Accessible alternative text.
`img`	`ReactNode` / snippet	Custom image element (e.g. `<img srcSet="…">`); replaces the default image.
`caption`	`string`	Optional caption.