Layouts

Overview The frameworks grid system follows the conventions used by the stanard 12 point bootstrap grid. Please referer to the bootstrap documentation for full details of how to implement the grid system. Grid usage Most of the layout from the UX prototypes are done using a standard grid of reponsive cards where we see a full width card for pages that list data and a 3 column grid on details pages with multiple tabs.

Basic alert format Edit Edit Edit Edit Edit <div class="row"> <div class="col-12 col-md-4 d-flex flex-column align-items-stretch"> <div class="card w-100 h-100 mb-3"> <div class="card-body"> <app-general-detail-content-card-view [generalDetails]="retailGroupDetails" entityType="retailgroup"></app-general-detail-content-card-view> </div> <div class="card-footer"> <a class="btn btn-link px-0" [routerLink]="" (click)="onEditGeneralDetailsButtonClick()"><i class="fa fa-lg function-edit"></i> Edit</a> </div> </div> </div> <div class="col-12 col-md-4 d-flex flex-column"> <div class="card w-100 h-100 mb-3"> <div class="card-body"> <app-address-card-content-view [address]="retailGroupDetails?