NamedValue

Two-column label/value row that participates in a parent grid.

Usage

svelte

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { NamedValue } from "@milandekruijf/ui/svelte";

  const gridClass = css({
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    columnGap: 8,
  });
</script>

<div class={gridClass}>
  <NamedValue name="Location">Amsterdam, NL</NamedValue>
  <NamedValue name="Role">Developer</NamedValue>
</div>

Examples

Grid layout

Location

Amsterdam, NL

Role

Developer

Focus

Design systems

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { NamedValue } from "@milandekruijf/ui/svelte";

  const gridClass = css({
    display: "grid",
    gridTemplateColumns: { base: "1fr", sm: "auto minmax(0, 1fr)" },
    columnGap: { sm: 8 },
    rowGap: 2,
    maxW: "28rem",
  });
</script>

<div class={gridClass}>
  <NamedValue name="Location">Amsterdam, NL</NamedValue>
  <NamedValue name="Role">Developer</NamedValue>
  <NamedValue name="Focus">Design systems</NamedValue>
</div>

Props

Prop	Type	Default	Description
name	`string`	—	Label rendered in the first column.
class?	`string`	—	Extra classes merged after the base classes.
children	`Snippet`	—	Value content rendered in the second column.

Displays with `display: contents`, so place it inside a grid or flex container. Remaining props are forwarded.