DNDTools/src/app/journal/journal-spellcards/spellcard/spellcard.component.html

<div class="card-container">
  <div
    class="card-background"
    [style.background-color]="
      'var(--' + spell.school.toLowerCase() + '-background)'
    "
  ></div>
  <div
    class="title"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  >
    {{ spell.german }}
  </div>
  <img
    class="spell-image"
    [src]="'assets/images/spells/' + spell.image + '.jpg'"
    (error)="setBackupImage($event)"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
    alt="spell image"
  />
  <div
    class="info"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  >
    <div class="school">{{ schools[spell.school].display }}</div>
    <div
      class="level"
      [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
    >
      {{ spell.level }}
    </div>
  </div>
</div>