PixelHeadsLtd

// MARGIN
.boxed {margin-top: 0!important;}
.margin-auto {margin: auto!important;}
.margin-0 {margin: 0!important;}
.margin-0-25 {margin: .25rem!important;}
.margin-0-5 {margin: .5rem!important;}
.margin-0-75 {margin: .75rem!important;}
.margin-1 {margin: 1rem!important;}
.margin-1-25 {margin: 1.25rem!important;}
.margin-1-5 {margin: 1.5rem!important;}

PixelHeadsLtd

<ph-card 
  [cardDetailed]="true"
  topPos="-1rem" // this setting is for when nested in a blade
  leftPos="-1.25rem" // this setting is for when nested in a blade
  cardWidth="calc(100% + 1.5rem)" // this setting is for when nested in a blade
  cardName="Person card name" 
  [imgPath]="imgPath"
  >
  <ng-container card-detailed-content>
    <h2>Obi-Wan Kenobi</h2>

PixelHeadsLtd

.text-info {color: _palette(aa-light-blue-100) !important}
.text-error {color: _palette(aa-red-100) !important}
.text-warning {color: _palette(aa-orange-100) !important}
.text-success {color: _palette(aa-green-100) !important}
.text-bold {font-family: _font(family-bold) !important}
.text-semi-bold {font-family: _font(family-medium) !important}
.text-regular {font-family: _font(family-regular) !important}
.text-default {font-family: _font(family-default) !important}
.text-light {font-family: _font(family-light) !important}
.text-italic, .italic {font-style: _font(style-italic) !important}

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>

PixelHeadsLtd

<nav>
  <ph-tab-navigation 
    [ngTemplate]="true" 
    [displayTabContent]="false" 
    (tabChanged)="tabChanged($event)"
    (closeTab)="onCloseTab($event)"
    defaultTabId="tab2"
  >
    <ph-tab-navigation-item 
      *ngFor="let tab of tabsNgTemplate; let i = index"

PixelHeadsLtd

<ph-summary-top [displayBlock]="false"> 
  <ph-summary-top-list 
    class="component" 
    [verticalDisplay]="false"
    [displayBlock]="false"
    [highlight]="false" 
    [itemTitle]="'Employee name'" 
    [itemDescription]="'Paul Smith'"
    [truncate]="true"
    maxWidth="10rem"

PixelHeadsLtd

<!--- BUTTON WHERE YOU WANT TO CALL THE MODAL --->
<ph-button 
  (buttonClick)="openModal()" 
  buttonClass="primary" 
  fieldClass="boxed" 
  buttonLabel="Modal"
  buttonText="Show modal" 
>
</ph-button>

PixelHeadsLtd

<ph-tag 
  [isLightBlue]="true" 
  tagText="Your tag text"
  (removeTag)="onClick()"
  >
</ph-tag>

PixelHeadsLtd

<div class="flex-group flex-start">
  <a class="text-decoration-none" routerLink="/progress-circle">
    <ph-progress-circle 
      [panelView]="true" 
      [isSmall]="false" 
      headerColor="bg-ph-light-blue-15"
      value="200/1000" 
      name="Total reviews" 
      percent="20" 
      tooltipMinWidth="12rem" 

PixelHeadsLtd

<!-- BUTTON TO TRIGGER THE BLADE -->
<ph-button 
  (buttonClick)="bladeIsOpen($event)"
  buttonText="Open blade" 
  buttonClass="primary"
  fieldClass="label-hidden"
  >
</ph-button>

<!----------------------------------------------------------->