Report, figure · Klarhimmel UI

Install

npx shadcn add @klarhimmel/report-figure

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ReportFigure from '@/components/klarhimmel/blocks/report-figure';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReportFigure props={{
          "title": "The two candidates",
          "src": "",
          "alt": "Two layouts side by side: a calm one with a single column and a bold one with a large heading",
          "caption": "Figure 1: version A on the left, version B on the right.",
          "width": "text"
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/report-figure';

Also called

report/figure

About: A picture in a report, shown whole (never cropped) with an optional title and a caption, for decisions that need a visual pick.
Category: A document for a reader: key figures, decisions with a recommended default, long-cell tables, timelines, callouts, sources and prose. Rendered to one HTML file by kh-report.

Notes

When to use it

A picture inside a report, for a decision that needs a visual pick such as two layouts or two logos. For a table of numbers use `report-table`; for a boxed aside use `report-callout`.

Writing for it

- Write the alt text (300 characters) as what the pictures differ in, because the person choosing may not be able to see them. 'Version A on the left has a single column; version B on the right has a large heading' is more useful than 'Layout options'. - Put 'Figure 1' at the start of the caption (300 characters) when a decision card refers to the picture by number. Nothing links the two for you, so the number is the connection. - Set width to wide for screenshots with small text and leave it unset for diagrams that read fine at the reading width.

Watch out for

In kh-report the src is a local file path, turned into one embedded data address at build time. A web address is refused with an error and a file over 2 MB is refused naming the file, so shrink screenshots before you write the report.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ReportFigure from '@/components/klarhimmel/blocks/report-figure';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReportFigure props={{
          "title": "The two candidates",
          "src": "",
          "alt": "Two layouts side by side: a calm one with a single column and a bold one with a large heading",
          "caption": "Figure 1: version A on the left, version B on the right.",
          "width": "text"
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`title`	`string`	`'The two candidates'`	Text, up to 80 characters.
`src`	`string`	`''`	Text, up to 3000000 characters.
`alt`	`string`	`'Two layouts side by side: a calm on…'`	Text, up to 300 characters.
`caption`	`string`	`'Figure 1: version A on the left, ve…'`	Text, up to 300 characters.
`width`	`'text' \| 'wide'`	`'text'`	One of 'text', 'wide'. Optional; empty is not rendered.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.