Ionic 4 badge on card?

Hello everyone,

I was wondering if the Ionic team had any future plans for implementing a badge on the new cards in Ionic 4?


Something like this would be very useful for a multitude of projects.

Until a feature is introduced, however, I was wondering if there were any good css classes to be used as a substitute?

I know m replying late to this but here’s how it can be handled, hope it’d help someone:

<ion-card mode='ios' class="new-msgs">
       <ion-fab vertical="top" horizontal="end" edge slot="fixed">

in your page’s scss file:

ion-card {
  &.unread-msg {
      ion-fab {
      margin: 10px 0px;
      background: var(--ion-color-primary);
      border-radius: 50%;
      padding: 2px 10px 5px 10px;
      color: var(--ion-color-primary-contrast);
      font-size: 11px;
      line-height: 2;
      right: calc(var(--ion-safe-area-right, 0px) - 10px);

here’s how it looks like now:


1 Like