PixelHeadsLtd

<div class="flex-group">
    <div>auto</div>
    <div>auto</div>
    <div>auto</div>
</div>

<div class="flex-group">
    <div class="flex-1">flex 1</div>
    <div class="flex-2">flex 2</div>
    <div class="flex-3">flex 3</div>

PixelHeadsLtd

 <table class="boxed">
            <thead>
                <th>Status</th>
                <th>Approver</th>
                <th>Created date</th>
                <th>Modified date</th>
            </thead>
            <tbody>
                <tr *ngFor="let approval of approvals">
                        <td><span class="alert-shield" ngClass="{{ approval.statusClass }}">{{ approval.status }}</span></td>

PixelHeadsLtd

<div class="flex-group">
    <div>auto</div>
    <div>auto</div>
    <div>auto</div>
</div>

<div class="flex-group">
    <div class="flex-1">flex 1</div>
    <div class="flex-2">flex 2</div>
    <div class="flex-3">flex 3</div>

PixelHeadsLtd

 <table class="boxed">
            <thead>
                <th>Status</th>
                <th>Approver</th>
                <th>Created date</th>
                <th>Modified date</th>
            </thead>
            <tbody>
                <tr *ngFor="let approval of approvals">
                        <td><span class="alert-shield" ngClass="{{ approval.statusClass }}">{{ approval.status }}</span></td>

PixelHeadsLtd

<ag-grid-angular 
  #agGrid id="myGrid"
  class="ag-theme-balham ag-grid"
  [gridOptions]="gridOptions"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

PixelHeadsLtd

<!--Primary-->
<ph-button 
  [buttonSplit]="true"
  [navLeftside]="false" 
  [navBottom]="false"
  (buttonClick)="onClick()"
  fieldClass="boxed"
  buttonClass="bg-aa-light-blue-100 chevron-up"
  buttonLabel="Primary"
  buttonText="Publish"

PixelHeadsLtd

<section class="editorial-content">
  <h2>Feature paragraph</h2>
  <p class="feature">
    "Nothing there!" said Peter, and they all trooped out again—all except Lucy. She stayed
    behind because she thought it would be worth while trying the door of the wardrobe, even though she felt almost
    sure  that it would be locked. To her surprise it opened quite easily, and two moth-balls dropped out.
  </p>
</section>

PixelHeadsLtd

<!-- standard footer -->
<aa-footer leftPos="initial" [zIndex]="2">
  <!-- standard footer -->
  <ul *ngIf="standardFooter">
    <li><a href="https://www.angloamerican.com/site-services/privacy-policy" target="_blank">Privacy policy</a></li>
    <li><a href="https://www.angloamerican.com/site-services/accessibility" target="_blank">Accessibility</a></li>
    <li><a href="https://www.angloamerican.com/site-services/terms-and-conditions" target="_blank">Terms and conditions</a></li>
    <li><a href="https://www.angloamerican.com/site-services/cookie-policy" target="_blank">Cookie policy</a></li>
    <li><a href="http://www.yourvoice.angloamerican.com/" target="_blank">YourVoice</a></li>
    <li><a href="https://www.angloamerican.com/~/media/Files/A/Anglo-American-Group/PLC/documents/anglo-american-modern-slavery-act-report-2019.pdf" target="_blank">UK Modern Slavery Act</a></li>

PixelHeadsLtd

<aa-tab-navigation [routerLink]="'routerLink'" [routerLinkActive]="'routerLinkActive'" [routerLinkActiveOptions]="'routerLinkActiveOptions'"></aa-tab-navigation>

PixelHeadsLtd

// ----------------------------- GLOBAL BORDERS --------------------------

.bd-1 {border-width: 1px!important}
.bd-1-5 {border-width: .085rem!important}
.bd-2 {border-width: 2px!important}
.bd-3 {border-width: 3px!important}
.bd-4 {border-width: 4px!important}
.bd-5 {border-width: 5px!important}
.bd-6 {border-width: 6px!important}
// ...