# LabeledValue

Das LabeledValue zeigt eine statische Information und setzt sie durch ein beschreibendes Label in den passenden Kontext.

## Guidelines

# Grundlagen

## Best practices

- Wähle kurze, prägnante [Labels](/04-components/content/label/overview), die
  den Wert eindeutig beschreiben.
- Nutze ein [ColumnLayout](/04-components/structure/column-layout/overview), um
  mehrere LabeledValues nebeneinander darzustellen.
- Sortiere LabeledValues nach ihrer Wichtigkeit und bilde sinnvolle
  Gruppierungen.

---

# Anwendung

## Position

- Um viele Informationen übersichtlich darzustellen, verwende LabeledValues
  innerhalb eines
  [ColumnLayouts](/04-components/structure/column-layout/overview).
- Achte auf ein übersichtliches Layout und stelle nicht zu viele Informationen
  in einer Zeile dar.
- Sortiere nach Priorität und bilde sinnvolle Gruppen (z. B. Name und Adresse).

**✅ Do**

Zeige die relevantesten LabeledValues zuerst an und bilde sinnvolle Gruppen.

```tsx
import {
  ColumnLayout,
  Content,
  CopyButton,
  IconExternalLink,
  InlineCode,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout>
  <LabeledValue>
    <Label>Projektname</Label>
    <Content>Dolce Vita</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Short-ID</Label>
    <Content>p-wut3uw</Content>
    <CopyButton text="p-wut3uw" />
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
    <CopyButton text="p-lol3qe.project.space" />
  </LabeledValue>

  <LabeledValue>
    <Label>Server</Label>
    <Link>Dolce-Server-01</Link>
  </LabeledValue>

  <LabeledValue>
    <Label>A-Record</Label>
    <InlineCode>45.144.187.21</InlineCode>
    <CopyButton text="45.144.187.21" />
  </LabeledValue>

  <LabeledValue>
    <Label>Erstellungsdatum</Label>
    <Content>06.12.2023 um 11:40 Uhr</Content>
  </LabeledValue>
</ColumnLayout>
```

**⛔️ Don't**

Weniger relevante Informationen sollten nicht am Anfang stehen. Versuche
  außerdem, unausgeglichene Designs zu vermeiden.

```tsx
import {
  ColumnLayout,
  Content,
  CopyButton,
  IconExternalLink,
  InlineCode,
  Label,
  LabeledValue,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<ColumnLayout l={[1, 1, 1, 1]}>
  <LabeledValue>
    <Label>Erstellungsdatum</Label>
    <Content>06.12.2023 um 11:40 Uhr</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Short-ID</Label>
    <Content>p-wut3uw</Content>
    <CopyButton text="p-wut3uw" />
  </LabeledValue>

  <LabeledValue>
    <Label>A-Record</Label>
    <InlineCode>45.144.187.21</InlineCode>
    <CopyButton text="45.144.187.21" />
  </LabeledValue>

  <LabeledValue>
    <Label>Server</Label>
    <Link>Dolce-Server-01</Link>
  </LabeledValue>

  <LabeledValue>
    <Label>Projektname</Label>
    <Content>Dolce Vita</Content>
  </LabeledValue>

  <LabeledValue>
    <Label>Projektdomain</Label>
    <Link>
      <Text>p-lol3qe.project.space</Text>
      <IconExternalLink />
    </Link>
    <CopyButton text="p-lol3qe.project.space" />
  </LabeledValue>
</ColumnLayout>
```

---

## Writing guidelines

### Label

- Achte darauf, dass das [Label](/04-components/content/label/overview) kurz
  (1-3 Wörter) und prägnant ist.
- Es sollte jederzeit vollständig sichtbar bleiben und eine einfache Sprache
  verwenden.