Datenlisten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

Feld 1	Wert 1
Feld 2	Wert 2
Feld 3	Wert 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

Organisation	Lenzo AG, Filiale Aarau
Organisations-ID	J123456789
Organisations-Typ	Selbstregistriert
Erstellt	09.10.2015
Adresse	Strasse 1, Postfach, 8000 Zürich, Schweiz Dorfplatz 7, 5000 Aarau, Schweiz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

.datalist--smallkeys

Mit dem Modifikator .datalist--smallkeys versucht die Datenliste ihre linke Spalte so schmall als möglich zu gestalten.

Ort	Baden
Typ	Stadt
Jahr	1679

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

.datalist--largekeys

Mit dem Modifikator .datalist--largekeys gibt die Datenliste ihrer linke Spalte 50% der verfügbaren Breite.

Angegebener Hubraum	1200ccm
Jahressteuer	CHF 1574.-
Steuer (13.06.2017 - 31.12.2017)	CHF 779.-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

.datalist__entry--oversize

Mit dem Modifikator .datalist__entry--oversize werden lange Values auch mitten im Wort getrennt. Ein Beispiel sind URLs, welche mangels Leerschlag üblicherweise nicht umbrechen und rechts aus dem Layout fliessen. Der Effekt gilt nur für .datalist__value und nur auf jenen .datalist__entry mit dem Modifier.

UserID	690F093A701FD172BDCDA061A907E6EE
Geschlecht	Männlich
Website	https://www.ag.ch/de/weiteres/portrait/bildung_und_forschung/bildung_und_forschung.jsp
Rollen	cn=IDM_ADDM_READERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_DFRITAG_CUGUSERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_DISPATCHER_OFFICE_USERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_EnterpriseArchitect_OS2_USERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_ITAG_SOA_WIKI_USERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_KKV_USERS,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_PDQORG_00006122,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_KTAG_FACHSTELLE,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_APPROVE_EnterpriseArchitect_OS2,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=cug_dfr_kai,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch cn=IDM_repos_egov_reader,ou=Groups,ou=IDM,ou=Applications,o=ktag,c=ch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.

Beispiel für die Verwendung mit Listen

Verschachtelte unsortierte Liste

Erste Ebene, erstes Objekt Zweite Ebene, erstes Objekt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan tincidunt est. Aliquam accumsan leo eros, sed aliquet leo sagittis ac. Zweite Ebene, zweites Objekt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan tincidunt est. Aliquam accumsan leo eros, sed aliquet leo sagittis ac. Dritte Ebene Zweite Ebene, drittes Objekt Erste Ebene, zweites Objekt Erste Ebene, drittes Objekt

Gemischte Liste

Erste Ebene, erstes Objekt Zweite Ebene, erstes Objekt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan tincidunt est. Aliquam accumsan leo eros, sed aliquet leo sagittis ac. Zweite Ebene, zweites Objekt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan tincidunt est. Aliquam accumsan leo eros, sed aliquet leo sagittis ac. Dritte Ebene Dritte Ebene Dritte Ebene Zweite Ebene, drittes Objekt Erste Ebene, zweites Objekt Erste Ebene, drittes Objekt

Beispiel für die Verwendung in Kombination Linkliste

Linkliste	Beispiel eines internen Links Interner Anchor Link (innerhalb der aktuellen Seite) kontakt@ag.ch Profil.pdf weiterer Text kann einen Link begleiten.

Beispiel für die Verwendung mit einfachen Links mit Icons

Beispiel mit PDF-Datei	PDF-Datei
Beispiel mit Bild	Bild-Datei (.jpg)
Beispiel interner Link	Interner Link in Datenliste