LabeledFieldGrid

Two-column grid for stacking labeled fields.

Usage

svelte

<script lang="ts">
  import { LabeledField, LabeledFieldGrid } from "@milandekruijf/ui/svelte";
</script>

<LabeledFieldGrid>
  <LabeledField name="Name">Milan de Kruijf</LabeledField>
  <LabeledField name="Role">Developer</LabeledField>
  <LabeledField name="Location">Amsterdam, NL</LabeledField>
  <LabeledField name="Focus">Design systems</LabeledField>
</LabeledFieldGrid>

Examples

Two-column grid

Name

Milan de Kruijf

Role

Developer

Location

Amsterdam, NL

Focus

Design systems

<script lang="ts">
  import { LabeledField, LabeledFieldGrid } from "@milandekruijf/ui/svelte";
</script>

<LabeledFieldGrid>
  <LabeledField name="Name">Milan de Kruijf</LabeledField>
  <LabeledField name="Role">Developer</LabeledField>
  <LabeledField name="Location">Amsterdam, NL</LabeledField>
  <LabeledField name="Focus">Design systems</LabeledField>
</LabeledFieldGrid>

Props

Prop	Type	Default	Description
class?	`string`	—	Extra classes merged after the grid styles.
children	`Snippet`	—	`LabeledField` children; use their `wide` prop to span.