1. Components
  2. Blocks and cards

Avatar Block Complete

A visual business card with a person’s key details, including their picture, phone number, and email address.

Default avatar block orc-c-avatar-block

A visual business card with a person’s key details, including their picture, phone number, and email address.

Dark avatar block orc-c-avatar-block--dark

Applies a dark background and lightens the text.

  • 

    <div class="orc-c-avatar-block ">

  <div class="orc-c-avatar-block__header">

    <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-600x600.png" alt="" />

    <p class="orc-c-avatar-block__meta">Your Host</p>

    <h3 class="orc-c-avatar-block__title">
      Desiree Mullen
    </h3>
    <p class="orc-c-avatar-block__position">Casino executive</p>

  </div>
  <!--end orc-c-avatar-block__header-->

  <div class="orc-c-avatar-block__body">
    <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

    <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

    <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
  </div>
  <!--end orc-c-avatar-block__body-->

</div>
<!--end orc-c-avatar-block-->
    

  • 

    <div class="orc-c-avatar-block orc-c-avatar-block--dark">

  <div class="orc-c-avatar-block__header">

    <img class="orc-c-avatar-block__img orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-600x600.png" alt="" />

    <p class="orc-c-avatar-block__meta">Your Host</p>

    <h3 class="orc-c-avatar-block__title">
      Desiree Mullen
    </h3>
    <p class="orc-c-avatar-block__position">Casino executive</p>

  </div>
  <!--end orc-c-avatar-block__header-->

  <div class="orc-c-avatar-block__body">
    <p class="orc-c-avatar-block__excerpt">How can I make your stay sensational? Get in touch.</p>

    <a href="tel:555:555-1212" class="orc-c-avatar-block__phone tel">555-555-1212</a>

    <a href="mailto:d.mullen@cosmopolitanlasvegas.com" class="orc-c-avatar-block__email email">d.mullen@cosmopolitanlasvegas.com</a>
  </div>
  <!--end orc-c-avatar-block__body-->

</div>
<!--end orc-c-avatar-block-->

Usage

When to use

Use this avatar block to display info about a person, particularly as a point of contact.

When to consider an alternative

Avatar blocks are for promoting people as a call to action. For most any other kind of call to action, use a tout. For listing adminstrative details, use a stripe instead.

Class Name Description 
orc-c-avatar-block
Required

Apply to the avatar block’s containing HTML element. This class sets up a base for the elements within orc-c-avatar-block__header and orc-c-avatar-block__body.

 
orc-c-avatar-block--dark
Modifier

Add to the orc-c-avatar-block element to add a make the text white. This should only be used within the orc-l-main--black theme.

 
orc-c-avatar-block__header
Required

Wrapper used within the main orc-c-avatar-block container to bundle together the elements within the top of the component.

 
orc-c-avatar-block__link

Optional link can be added around the orc-c-avatar-block__img and the orc-c-avatar-block__title to direct the user elsewhere.

 
orc-c-avatar-block__img

Added to img tag to style the avatar image.

 
orc-c-avatar-block__meta

Acts as a kicker to the title to display a short description of the person or organization represeneted in the avatar.

 
orc-c-avatar-block__title

Displays the name of the person or organization represented by the avatar block.

 
orc-c-avatar-block__position

Displays the avatar’s professional position or a short excerpt/tagline

 
orc-c-avatar-block__body
Required

Wrapper used within the main orc-c-avatar-block container and below the orc-c-avatar-block__header container to bundle together the elements at the core of the component.

 
orc-c-avatar-block__excerpt

Paragraph within the orc-c-avatar-block__body that is used as an introduction to the phone number and email address

 
orc-c-avatar-block__phone

Link within orc-c-avatar-block__body that directs to the person or organization’s phone number

 
orc-c-avatar-block__email

Link within orc-c-avatar-block__body that directs to the person or organization’s email address