Image

A semantic image surface with optional selection, corner resizing, and text wrapping.

Image

A semantic image surface with automatic sizing and a text alternative.

Green hills, a farmhouse, and sheep beside a winding stream

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-image/ui-image.html"
>

<ui-image
  src="/_looma/pastoral.svg"
  alt="Green hills, a farmhouse, and sheep beside a winding stream"
  width="320"
  height="200"
></ui-image>

<script setup>
  import { UiImage } from "@threadlabs/looma";
</script>

<template>
  <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    :width="320"
    :height="200"
  />
</template>

import { UiImage } from "@threadlabs/looma";

export default function Example() {
  return <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    width={320}
    height={200}
  />;
}

/** @jsxImportSource preact */
import { UiImage } from "@threadlabs/looma";

export default function Example() {
  return <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    width={320}
    height={200}
  />;
}

<script>
  import { UiImage } from "@threadlabs/looma";
</script>

<UiImage
  src="/_looma/pastoral.svg"
  alt="Green hills, a farmhouse, and sheep beside a winding stream"
  width={320}
  height={200}
/>

import { Component } from "@angular/core";
import { UiImage } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiImage],
  template: `
    <figure
      ui-image
      [src]="'/_looma/pastoral.svg'"
      [alt]="'Green hills, a farmhouse, and sheep beside a winding stream'"
      [width]="320"
      [height]="200"
    ></figure>
  `,
})
export default class Example {}

Selected and resizable

Four corner handles keep the intrinsic ratio while reporting preview, commit, and cancel intent; a consumer persists committed dimensions.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-image/ui-image.html"
>

<ui-image
  src="/_looma/pastoral.svg"
  alt="Green hills, a farmhouse, and sheep beside a winding stream"
  width="320"
  height="200"
  placement="center"
  selected
  resizable
></ui-image>

<script setup>
  import { UiImage } from "@threadlabs/looma";
</script>

<template>
  <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    :width="320"
    :height="200"
    placement="center"
    :selected="true"
    :resizable="true"
  />
</template>

import { UiImage } from "@threadlabs/looma";

export default function Example() {
  return <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    width={320}
    height={200}
    placement="center"
    selected
    resizable
  />;
}

/** @jsxImportSource preact */
import { UiImage } from "@threadlabs/looma";

export default function Example() {
  return <UiImage
    src="/_looma/pastoral.svg"
    alt="Green hills, a farmhouse, and sheep beside a winding stream"
    width={320}
    height={200}
    placement="center"
    selected
    resizable
  />;
}

<script>
  import { UiImage } from "@threadlabs/looma";
</script>

<UiImage
  src="/_looma/pastoral.svg"
  alt="Green hills, a farmhouse, and sheep beside a winding stream"
  width={320}
  height={200}
  placement="center"
  selected
  resizable
/>

import { Component } from "@angular/core";
import { UiImage } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiImage],
  template: `
    <figure
      ui-image
      [src]="'/_looma/pastoral.svg'"
      [alt]="'Green hills, a farmhouse, and sheep beside a winding stream'"
      [width]="320"
      [height]="200"
      [placement]="'center'"
      [selected]="true"
      [resizable]="true"
    ></figure>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: figure

Attributes

Name	Description	Property	Type	Default	Allowed values
`alt`	A text alternative for the image.	`alt`	`string`		`—`
`height`	Image height in CSS pixels; resizing preserves the intrinsic aspect ratio.	`height`	`integer`	`—`	`—`
`placement`	Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.	`placement`	`keyword`	`block`	`block, center, wrap-left, wrap-right`
`resizable`	Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.	`resizable`	`boolean`	`false`	`—`
`selected`	Outlines the media as the current selection.	`selected`	`boolean`	`false`	`—`
`src`	The image source, used by the default media.	`src`	`string`		`—`
`width`	Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping.	`width`	`integer`	`—`	`—`

Framework props

Name	Type	Default	Allowed values
`alt`	`string`		`—`
`height`	`number`	`—`	`—`
`placement`	`"block" \| "center" \| "wrap-left" \| "wrap-right"`	`block`	`block, center, wrap-left, wrap-right`
`resizable`	`boolean`	`false`	`—`
`selected`	`boolean`	`false`	`—`
`src`	`string`		`—`
`width`	`number`	`—`	`—`

Events

Name	Detail	Description
`resize`	`object` `width`: `integer` (required) `height`: `integer` (required) `phase`: `keyword` (required) `trigger`: `keyword` (required)	Emitted with the declared detail payload.

Slots

Name	Purpose
`media`	Named content for the media region.
`controls`	Named content for the controls region.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-border-width`	`—`
`--ui-focus-ring`	`—`
`--ui-focus-width`	`—`
`--ui-radius-md`	`—`
`--ui-radius-sm`	`—`
`--ui-space-3`	`—`
`--ui-space-4`	`—`
`--ui-surface`	`—`