1. Components
  2. Headers and footers

Profile block

A prominent display of account information for logged-in Identity members.

Default profile block orc-c-profile-block

A prominent display of account information for logged-in Identity members.

No progress profile block orc-c-profile-block--no-progress

A variant for Platinum members whose activities do not accrue tier points.

Sterling profile block orc-c-profile-block--sterling

Styles the background and contents to represent the Sterling tier.

Gold profile block orc-c-profile-block--gold

Styles the background and contents to represent the Gold tier.

Platinum profile block orc-c-profile-block--platinum

Styles the background and contents to represent the Velvet tier.

  • 

    <div class="orc-c-profile-block orc-js-profile-block-compressed">

  <div class="orc-l-container orc-c-profile-block__inner">

    <section class="orc-c-profile-block__user-section">

      <div class="orc-c-profile-block__user">

        <div class="orc-c-profile-block__user-media">
          <img src=..&#x2F;..&#x2F;images&#x2F;velvet-card.png class="orc-c-profile-block__user-img" data-card-spin />
        </div>

        <div class="orc-c-profile-block__user-body">

          <div class="orc-c-profile-block__title">
            <h3 class="orc-c-profile-block__title-user">Benjamin Anderson</h3>
            <span class="orc-c-profile-block__title-number">#1234567</span>
          </div>

          <div class="orc-c-profile-block__small-print">
            <span class="orc-c-profile-block__user-text">Gold Member — through Sep 18, 2018 </span>
            <span class="orc-c-profile-block__user-fine-print">Earn 1,102 points by 9/18/2018 to keep Gold.</span>
          </div>
          <!--end orc-c-profile-block__small-print-->

        </div>
        <!-- end orc-c-profile-block__user-body -->

        <svg class="orc-c-icon orc-c-profile-block__icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

      </div>
      <!-- end orc-c-profile-block__user -->

    </section>
    <!-- end orc-c-profile-block__user-section -->

    <section class="orc-c-profile-block__identity-section">

      <div class="orc-c-profile-block__header">
        <h3 class="orc-c-profile-block__identity-title">15,420 Identity Points</h3>
      </div>

      <div class="orc-c-profile-block__small-print">
        <div class="orc-c-profile-block__credit-text">
          <span class="orc-c-profile-block__text-title">$154</span> Resort Credit
        </div>
        <div class="orc-c-profile-block__available-text">
          <span class="orc-c-profile-block__text-title">($73</span> for Identity Play)
        </div>
      </div>
      <!--end orc-c-profile-block__small-print-->

    </section>
    <!-- end orc-c-profile-block__identity-section -->


    <section class="orc-c-profile-block__progress-section">


      <svg class="orc-c-progress orc-js-progress" width='100%' height='32px'>
    <g preserveAspectRatio="none" viewBox='0 0 100 32'>
        <rect class='orc-c-progress__background' width='100%' height='32'></rect>
        <rect class='orc-c-progress__bar orc-js-progress-bar' width='85%' height='32'></rect>
    </g>
    <g>
        <text class="orc-c-progress__label-left orc-c-progress__text-empty" text-anchor="start" x="10px" y="22">37,543 Tier Points</text>

        <text class="orc-c-progress__label-left orc-c-progress__text-filled" text-anchor='start' clip-path="url(#mask)" x='10px' y='22'>37,543 Tier Points</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-empty" text-anchor='end' x='100%' y='22'>12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-filled" text-anchor='end' x='100%' y='22' clip-path="url(#mask)">12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <clipPath id="mask">
            <rect class='orc-c-progress__mask orc-js-progress-mask' width="85%" height='32' clip-path="url(#left-text)"></rect>
        </clipPath>
    </g>
