OFRAG Frontend Components Library v0.0.0

Personal Data List: Without Edit Buttons 

<div class="personal-data-list">
      <div class="personal-data-list__column">
          <h4 class="personal-data-list__title">Account</h4>
          <div class="personal-data-list__area-row">
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">Username</div>
                  <div class="personal-data-list__value">max.muster@muster.com</div>
                  <div class="personal-data-list__key">Passwort</div>
                  <div class="personal-data-list__value">Rolle</div>
              </div>
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">Rolle</div>
                  <div class="personal-data-list__value">Administrator</div>
              </div>
          </div>
      </div>
      <div class="personal-data-list__column">
          <h4 class="personal-data-list__title">Persönliche Daten</h4>
          <div class="personal-data-list__area-row">
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">Anrede</div>
                  <div class="personal-data-list__value">Frau</div>
                  <div class="personal-data-list__key">Vorname</div>
                  <div class="personal-data-list__value">Sabine</div>
                  <div class="personal-data-list__key">Nachname</div>
                  <div class="personal-data-list__value">Schreiber</div>
              </div>
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">Geburtsdatum</div>
                  <div class="personal-data-list__value">28.01.1988</div>
                  <div class="personal-data-list__key">Sprache</div>
                  <div class="personal-data-list__value">Deutsch</div>
              </div>
          </div>
      </div>
      <div class="personal-data-list__column">
          <h4 class="personal-data-list__title">E-Mail</h4>
          <div class="personal-data-list__area-row">
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">E-Mail</div>
                  <div class="personal-data-list__value">s.schreiber@gmail.com</div>
              </div>
          </div>
      </div>
      <div class="personal-data-list__column">
          <h4 class="personal-data-list__title">Telefon</h4>
          <div class="personal-data-list__area-row">
              <div class="personal-data-list__area-column">
                  <div class="personal-data-list__key">Telefon Mobil</div>
                  <div class="personal-data-list__value">076 123 44 55</div>
              </div>
          </div>
      </div>
  </div>
 
{% include '@SharedComponents/modules/b2b-account/components/personal-data-list/personal-data-list.twig' %}
 
{
  "headingLevel": "4",
  "list": [
    {
      "name": "Account",
      "leftSideList": [
        {
          "key": "Username",
          "value": "max.muster@muster.com"
        },
        {
          "key": "Passwort",
          "value": "Rolle"
        }
      ],
      "rightSideList": [
        {
          "key": "Rolle",
          "value": "Administrator"
        }
      ]
    },
    {
      "name": "Persönliche Daten",
      "leftSideList": [
        {
          "key": "Anrede",
          "value": "Frau"
        },
        {
          "key": "Vorname",
          "value": "Sabine"
        },
        {
          "key": "Nachname",
          "value": "Schreiber"
        }
      ],
      "rightSideList": [
        {
          "key": "Geburtsdatum",
          "value": "28.01.1988"
        },
        {
          "key": "Sprache",
          "value": "Deutsch"
        }
      ]
    },
    {
      "name": "E-Mail",
      "leftSideList": [
        {
          "key": "E-Mail",
          "value": "s.schreiber@gmail.com"
        }
      ]
    },
    {
      "name": "Telefon",
      "leftSideList": [
        {
          "key": "Telefon Mobil",
          "value": "076 123 44 55"
        }
      ]
    }
  ]
}
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-account/components/personal-data-list/personal-data-list";
  • URL: /components/raw/personal-data-list/personal-data-list.scss
  • Filesystem Path: src/components/modules/b2b-account/components/personal-data-list/personal-data-list.scss
  • Size: 143 Bytes

No notes defined.