1. Components
  2. Blocks and cards

Hero In Progress

A large, prominently placed banner with both image and text that can also include a button to drive traffic.

Default hero orc-c-hero

A large, prominently placed banner with both image and text that can also include a button to drive traffic.

Hero background top orc-c-hero--bg-top

This aligns the background image along the top of the hero.

Hero background right orc-c-hero--bg-right

This aligns the background image along the right of the hero.

Hero background bottom orc-c-hero--bg-bottom

This variant places the background image along the bottom of the hero.

Hero background left orc-c-hero--bg-left

This variant places the background image along the left side of the hero.

Hero full height orc-c-hero--full height

Gives the hero a height the same size of the viewport.

Hero tint orc-c-hero--tint

Overlays the image with a slight gray tint.

Hero text top center orc-c-hero--text-top-center

This centers the text toward the top of the image.

Hero text top right orc-c-hero--text-top-right

Right-justifies the text toward the top of the image.

Hero text bottom right orc-c-hero--text-bottom-right

Right-justifies the text toward the bottom of the image.

Hero text bottom center orc-c-hero--text-bottom-center

Center-justifies the text toward the bottom of the image.

Hero text bottom left orc-c-hero--text-bottom-left

Left-justifies the text toward the bottom of the image.

Hero text center left orc-c-hero--text-center-left

Left-justifies the text at the center of the image.

Hero text center orc-c-hero--text-center

Places the text at the absolute center of the image.

Hero text center right orc-c-hero--text-center-right

Right-justifies the text at the center of the image.

  • 

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

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--bg-top">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--bg-right">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--bg-bottom">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--bg-left">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--full-height">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--tint">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-top-center">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-top-right">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-bottom-right">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-bottom-center">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-bottom-left">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-center-left">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-center">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

  • 

    <div class="orc-c-hero orc-c-hero--text-center-right">

  <img class="orc-c-hero__image orc-js-lazyload" data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png" srcset="https:&#x2F;&#x2F;via.placeholder.com&#x2F;480x280 480w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;960x560 960w,https:&#x2F;&#x2F;via.placeholder.com&#x2F;1920x1080 1920w,"
    alt="opium" sizes="100vw" />

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

    <div class="orc-c-hero__body-inner orc-l-container">

      <div class="orc-c-hero__text">
        <h1 class="orc-c-hero__title">Completely off the Planet</h1>

        <p class="orc-c-hero__desc">Slip through the crack in the space/time continuum for a close encounter with a spaceship of fools.</p>

        <div class="orc-c-btn-group ">

          <button class="orc-c-btn orc-c-btn--purple">

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


            <span class="orc-c-btn__text orc-js-btn-text">Buy Tickets</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-->

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





        </div>
        <!--end orc-c-btn-group-->


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

    </div>
    <!--end orc-c-hero__body-inner-->

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



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

Usage

When to use

Heroes are so named because they’re strong, mighty, and get the job done. Use a hero block to draw attention and traffic to a high-priority campaign, page, or event.

When to consider an alternative

If content isn’t the highest possible priority, a media block is a more lowkey way to drive traffic to it. For imagery-focused content that doesn’t necessarily need to link anywhere, consider a card, likely a picture card.

Class Name Description 
orc-c-hero
Required

Apply to the hero block’s containing HTML element. This class sets up the background-image handling and text color for the unit. The orc-c-hero element should have just one immediate child, the orc-c-hero__body element. Note, too, that the unit’s hero image should be applied as a background image to this orc-c-hero element.

 
orc-c-hero--bg-top
Modifier

Add to the orc-c-hero element to align the background image along the top of the hero container

 
orc-c-hero--bg-right
Modifier

Add to the orc-c-hero element to align the background image along the right of the hero container

 
orc-c-hero--bg-bottom
Modifier

Add to the orc-c-hero element to align the background image along the bottom of the hero container

 
orc-c-hero--bg-left
Modifier

Add to the orc-c-hero element to align the background image along the left of the hero container

 
orc-c-hero--full-height
Modifier

Add to the orc-c-hero to make give the hero a height the size of the viewport.

 
orc-c-hero--tint
Modifier

Add to the orc-c-hero element to add a tinted overlay on top of the background image

 
orc-c-hero--text-top-center
Modifier

Add to the orc-c-hero element to vertically align the text along the top and horizontally center the text within the hero

 
orc-c-hero--text-top-right
Modifier

Add to the orc-c-hero element to vertically align the text along the top and horizontally align the text along the right side of the hero

 
orc-c-hero--text-bottom-right
Modifier

Add to the orc-c-hero element to vertically align the text along the bottom and horizontally align the text along the right side of the hero

 
orc-c-hero--text-bottom-center
Modifier

Add to the orc-c-hero element to vertically align the text along the bottom and horizontally center the text within the hero

 
orc-c-hero--text-bottom-left
Modifier

Add to the orc-c-hero element to vertically align the text along the bottom and horizontally align the text along the left side of the hero

 
orc-c-hero--text-center-left
Modifier

Add to the orc-c-hero element to vertically center the text and horizontally align the text along the left side of the hero

 
orc-c-hero--text-center
Modifier

Add to the orc-c-hero element to vertically and horizontally center the text within the hero

 
orc-c-hero--text-center-right
Modifier

Add to the orc-c-hero element to vertically center the text and horizontally align the text along the right side of the hero

 
orc-c-hero__body
Required

Apply to the container for the card body, which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action.

 
orc-c-hero__body-inner orc-l-container
Recommended

Applied within the orc-c-hero__body to help align the hero text with the rest of the content on the page when the hero is full-bleed to the edges of the browser

 
orc-c-hero__title
Recommended

Apply to the card’s heading inside the card body. The recommended element for this class is <h1>.

 
orc-c-hero__desc
Recommended

Apply to the card’s description text inside the card body. The recommended element for this class is <p>.

 
orc-c-btn-group

Apply within the orc-c-hero__body-inner if you want to add actionable buttons or links within the hero

 
orc-c-badge

Apply within orc-c-hero if additional highlighted messaging needs to be displayed for the user