Migrated gist (migrated)

ph-card (detailed version)

<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>
    <article class="flex-group flex-start">
      <section>
        <h4>Job title</h4>
        <div 
          title="Jedi Master" 
          class="max-width-8">
          Jedi Master
        </div>
        
        <h4>Skills</h4>
        <div 
          title="Luke & Anakin Skywalker" 
          class="max-width-8">
          Force Powers
        </div>
      </section>
      <section>
        <h4>Species</h4>
        <div 
          title="Human" 
          class="max-width-8">
          Human
        </div>
        
        <h4>Affiliation</h4>
        <div>
          title="Rebel Alliance"
          class="max-width-8"
          Rebel Alliance
        </div>
      </section>
      <section>
        <div 
          title="Luke & Anakin Skywalker" 
          class="max-width-8">
          Luke & Anakin Skywalker
        </div>
      </section>
    </article>
  </ng-container>
</ph-card>