Key Values

Number
000999
Name
Simon
Organisation number
0412.345.614
Type
Demo
Start date
01.01.2024
End date
—
Form
— 
<div class="c-keyvalues">
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Number</div>
    <div class="c-keyvalue__value">000999</div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Name</div>
    <div class="c-keyvalue__value">Simon</div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Organisation number</div>
    <div class="c-keyvalue__value">0412.345.614</div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Type</div>
    <div class="c-keyvalue__value">Demo</div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Start date</div>
    <div class="c-keyvalue__value">01.01.2024</div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">End date</div>
    <div class="c-keyvalue__value">
      <span class="u-muted">&mdash;</span>
    </div>
  </div>
  <div class="c-keyvalue">
    <div class="c-keyvalue__key">Form</div>
    <div class="c-keyvalue__value">
      <span class="u-muted">&mdash;</span>
    </div>
  </div>
</div>

Inline forms and errors

Default input
Input with error

This is an error related to the input.

Select dropdown 
<div class="c-keyvalues">
  <div
    class="c-keyvalue c-keyvalue--compact c-keyvalue--edit"
  >
    <div class="c-keyvalue__key">Default input</div>
    <div class="c-keyvalue__value">
      <div class="c-textfield">
        <input
          class="c-textfield__input"
          type="text"
        />
      </div>
    </div>
  </div>
  <div
    class="c-keyvalue c-keyvalue--compact c-keyvalue--edit c-keyvalue--error"
  >
    <div class="c-keyvalue__key">Input with error</div>
    <div class="c-keyvalue__value">
      <div class="c-textfield c-textfield--error">
        <input
          class="c-textfield__input"
          type="text"
        />
      </div>
      <p class="u-danger u-paragraph u-text-sm u-py-4">
        This is an error related to the input.
      </p>
    </div>
  </div>
  <div
    class="c-keyvalue c-keyvalue--compact c-keyvalue--edit"
  >
    <div class="c-keyvalue__key">Select dropdown</div>
    <div class="c-keyvalue__value">
      <div class="c-select c-select--icon-right">
        <select class="c-select__input">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <div
          class="c-select__icon c-select__icon--right c-icon"
        >
          <!-- SVG element -->
        </div>
      </div>
    </div>
  </div>
</div>

Key sizes

Default
Regular value
Default
Regular value
Default
Regular value
Small
Regular value
Small
Regular value
Small
Regular value
Extra small
Regular value
Extra small
Regular value
Extra small
Regular value 
<div class="o-stack o-stack--vertical o-stack--16">
  <div class="c-keyvalues">
    <div class="c-keyvalue">
      <div class="c-keyvalue__key">Default</div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div class="c-keyvalue__key">Default</div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div class="c-keyvalue__key">Default</div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
  </div>
  <div class="c-keyvalues">
    <div class="c-keyvalue">
      <div class="c-keyvalue__key c-keyvalue__key--small">
        Small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div class="c-keyvalue__key c-keyvalue__key--small">
        Small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div class="c-keyvalue__key c-keyvalue__key--small">
        Small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
  </div>
  <div class="c-keyvalues">
    <div class="c-keyvalue">
      <div
        class="c-keyvalue__key c-keyvalue__key--extra-small"
      >
        Extra small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div
        class="c-keyvalue__key c-keyvalue__key--extra-small"
      >
        Extra small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
    <div class="c-keyvalue">
      <div
        class="c-keyvalue__key c-keyvalue__key--extra-small"
      >
        Extra small
      </div>
      <div class="c-keyvalue__value">Regular value</div>
    </div>
  </div>
</div>