Listeneinträge nach erstem Buchstaben gruppieren

Veröffentlichungsdatum: 03. Januar 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Listeneinträge lassen sich nach dem ersten Buchstaben gruppiert auflisten. Dabei wird das Data-Attribut headlinefirstletter vor dem ersten Eintrag, des jeweiligen Buchstabens angezeigt. Hierzu sind keine Anpassungen am XSLT notwendig, da die ersten Buchstaben per CSS-Content ausgegeben werden können.

Ergänzung in der Listenvariante, um den ersten Buchstaben vor dem jeweils ersten Eintrag anzuzeigen

.listEntry{

  &[data-headlinefirstletter], &:first-child {
    border-top:solid 1px $borderColorLines;
  }

  .listEntryInner {
    @extend .clearAfter;
    padding:15px 0;

    .listEntryTitle:last-child, .listEntryDescription:last-child {
      margin:0;
    }
  }  

  &[data-headlinefirstletter] {

    margin-top:5rem;

    &:before {
      position:absolut;
      display:block;
      margin-top:-3rem;
      line-height:3rem;
      font-size:2.6rem;
      color:$fontColorWeak;
      content:attr(data-headlinefirstletter);
    }
  }
}