Hudl Design System

Last Modified:June 29, 2017

Avatars

Uniform-UI provides four avatar types: User, Team, Org and Group. Uniform defines the design philosophy and usage guidelines for each avatar type.

Using the React Component

Generally, we encourage you to use Uniform-UI-Components to handle the markup and CSS for our releases. With Avatars, we’d like to double down on that suggestion. The uniComponent contains logic that determines the accessibility for color combinations passed to it, automatically determining if the color combination is of acceptable contrast for our users. Without the component, you’ll need to determine the accessibility of color combinations on your own, manually write the markup and correctly add the inline styles in the appropriate spots within that manually created markup. Sounds like a pain to us.

Additionally, each of the four avatar types [user, team, org, group] have default styles unique to their respective types. Managing and keeping track of the markup and visual changes is another complication you probably don’t want to contend with. Ergo, the component is great. Use it, instead.

Color within the Avatar

As mentioned above, the Avatar offers the opportunity to pass a primaryColor and secondaryColor to it via Props in the React component.

Inside the component, logic checks those colors against one another, ensuring that color combination has an acceptable color contrast that would not impair a user’s ability to see the content. As such, there are instances where you might define primary and secondary colors but only see the primary color appear in the avatar.

This might be confusing (or frustrating) at first glance. However, it’s an important feature of the component, which is aligned with an overall goal of Uniform: striving to improve accesibility across our products.

# Avatar User

The user avatar is used to represent individuals across Hudl.

gs

<!-- Default user avatar -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <svg aria-hidden="true" class="uni-avatar__img--default">
    <use xlink:href="/uniform-ui-docs/assets/icons-avatar.svg#user-default"></use>
  </svg>
  </div>
</div>

<!-- User Avatar with initials -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <h5 class="uni-avatar__initials uni-avatar__initials--user">gs</h5>
  </div>
</div>

<!-- User Avatar with image -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__img-container">
  <img class="uni-avatar__img" src="http://static.hudl.com/users/prod/1487608_e7ebb8e1471a4003af893bf4f4c1564a.jpg" alt="" />
  </div>
</div>

Uniform-UI-Component

Documentation →

<AvatarUser size="xlarge"/>
<AvatarUser size="xlarge" imageURL="xxx.xxx.com"/>
<AvatarUser size="xlarge" initials="gs"/>

# Avatar Team

The team avatar is used to represent teams within Hudl. By default a team's sport will be displayed.

<!-- Default Team avatar -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <svg aria-hidden="true" class="uni-avatar__icon">
  <use xlink:href="/uniform-ui-docs/assets/icons.svg#othersport"></use>
  </svg>
  </div>
</div>

<!-- Team avatar -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <svg aria-hidden="true" class="uni-avatar__icon">
  <use xlink:href="/uniform-ui-docs/assets/icons.svg#basketball"></use>
  </svg>
  </div>
</div>

<!-- Team avatar with primary color -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container" style="background-color:red;">
  <svg aria-hidden="true" class="uni-avatar__icon">
  <use xlink:href="/uniform-ui-docs/assets/icons.svg#football"></use>
  </svg>
  </div>
</div>

Uniform-UI-Component

Documentation →

<AvatarTeam size="xlarge"/>
<AvatarTeam sport="basketball" size="xlarge"/>
<AvatarTeam sport="football" size="xlarge" primaryColor="red"/>

# Avatar Organization

An org avatar represents an organization, school or brand.

jchs

<!-- Default org avatar -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <svg aria-hidden="true" class="uni-avatar__img--default">
    <use xlink:href="/uniform-ui-docs/assets/icons-avatar.svg#org-default"></use>
  </svg>
  </div>
</div>

<!-- Org avatar with initials and primary color -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container" style="background-color:rgba(8, 77, 163, 1.0);">
  <h5 class="uni-avatar__initials uni-avatar__initials--org">jchs</h5>
  </div>
</div>

Uniform-UI-Component

Documentation →

<AvatarOrg size="xlarge"/>
<AvatarOrg size="xlarge" initials="JCHS" primaryColor="rgba(8, 77, 163, 1.0)"/>

# Avatar Group

The group avatar is used for a collection of individuals within a team or organization, such as Coaches or Quarterbacks.

33

<!-- Default group avatar -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <svg aria-hidden="true" class="uni-avatar__img--default">
    <use xlink:href="/uniform-ui-docs/assets/icons-avatar.svg#group-default"></use>
  </svg>
  </div>
</div>

<!-- Group avatar with number -->
<div class="uni-avatar uni-avatar--xlarge">
  <div class="uni-avatar__content-container">
  <h5 class="uni-avatar__initials uni-avatar__initials--group">33</h5>
  </div>
</div>


Uniform-UI-Component

Documentation →

<AvatarGroup size="xlarge"/>
<AvatarGroup groupCount="33" size="xlarge"/>
If the avatar is a link, you'll want to wrap your avatar with the React Link component, or add that anchor tag with the class of uni-link--wrapper by hand. The code example below shows a div, rather than an a. This is purely due to Jekyll rendering errors. Please do not use a div for your wrapper links

Uniform-UI-Component

Documentation →

<Link type="wrapper" displayType="inline-block" href="www.hudl.com">
  <AvatarUser initials="gs"/>
</Link>

# Avatar Sizes

The size range for avatars is [xsmall, small, medium, large, xlarge, profile]. An avatar's default size is medium. Specifying a size in the React component will add a size modifier class (uni-avatar--small) to the avatar's markup. The profile sized avatar is such a specific use case, that naming it as such makes sense. Should you need a size not represented by this scale, reach out to Uniform so we can work with you to determine if there's not another solution, and, if not, the best name for the new size.

gs
gs
gs
gs
gs
gs

Uniform-UI-Component

Documentation →

<AvatarUser size="xsmall" initials="gs"/>
<AvatarUser size="small" initials="gs"/>
<AvatarUser size="medium" initials="gs"/>
<AvatarUser size="large" initials="gs"/>
<AvatarUser size="xlarge" initials="gs"/>
<AvatarUser size="profile" initials="gs"/>

# Avatar Outer Border

By default, an avatar does not have an outer border. You can add this outer border either by setting the React prop showOuterBorder=true or by adding the class uni-avatar--has-outer-border to your markup. If the avatar is also a link, this border will darken when hovered.

gs

<div class="uni-avatar uni-avatar--xlarge uni-avatar--has-outer-border">
  <div class="uni-avatar__content-container">
  <h5 class="uni-avatar__initials uni-avatar__initials--user">gs</h5>
  </div>
</div>

Uniform-UI-Component

Documentation →

<AvatarUser showOuterBorder=true initial="gs"/>

# Avatar Mixins

# Avatar mixin

Used to create avatars.

@include avatar($avatar-size, $avatar-color);

Settings

Parameter Type Default Value Description
$avatar-size list-map value medium Pass one of six sizes [ xsmall, small, medium, large, xlarge or profile ]
$avatar-color list-map value default Default is the only color map that currently exists. Color customization is possible via the props within the uniComponents React component.

# Avatar Color mixin

The avatar-color mixin is used internally within the `avatar` mixin

@include avatar-color($color);

Settings

Parameter Type Default Value Description
$color list-map value default Default is the only option currently available. Additional color modifications to avatars are made via props within the React component.

# Avatar Size mixin

The avatar-size mixin is used internally by the avatar mixin.

@include avatar-size($size);

Settings

Parameter Type Default Value Description
$size list-map value null Pass one of six sizes [ xsmall, small, medium, large, xlarge or profile ]