1. Components
  2. Blocks and cards

Tile In Progress

An independent unit of content, typically displayed with others like it.

Default tile orc-c-tile

An independent unit of content, typically displayed with others like it.

Velvet tile orc-c-tile--velvet

Applies a background and text style to represent the Velvet Identity tier.

Sterling tile orc-c-tile--sterling

Applies a background and text style to represent the Sterling Identity tier.

Gold tile orc-c-tile--gold

Applies a background and text style to represent the Gold Identity tier.

Platinum tile orc-c-tile--platinum

Applies a background and text style to represent the Platinum Identity tier.

Centered tile orc-c-tile--center

Center-justifies all content, including imagery and text.

Dark tile orc-c-tile--dark

Applies a dark background and lightens the text.

  • 

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

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--velvet">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--sterling">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--gold">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--platinum">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--center">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

  • 

    <div class="orc-c-tile orc-c-tile--dark">

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

    <img class="orc-c-tile__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;fpo-tile-image.png" alt="" />



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

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

    <div class="orc-c-tile__excerpt orc-c-text-passage">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>


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

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

Usage

When to use

Use this to justapose a media asset and supporting text without linking elsewhere. Tiles work well to call out promotional apsects of an experience that have visuals to support them, such as Identity tiers.

When to consider an alternative

If your content doesn’t have a strong visual to support it, use a text block instead. Since tile-worthy content usually comes in a pack, consider using a tile list to group many tiles together.

Class Name Description 
orc-c-tile
Required

Apply to the tile’s containing HTML element. This class adds padding to the bottom and contains the content within orc-c-tile__media and orc-c-tile__body

 
orc-c-tile--velvet
Modifier

Add to orc-c-tile to change the background and text that represents the velvet Identity tier

 
orc-c-tile--sterling
Modifier

Add to orc-c-tile to change the background and text that represents the sterling Identity tier

 
orc-c-tile--gold
Modifier

Add to orc-c-tile to change the background and text that represents the gold Identity tier

 
orc-c-tile--platinum
Modifier

Add to orc-c-tile to change the background and text that represents the platinum Identity tier

 
orc-c-tile--centered
Modifier

Add to orc-c-tile to center the content within the tile

 
orc-c-tile--dark
Modifier

Add to orc-c-tile to create a tile with a dark background and light text

 
orc-c-tile__media

Container that houses the media (i.e. image) of the tile. Use only if the tile has an image within.

 
orc-c-tile__img

Image within the tile. Place within the orc-c-tile__media container when an image is needed.

 
orc-c-tile__media-body

Container within orc-c-tile__media that houses the text elements like orc-c-tile__title and orc-c-tile__desc.

 
orc-c-tile__title
Recommended

Main headline of the tile

 
orc-c-tile__desc
Recommended

Short, more in-depth description of the subject of the tile.

 
orc-c-tile__body

Container that houses longer passages of text and lists within the tile

 
orc-c-tile__excerpt

Longer passage of text that gives more context to the tile’s topic. Add the orc-c-text-passage class to this element as well to get the proper styling of elements within a text passage.

 
orc-c-list-list

An optional list of general lists that have a title and ordered or unordered list.