Brand and content

ResponsiveImage

Intrinsic image with srcset and loading controls.

Live example

Abstract blue geometric landscape — A responsive image with intrinsic dimensions.

Abstract blue geometric landscape at night — A responsive image with intrinsic dimensions.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { ResponsiveImage } from "@cofob/design-system-react";

/**
 * Complete ResponsiveImage parameter reference.
 * @param image
 *   type: ResponsiveImageModel
 *   required
 *   example: {image}
 * @param darkImage
 *   type: ResponsiveImageModel
 *   default: —
 *   example: {darkImage}
 * @param caption
 *   type: string | renderable content
 *   default: —
 *   example: "The dashboard in light and dark themes."
 * @param aspectRatio
 *   type: CSS aspect-ratio string
 *   default: intrinsic image ratio
 *   example: "16 / 9"
 * @param image attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ResponsiveImageExample() {
  return (
    <ResponsiveImage image={image} />
  );
}

Svelte

<script lang="ts">
  import { ResponsiveImage } from "@cofob/design-system-svelte";

  // Complete ResponsiveImage parameter reference.
  // image
  //   type: ResponsiveImageModel
  //   required
  //   example: {image}
  // darkImage
  //   type: ResponsiveImageModel
  //   default: —
  //   example: {darkImage}
  // caption
  //   type: string | renderable content
  //   default: —
  //   example: "The dashboard in light and dark themes."
  // aspectRatio
  //   type: CSS aspect-ratio string
  //   default: intrinsic image ratio
  //   example: "16 / 9"
  // fit
  //   type: "cover" | "contain" | "fill" (Svelte)
  //   default: "cover"
  //   example: "cover"
  // priority
  //   type: boolean (Svelte)
  //   default: false
  //   example: true
  // image attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<ResponsiveImage image={image} />

HTML

<!--
  Complete ResponsiveImage parameter reference.
  image
    type: ResponsiveImageModel
    required
    example: {image}
  darkImage
    type: ResponsiveImageModel
    default: —
    example: {darkImage}
  caption
    type: string | renderable content
    default: —
    example: "The dashboard in light and dark themes."
  aspectRatio
    type: CSS aspect-ratio string
    default: intrinsic image ratio
    example: "16 / 9"
  fit
    type: "cover" | "contain" | "fill" (Svelte)
    default: "cover"
    example: "cover"
  priority
    type: boolean (Svelte)
    default: false
    example: true
  image attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<img class="cf-responsive-image" src="image.jpg" alt="Description" />

Contract

CSS selector	`.cf-responsive-image`
Adapters	Native · React · Svelte
Primary props	image · darkImage · caption · aspectRatio · fit · priority · image attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`image`required	`ResponsiveImageModel`	`required`	React · Svelte · HTML	`{image}`	Light-theme responsive source, alternative text, dimensions, and srcset data.
`darkImage`	`ResponsiveImageModel`	`—`	React · Svelte · HTML	`{darkImage}`	Optional dark-theme source with its own intrinsic metadata.
`caption`	`string \| renderable content`	`—`	React · Svelte · HTML	`"The dashboard in light and dark themes."`	Visible caption for a figure or table.
`aspectRatio`	`CSS aspect-ratio string`	`intrinsic image ratio`	React · Svelte · HTML	`"16 / 9"`	Reserves layout space before the image loads.
`fit`	`"cover" \| "contain" \| "fill" (Svelte)`	`"cover"`	Svelte · HTML	`"cover"`	Svelte object-fit behavior.
`priority`	`boolean (Svelte)`	`false`	Svelte · HTML	`true`	Svelte eager-loading and high-priority hint.
`image attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.