</svg>

      <div class="orc-c-progress__note">
        <div class="orc-c-progress__note-left">
          Tier points expire 365 days after they are earned.
        </div>
        <div class="orc-c-progress__note-right">
          Sterling = 50,000 Tier Points
        </div>
      </div>
      <!--end orc-c-progress__note-->


    </section>
    <!-- end orc-c-profile-block__progress-section -->

    <section class="orc-c-profile-block__offers-section">

      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-btn orc-c-profile-block__btn orc-js-profile-block-btn">

        <div class="orc-c-btn__inner">


          <span class="orc-c-btn__text orc-js-btn-text">See All Your Offers</span>

          <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
        </svg>



        </div>
        <!--end orc-c-btn__inner-->

      </a>
      <!-- end orc-c-btn -->


    </section>
    <!-- end orc-c-profile-block__offers-section -->

  </div>
  <!-- end orc-c-profile-block__inner -->

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

  • 

    <div class="orc-c-profile-block orc-c-profile-block--no-progress orc-js-profile-block-condensed">

  <div class="orc-l-container orc-c-profile-block__inner">

    <section class="orc-c-profile-block__user-section">

      <div class="orc-c-profile-block__user">

        <div class="orc-c-profile-block__user-media">
          <img src=..&#x2F;..&#x2F;images&#x2F;velvet-card.png class="orc-c-profile-block__user-img" data-card-spin />
        </div>

        <div class="orc-c-profile-block__user-body">

          <div class="orc-c-profile-block__title">
            <h3 class="orc-c-profile-block__title-user">Benjamin Anderson</h3>
            <span class="orc-c-profile-block__title-number">#1234567</span>
          </div>

          <div class="orc-c-profile-block__small-print">
            <span class="orc-c-profile-block__user-text">Gold Member — through Sep 18, 2018 </span>
            <span class="orc-c-profile-block__user-fine-print">Earn 1,102 points by 9/18/2018 to keep Gold.</span>
          </div>
          <!--end orc-c-profile-block__small-print-->

        </div>
        <!-- end orc-c-profile-block__user-body -->

        <svg class="orc-c-icon orc-c-profile-block__icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

      </div>
      <!-- end orc-c-profile-block__user -->

    </section>
    <!-- end orc-c-profile-block__user-section -->

    <section class="orc-c-profile-block__identity-section">

      <div class="orc-c-profile-block__header">
        <h3 class="orc-c-profile-block__identity-title">15,420 Identity Points</h3>
      </div>

      <div class="orc-c-profile-block__small-print">
        <div class="orc-c-profile-block__credit-text">
          <span class="orc-c-profile-block__text-title">$154</span> Resort Credit
        </div>
        <div class="orc-c-profile-block__available-text">
          <span class="orc-c-profile-block__text-title">($73</span> for Identity Play)
        </div>
      </div>
      <!--end orc-c-profile-block__small-print-->

    </section>
    <!-- end orc-c-profile-block__identity-section -->



    <section class="orc-c-profile-block__offers-section">

      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-btn orc-c-profile-block__btn orc-js-profile-block-btn">

        <div class="orc-c-btn__inner">


          <span class="orc-c-btn__text orc-js-btn-text">See All Your Offers</span>

          <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
        </svg>



        </div>
        <!--end orc-c-btn__inner-->

      </a>
      <!-- end orc-c-btn -->


    </section>
    <!-- end orc-c-profile-block__offers-section -->

  </div>
  <!-- end orc-c-profile-block__inner -->

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

  • 

    <div class="orc-c-profile-block orc-c-profile-block--sterling orc-js-profile-block-condensed">

  <div class="orc-l-container orc-c-profile-block__inner">

    <section class="orc-c-profile-block__user-section">

      <div class="orc-c-profile-block__user">

        <div class="orc-c-profile-block__user-media">
          <img src=..&#x2F;..&#x2F;images&#x2F;velvet-card.png class="orc-c-profile-block__user-img" data-card-spin />
        </div>

        <div class="orc-c-profile-block__user-body">

          <div class="orc-c-profile-block__title">
            <h3 class="orc-c-profile-block__title-user">Benjamin Anderson</h3>
            <span class="orc-c-profile-block__title-number">#1234567</span>
          </div>

          <div class="orc-c-profile-block__small-print">
            <span class="orc-c-profile-block__user-text">Gold Member — through Sep 18, 2018 </span>
            <span class="orc-c-profile-block__user-fine-print">Earn 1,102 points by 9/18/2018 to keep Gold.</span>
          </div>
          <!--end orc-c-profile-block__small-print-->

        </div>
        <!-- end orc-c-profile-block__user-body -->

        <svg class="orc-c-icon orc-c-profile-block__icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

      </div>
      <!-- end orc-c-profile-block__user -->

    </section>
    <!-- end orc-c-profile-block__user-section -->

    <section class="orc-c-profile-block__identity-section">

      <div class="orc-c-profile-block__header">
        <h3 class="orc-c-profile-block__identity-title">15,420 Identity Points</h3>
      </div>

      <div class="orc-c-profile-block__small-print">
        <div class="orc-c-profile-block__credit-text">
          <span class="orc-c-profile-block__text-title">$154</span> Resort Credit
        </div>
        <div class="orc-c-profile-block__available-text">
          <span class="orc-c-profile-block__text-title">($73</span> for Identity Play)
        </div>
      </div>
      <!--end orc-c-profile-block__small-print-->

    </section>
    <!-- end orc-c-profile-block__identity-section -->


    <section class="orc-c-profile-block__progress-section">


      <svg class="orc-c-progress orc-js-progress" width='100%' height='32px'>
    <g preserveAspectRatio="none" viewBox='0 0 100 32'>
        <rect class='orc-c-progress__background' width='100%' height='32'></rect>
        <rect class='orc-c-progress__bar orc-js-progress-bar' width='85%' height='32'></rect>
    </g>
    <g>
        <text class="orc-c-progress__label-left orc-c-progress__text-empty" text-anchor="start" x="10px" y="22">37,543 Tier Points</text>

        <text class="orc-c-progress__label-left orc-c-progress__text-filled" text-anchor='start' clip-path="url(#mask)" x='10px' y='22'>37,543 Tier Points</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-empty" text-anchor='end' x='100%' y='22'>12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-filled" text-anchor='end' x='100%' y='22' clip-path="url(#mask)">12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <clipPath id="mask">
            <rect class='orc-c-progress__mask orc-js-progress-mask' width="85%" height='32' clip-path="url(#left-text)"></rect>
        </clipPath>
    </g>
