<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ion-content [fullscreen]="true"> <ion-row class="header-row"> <ion-col> <ion-item> <a href="#"> Explore </a> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label class="filter">Filter</ion-label> <ion-select value="filter"> <ion-select-option value="Latest First">Latest First</ion-select-option> <ion-select-option value="Oldest First">Oldest First</ion-select-option> </ion-select> </ion-item> </ion-col> </ion-row> <ion-row class="tile-banner"></ion-row> <div class="clearfix"></div> <div class="tiles-screen"> <div class="clearfix"></div> <div class="tile-heading" padding> <p class="bold font-large"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </p> </div> <ion-grid class="margin-15"> <ion-row> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Global Retail Payments </a> </ion-card> </ion-col> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Finance & Accounting </a> </ion-card> </ion-col> </ion-row> <ion-row> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Global Retail Payments </a> </ion-card> </ion-col> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Finance & Accounting </a> </ion-card> </ion-col> </ion-row> <ion-row> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Global Retail Payments </a> </ion-card> </ion-col> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Finance & Accounting </a> </ion-card> </ion-col> </ion-row> <ion-row> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Global Retail Payments </a> </ion-card> </ion-col> <ion-col> <ion-card class="green-tiles"> <a [routerLink]="['/tabs/tab2']" class="ion-activated text-white"> Finance & Accounting </a> </ion-card> </ion-col> </ion-row> </ion-grid> </div> </ion-content>

.tile-banner { background-image: url('../../assets/img/fis-insights-2020.jpg'); min-height: 40vh; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; width: 100%; align-items: center; justify-content: center; text-align: center; } .green-tiles { background-color: #4BCD3E; color: #fff; padding: 15px; margin: 5px; box-shadow: 0 2px 10px rgba(9,7,7,.2); } .tile-heading { margin: 20px 20px; }