Header (von Inhaltselementen)

Der Header ist ein Standard Element, welches jedem Inhaltselement zur Verfügung stehen sollte. Um dies zu erreichen, sollten in jedem Mask Element folgende Attribute zur Verfügung gestellt werden:

  • header
  • header_layout
  • header_link
  • header_position
  • subheader

Damit kann dann in jedem Template/Komponente das Molecule "Header.ConvertFromContentElement" benutzt werden. Für den Styleguide wird die direkte Komponente Header benutzt. Sollte der Header nicht in der Frontend Ausgabe zur Verfügung stehen sollen, dann sollte die Header Komponente trotzdem benutzt werden und ein Header Layout 100 ausgewählt werden, damit dies als Element zu Strukturierung im Backend genutzt werden kann.

Index




Header Only




Subheader only




Header und

Subheader




Header Typen

Der Subheader wird abhängig vom Header Layout dargestellt. Dieser ist immer 1 kleiner als der Header, außer der Header ist vom Typ > H3 (dann ist dieser h4) oder manuell gesetzt. Die Typen H5 und H6 sind im StarMoney Projekt nicht integriert.

Header Typ: PRIMARY

Subheader




Header Typ: SECONDARY

Subheader




Header Typ: TERTIARY

Subheader




Header Typ: QUATERNARY

Subheader




Header Typ: QUINARY

Subheader




Header Typ: SENARY

Subheader




Subheader




Header Position

Der Subheader wird wie der Header dargestellt.

Justify Type: start

Subheader




Justify Type: left

Subheader




Justify Type: center

Subheader




Justify Type: end

Subheader




Justify Type: right

Subheader