<header class="card__header">
  <div class="card__board">
  <span class="card__id">
    <span class="for-screen-reader">Card number</span>
    <%= notification.card.number %>
  </span>
    <span class="card__board-name">
    <span class="overflow-ellipsis"><%= notification.card.board.name %></span>
  </span>
  </div>

  <div class="card__notification-meta overflow-ellipsis flex-item-grow flex-item-no-shrink txt-align-end">
    <span class="card__creator"><%= notification.creator.familiar_name %></span>
  </div>

  <div class="card__notification-meta overflow-ellipsis flex-item-no-shrink">
    <span class="card__timestamp"><%= local_datetime_tag(notification.created_at, style: :timeordate) %></span>
  </div>

  <div class="card__notification-meta flex-item-no-shrink">
    <%= yield %>
  </div>
</header>
