Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Alerts
Basic alert format
<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?.address"></app-address-card-content-view>
</div>
<div class="card-footer">
<a class="btn btn-link px-0" [routerLink]="" (click)="onEditAddressButtonClick()"><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-contact-info-card-content-view [contactInfo]="retailGroupDetails?.contactInfo"></app-contact-info-card-content-view>
</div>
<div class="card-footer">
<a class="btn btn-link px-0" [routerLink]="" (click)="onEditContactDetailButtonClick()"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
</div>
<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-industry-info-card-content-view entityType="retailgroup" [industryInfo]="retailGroupDetails?.industryInfo"></app-industry-info-card-content-view>
</div>
<div class="card-footer">
<a class="btn btn-link px-0" [routerLink]="" (click)="onEditIndustryInfoButtonClick()"><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-system-info-card-content-view [systemInfo]="retailGroupDetails?.systemInfo"></app-system-info-card-content-view>
</div>
<div class="card-footer">
<a class="btn btn-link px-0" [routerLink]="" (click)="onEditSystemInfoButtonClick()"><i class="fa fa-lg function-edit"></i> Edit</a>
</div>
</div>
</div>
</div>