ISA-Frontend/src/app/components/book-card/book-card.component.html

<div class="card-container">
  <div class="card-title align-left">
    <span>{{card.cardTitle}}</span>
  </div>
  <div class="card-items">
    <div class="item align-left">
      <div class="item-logo">
        <img class="book-image" src="../../../assets/images/{{card.books.firstBookIcon}}">
      </div>
      <div class="item-content">
        <div class="book-author wrap-text-more">{{card.books.firstBookAuthor}}</div>
        <div class="book-title wrap-text-more">{{card.books.firstBookTitle}}</div>
        <div class="item-detail">
          <div class="book-type">
            <div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
            <div class="item-detail wrap-text-more">{{card.books.firstBookType}}</div>
            <div class="separator">|</div>
          </div>
          <div class="book-language">
            <div class="item-details wrap-text-more">{{card.books.firstBookLanguage}}</div>
            <div class="separator">|</div>
          </div>
          <div class="item-details wrap-text-more">{{card.books.firstBookPrice}}</div>
        </div>
      </div>
    </div>
    <div class="item align-left">
        <div class="item-logo">
          <img class="book-image" src="../../../assets/images/{{card.books.secondBookIcon}}">
        </div>
        <div class="item-content">
          <div class="book-author wrap-text-more">{{card.books.secondBookAuthor}}</div>
          <div class="book-title wrap-text-more">{{card.books.secondBookTitle}}</div>
          <div class="item-detail">
            <div class="book-type">
              <div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
              <div class="item-detail wrap-text-more">{{card.books.secondBookType}}</div>
              <div class="separator">|</div>
            </div>
            <div class="book-language">
              <div class="item-details wrap-text-more">{{card.books.secondBookLanguage}}</div>
              <div class="separator">|</div>
            </div>
            <div class="item-details wrap-text-more">{{card.books.secondBookPrice}}</div>
          </div>
        </div>
      </div>
  </div>
</div>