Can anyone help me by creating this page design

Ionic Framework ionic-v3
1

Annotation1
Annotation1.png309×587 94.1 KB

I tried but i am not able to get it done properly
Plz help

<ion-header>
  <ion-navbar>
    <ion-title>Gallery</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item no-lines>
    <p>Doctors</p>
    <ion-scroll scrollX="true" scroll-avatar>
      <ion-avatar>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item">
        </ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item">
        </ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item">
        </ion-img>
      </ion-avatar>
    </ion-scroll>
  </ion-item>
  <ion-item no-lines>
    <p>Family & Friends</p>
    <ion-scroll scrollX="true" scroll-avatar>
      <ion-avatar>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
      </ion-avatar>
    </ion-scroll>
  </ion-item>
  <ion-item no-lines>
    <p>Patients</p>
    <ion-scroll scrollX="true" scroll-avatar>
      <ion-avatar>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
        <ion-img src="assets/imgs/doctor.svg" (click)="clickImage(item)" class="scroll-item"></ion-img>
      </ion-avatar>
    </ion-scroll>
  </ion-item>
  <ion-list>
    <ion-item-group>
      <ion-item-divider color="light">
        user_name
        <button ion-button clear item-end (click)="goToSummary()" icon-start>
          Summary <ion-icon name='ios-arrow-forward' is-active="false"></ion-icon>
        </button>
      </ion-item-divider>
    </ion-item-group>

    <ion-grid>
      <ion-row>
        <ion-col col-2>
          <h2>Date</h2>
        </ion-col>

        <ion-col col-4>
          <ion-grid>
            <ion-row>
              <ion-col col-6>
                <ion-thumbnail item-start>
                  <img src="assets/imgs/doctor.svg">
                </ion-thumbnail>
              </ion-col>
              <ion-col col-6>
                <ion-thumbnail item-start>
                  <img src="assets/imgs/doctor.svg">
                </ion-thumbnail>
              </ion-col>
            </ion-row>

            <ion-row>
              <ion-col col-6>
                <ion-thumbnail item-start>
                  <img src="assets/imgs/doctor.svg">
                </ion-thumbnail>
              </ion-col>
              <ion-col col-6>
                <ion-thumbnail item-start>
                  <img src="assets/imgs/doctor.svg">
                </ion-thumbnail>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>

        <ion-col col-6>
          <p>content from diary</p>
        </ion-col>

      </ion-row>
    </ion-grid>


  </ion-list>
</ion-content>

This is the code i am trying but not able to get the badges properly nothing else