Persona Card Demo | <uif-persona-card>

In order for this demo to work you must first build the library in debug mode.

 

You can control presence of the user, e.g.: {{val}}

You can control size of the persona card, e.g.: {{val}}

You can control style of the persona card, e.g.: {{val}}

 

Alton Lafferty Interior Designer, Contoso Office: 7/1234 Available - Video capable Lync: Start Lync call Personal: 555.206.2443 Work: 555.929.8240 Skype: Start Skype call Personal: alton.lafferty@outlook.com Work: altonlafferty@contoso.com
Manager
Staff
View profile on Delve

Above sample is rendered by this sample markup:

      <uif-persona-card uif-style="{{vm.style}}" uif-size="{{vm.size}}" uif-presence="{{vm.presence}}" uif-image-url="Persona.Person2.png">
        <uif-persona-card-primary-text>Alton Lafferty</uif-persona-card-primary-text>
        <uif-persona-card-secondary-text>Interior Designer, Contoso</uif-persona-card-secondary-text>
        <uif-persona-card-tertiary-text>Office: 7/1234</uif-persona-card-tertiary-text>
        <uif-persona-card-optional-text>Available - Video capable</uif-persona-card-optional-text>
        <uif-persona-card-action uif-icon="chat" uif-placeholder="regular">
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Lync:</uif-persona-card-detail-label>
            <uif-link ng-href="#">Start Lync call</uif-link>
          </uif-persona-card-detail-line>
        </uif-persona-card-action>
        <uif-persona-card-action uif-icon="phone" uif-placeholder="regular">
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label> 555.206.2443
          </uif-persona-card-detail-line>
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label> 555.929.8240
          </uif-persona-card-detail-line>
        </uif-persona-card-action>
        <uif-persona-card-action uif-icon="video" uif-placeholder="regular">
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Skype:</uif-persona-card-detail-label>
            <uif-link ng-href="#">Start Skype call</uif-link>
          </uif-persona-card-detail-line>
        </uif-persona-card-action>
        <uif-persona-card-action uif-icon="mail" uif-placeholder="regular">
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Personal:</uif-persona-card-detail-label>
            <uif-link ng-href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</uif-link>
          </uif-persona-card-detail-line>
          <uif-persona-card-detail-line>
            <uif-persona-card-detail-label>Work:</uif-persona-card-detail-label>
            <uif-link ng-href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</uif-link>
          </uif-persona-card-detail-line>
        </uif-persona-card-action>
        <uif-persona-card-action uif-icon="org" uif-placeholder="topright">
          <!-- Org chart -->
        </uif-persona-card-action>
        <uif-persona-card-action uif-placeholder="overflow">
          View profile on Delve
        </uif-persona-card-action>
      </uif-persona-card>