<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">*****</div>
<a href="#" class="button-icon--icon-text-regular -icon-edit">
Passwort ändern
</a>
</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 class="personal-data-list__key">Kundennummer</div>
<div class="personal-data-list__value">999999</div>
<a href="#" class="button-icon--icon-text-regular -icon-edit">
Kundennummer wechseln
</a>
</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>
<a href="#" class="button-icon--icon-text-regular -icon-edit">
Daten bearbeiten
</a>
</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>
<a href="#" class="button-icon--icon-text-regular -icon-edit">
E-Mail Adresse bearbeiten
</a>
</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>
<a href="#" class="button-icon--icon-text-regular -icon-edit">
Telefonnummer wechseln
</a>
</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": "*****",
"change": {
"variant": "icon-text-regular",
"title": "Passwort ändern",
"icon": "edit",
"type": "a",
"href": "#"
}
}
],
"rightSideList": [
{
"key": "Rolle",
"value": "Administrator"
},
{
"key": "Kundennummer",
"value": "999999",
"change": {
"variant": "icon-text-regular",
"title": "Kundennummer wechseln",
"icon": "edit",
"type": "a",
"href": "#"
}
}
]
},
{
"name": "Persönliche Daten",
"leftSideList": [
{
"key": "Anrede",
"value": "Frau"
},
{
"key": "Vorname",
"value": "Sabine"
},
{
"key": "Nachname",
"value": "Schreiber",
"change": {
"variant": "icon-text-regular",
"title": "Daten bearbeiten",
"icon": "edit",
"type": "a",
"href": "#"
}
}
],
"rightSideList": [
{
"key": "Geburtsdatum",
"value": "28.01.1988"
},
{
"key": "Sprache",
"value": "Deutsch"
}
]
},
{
"name": "E-Mail",
"leftSideList": [
{
"key": "E-Mail",
"value": "s.schreiber@gmail.com",
"change": {
"variant": "icon-text-regular",
"title": "E-Mail Adresse bearbeiten",
"icon": "edit",
"type": "a",
"href": "#"
}
}
]
},
{
"name": "Telefon",
"leftSideList": [
{
"key": "Telefon Mobil",
"value": "076 123 44 55",
"change": {
"variant": "icon-text-regular",
"title": "Telefonnummer wechseln",
"icon": "edit",
"type": "a",
"href": "#"
}
}
]
}
]
}
import './personal-data-list.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-account/components/personal-data-list/personal-data-list";
No notes defined.