</svg>

      <div class="orc-c-progress__note">
        <div class="orc-c-progress__note-left">
          Tier points expire 365 days after they are earned.
        </div>
        <div class="orc-c-progress__note-right">
          Sterling = 50,000 Tier Points
        </div>
      </div>
      <!--end orc-c-progress__note-->


    </section>
    <!-- end orc-c-profile-block__progress-section -->

    <section class="orc-c-profile-block__offers-section">

      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-btn orc-c-profile-block__btn orc-js-profile-block-btn">

        <div class="orc-c-btn__inner">


          <span class="orc-c-btn__text orc-js-btn-text">See All Your Offers</span>

          <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
        </svg>



        </div>
        <!--end orc-c-btn__inner-->

      </a>
      <!-- end orc-c-btn -->


    </section>
    <!-- end orc-c-profile-block__offers-section -->

  </div>
  <!-- end orc-c-profile-block__inner -->

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

  • 

    <div class="orc-c-profile-block orc-c-profile-block--gold orc-js-profile-block-condensed">

  <div class="orc-l-container orc-c-profile-block__inner">

    <section class="orc-c-profile-block__user-section">

      <div class="orc-c-profile-block__user">

        <div class="orc-c-profile-block__user-media">
          <img src=..&#x2F;..&#x2F;images&#x2F;velvet-card.png class="orc-c-profile-block__user-img" data-card-spin />
        </div>

        <div class="orc-c-profile-block__user-body">

          <div class="orc-c-profile-block__title">
            <h3 class="orc-c-profile-block__title-user">Benjamin Anderson</h3>
            <span class="orc-c-profile-block__title-number">#1234567</span>
          </div>

          <div class="orc-c-profile-block__small-print">
            <span class="orc-c-profile-block__user-text">Gold Member — through Sep 18, 2018 </span>
            <span class="orc-c-profile-block__user-fine-print">Earn 1,102 points by 9/18/2018 to keep Gold.</span>
          </div>
          <!--end orc-c-profile-block__small-print-->

        </div>
        <!-- end orc-c-profile-block__user-body -->

        <svg class="orc-c-icon orc-c-profile-block__icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

      </div>
      <!-- end orc-c-profile-block__user -->

    </section>
    <!-- end orc-c-profile-block__user-section -->

    <section class="orc-c-profile-block__identity-section">

      <div class="orc-c-profile-block__header">
        <h3 class="orc-c-profile-block__identity-title">15,420 Identity Points</h3>
      </div>

      <div class="orc-c-profile-block__small-print">
        <div class="orc-c-profile-block__credit-text">
          <span class="orc-c-profile-block__text-title">$154</span> Resort Credit
        </div>
        <div class="orc-c-profile-block__available-text">
          <span class="orc-c-profile-block__text-title">($73</span> for Identity Play)
        </div>
      </div>
      <!--end orc-c-profile-block__small-print-->

    </section>
    <!-- end orc-c-profile-block__identity-section -->


    <section class="orc-c-profile-block__progress-section">


      <svg class="orc-c-progress orc-js-progress" width='100%' height='32px'>
    <g preserveAspectRatio="none" viewBox='0 0 100 32'>
        <rect class='orc-c-progress__background' width='100%' height='32'></rect>
        <rect class='orc-c-progress__bar orc-js-progress-bar' width='85%' height='32'></rect>
    </g>
    <g>
        <text class="orc-c-progress__label-left orc-c-progress__text-empty" text-anchor="start" x="10px" y="22">37,543 Tier Points</text>

        <text class="orc-c-progress__label-left orc-c-progress__text-filled" text-anchor='start' clip-path="url(#mask)" x='10px' y='22'>37,543 Tier Points</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-empty" text-anchor='end' x='100%' y='22'>12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <text class="orc-c-progress__label-right orc-c-progress__text-filled" text-anchor='end' x='100%' y='22' clip-path="url(#mask)">12,457 to Platinum&nbsp;&nbsp;&nbsp;</text>

        <clipPath id="mask">
            <rect class='orc-c-progress__mask orc-js-progress-mask' width="85%" height='32' clip-path="url(#left-text)"></rect>
        </clipPath>
    </g>
</svg>

      <div class="orc-c-progress__note">
        <div class="orc-c-progress__note-left">
          Tier points expire 365 days after they are earned.
        </div>
        <div class="orc-c-progress__note-right">
          Sterling = 50,000 Tier Points
        </div>
      </div>
      <!--end orc-c-progress__note-->


    </section>
    <!-- end orc-c-profile-block__progress-section -->

    <section class="orc-c-profile-block__offers-section">

      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-btn orc-c-profile-block__btn orc-js-profile-block-btn">

        <div class="orc-c-btn__inner">


          <span class="orc-c-btn__text orc-js-btn-text">See All Your Offers</span>

          <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
        </svg>



        </div>
        <!--end orc-c-btn__inner-->

      </a>
      <!-- end orc-c-btn -->


    </section>
    <!-- end orc-c-profile-block__offers-section -->

  </div>
  <!-- end orc-c-profile-block__inner -->

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

  • 

    <div class="orc-c-profile-block orc-c-profile-block--platinum orc-js-profile-block-condensed">

  <div class="orc-l-container orc-c-profile-block__inner">

    <section class="orc-c-profile-block__user-section">

      <div class="orc-c-profile-block__user">

        <div class="orc-c-profile-block__user-media">
          <img src=..&#x2F;..&#x2F;images&#x2F;velvet-card.png class="orc-c-profile-block__user-img" data-card-spin />
        </div>

        <div class="orc-c-profile-block__user-body">

          <div class="orc-c-profile-block__title">
            <h3 class="orc-c-profile-block__title-user">Benjamin Anderson</h3>
            <span class="orc-c-profile-block__title-number">#1234567</span>
          </div>

          <div class="orc-c-profile-block__small-print">
            <span class="orc-c-profile-block__user-text">Gold Member — through Sep 18, 2018 </span>
            <span class="orc-c-profile-block__user-fine-print">Earn 1,102 points by 9/18/2018 to keep Gold.</span>
          </div>
          <!--end orc-c-profile-block__small-print-->

        </div>
        <!-- end orc-c-profile-block__user-body -->

        <svg class="orc-c-icon orc-c-profile-block__icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
                </svg>

      </div>
      <!-- end orc-c-profile-block__user -->

    </section>
    <!-- end orc-c-profile-block__user-section -->

    <section class="orc-c-profile-block__identity-section">

      <div class="orc-c-profile-block__header">
        <h3 class="orc-c-profile-block__identity-title">15,420 Identity Points</h3>
      </div>

      <div class="orc-c-profile-block__small-print">
        <div class="orc-c-profile-block__credit-text">
          <span class="orc-c-profile-block__text-title">$154</span> Resort Credit
        </div>
        <div class="orc-c-profile-block__available-text">
          <span class="orc-c-profile-block__text-title">($73</span> for Identity Play)
        </div>
      </div>
      <!--end orc-c-profile-block__small-print-->

    </section>
    <!-- end orc-c-profile-block__identity-section -->



    <section class="orc-c-profile-block__offers-section">

      <a href="&#x2F;patterns&#x2F;04-pages-offers&#x2F;04-pages-offers.rendered.html" class="orc-c-btn orc-c-profile-block__btn orc-js-profile-block-btn">

        <div class="orc-c-btn__inner">


          <span class="orc-c-btn__text orc-js-btn-text">See All Your Offers</span>

          <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-right"></use>
        </svg>



        </div>
        <!--end orc-c-btn__inner-->

      </a>
      <!-- end orc-c-btn -->


    </section>
    <!-- end orc-c-profile-block__offers-section -->

  </div>
  <!-- end orc-c-profile-block__inner -->

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

Usage

When to use

Display the profile block across the Identity experience to continually broadcast a member’s current Identity and tier points.

When to consider an alternative

The Identity account activity page displays this information in a stripe. Still, the profile block is visible at the top of the page.

Class Name Description 
orc-c-profile-block
Required

Apply to the profile block’s containing HTML element. This container will contain Identity information about a user.

 
orc-c-profile-block--sterling
Modifier

Add to orc-c-profile-block to style the background and inner contents to represent the sterling tier of Identity.

 
orc-c-profile-block--gold
Modifier

Add to orc-c-profile-block to style the background and inner contents to represent the gold tier of Identity.

 
orc-c-profile-block--platinum
Modifier

Add to orc-c-profile-block to style the background and inner contents to represent the platinum tier of Identity.

 
orc-js-profile-block-compressed
JS

Apply in addition to orc-c-profile-block to trigger JS to expand/contract the additional profile block content.

 
orc-c-profile-block__inner
Required

Apply to the inner div of the profile block. This is used to create the layout of the profile block on various screens.

 
orc-l-container
Required

Added to orc-c-profile-block__inner to cap the inner width of the content of the profile block and align it with the main content of the page.

 
orc-c-profile-block__user-section
Required

Added to section tag within orc-c-profile-block__inner. This container houses the Identity user’s basic information.

 
orc-c-profile-block__user
Required

Container within orc-c-profile-block__user-section that contains the tier card graphic and the user information

 
orc-c-profile-block__user-media
Required

Container for the tier card image

 
orc-c-profile-block__user-img
Required

Tier card image. Data attribute data-card-spin triggers JS to cause the card to spin.

 
orc-c-profile-block__user-body
Required

Container for the user’s name, Identity number, and meta information

 
orc-c-profile-block__title
Required

Container to place user’s name and Identity number next to each other.

 
orc-c-profile-block__title-user
Required

Identity user’s name

 
orc-c-profile-block__title-number
Required

Identity user’s Identity number

 
orc-c-profile-block__small-print
Required

Shrinks the text within this container to display as small print

 
orc-c-profile-block__user-text
Required

Innformation about Identity user’s tier status

 
orc-c-profile-block__user-fine-print
Required

Additional text that is styled differently than the orc-c-profile-block__user-text.

 
orc-c-icon
Required

Icon used to denote that the profile block expands to display more information.

 
orc-c-profile-block__icon
Required

Added to orc-c-icon to style it differently than the base icon class.

 
orc-c-profile-block__identity-section
Required

Added to section tag within orc-c-profile-block__inner. This container houses the Identity user’s Identity points and credits.

 
orc-c-profile-block__header
Required

Contains the Identity user’s Identity points element.

 
orc-c-profile-block__identity-title
Required

Added to Identity points element.

 
orc-c-profile-block__credit-text
Required

Contains the user’s resort credit text element

 
orc-c-profile-block__text-title
Required

Used to style the secondary text elements.

 
orc-c-profile-block__available-text
Required

Contains the Identity user’s available Identity play credit

 
orc-c-profile-block__progress-section

Added to section tag within orc-c-profile-block__inner. This container houses the Identity user’s progress until the next tier.

 
orc-c-progress
Required

Progress bar of the profile block.

 
orc-c-profile-block__offers-section

Added to section tag within orc-c-profile-block__inner. This container provides a link to see the Identity user’s exclusive offers.

 
orc-c-profile-block__btn
Required

Add to orc-c-btn to style the profile block offers link properly. See the [button]](/components/buttons/button) for more information about classes used in this component.