Card | Cosmopolitan Design System

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--break">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--lined">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--fill-space">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



        <div class="orc-c-btn-group orc-c-card--fill-space">

          <button class="orc-c-btn orc-c-card--fill-space">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--dark orc-c-card--no-padding orc-c-card--fill-space">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-18-restaurant-detail&#x2F;04-pages-18-restaurant-detail.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="https:&#x2F;&#x2F;images.ctfassets.net&#x2F;sahy2rpqbnsp&#x2F;7vAuODQBhYcWQCKCkGUosc&#x2F;9750864ba000ba5513ad7c3ad6890830&#x2F;Momofuku-Las-Vegas-Interior.jpg?w&#x3D;1920&amp;h&#x3D;1080&amp;fm&#x3D;jpg&amp;q&#x3D;50&amp;fit&#x3D;fill"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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






        <h4 class="orc-c-card__kicker">New American</h4>

        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-18-restaurant-detail&#x2F;04-pages-18-restaurant-detail.rendered.html" class="orc-c-card__title-link">

                        Beauty & Essex

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="orc-c-text-passage">
          A partnership with TAO Group and acclaimed chef and restaurateur Chris Santos, Beauty & Essex offers unique sharing plates and new twists on classic cocktails in a speakeasy-like setting.
        </div>
        <!--end orc-c-text-passage-->




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

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



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

          <a href="#" class="orc-c-btn orc-c-btn--purple">

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


              <span class="orc-c-btn__text orc-js-btn-text">Reserve Table</span>




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

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


          <a href="&#x2F;patterns&#x2F;04-pages-18-restaurant-detail&#x2F;04-pages-18-restaurant-detail.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--picture">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">

      <img class="orc-c-card__img
                    orc-js-lazyload" data-src="https:&#x2F;&#x2F;www.cosmopolitanlasvegas.com&#x2F;d&#x2F;cosmopolitanlasvegas&#x2F;media&#x2F;Cosmopolitan_Las_Vegas_Images&#x2F;Restaurant&#x2F;Jaleo&#x2F;__thumbs_1024_576_crop&#x2F;restaurants-jaleo-central.jpg"
        alt="" data-object-fit="cover" />






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


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

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






        <h4 class="orc-c-card__kicker">Card kicker</h4>

        <h3 class="orc-c-card__title">


          Card heading


        </h3>
        <!--end orc-c-card__title-->





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


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



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

          <a href="#" class="orc-c-btn orc-c-btn--purple">

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


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





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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--picture orc-c-card--picture-vertical">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">

      <img class="orc-c-card__img
                    orc-js-lazyload" data-src="https:&#x2F;&#x2F;www.cosmopolitanlasvegas.com&#x2F;d&#x2F;cosmopolitanlasvegas&#x2F;media&#x2F;Cosmopolitan_Las_Vegas_Images&#x2F;Restaurant&#x2F;Jaleo&#x2F;__thumbs_1024_576_crop&#x2F;restaurants-jaleo-central.jpg"
        alt="" data-object-fit="cover" />






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


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

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






        <h4 class="orc-c-card__kicker">Spanish Tapas</h4>

        <h3 class="orc-c-card__title">


          Jaleo


        </h3>
        <!--end orc-c-card__title-->





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


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



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

          <a href="#" class="orc-c-btn orc-c-btn--purple">

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


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





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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--no-padding">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--padded">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

          <button class="orc-c-btn orc-c-card--padded">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--picture orc-c-card--gradient">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">

      <img class="orc-c-card__img
                    orc-js-lazyload" data-src="https:&#x2F;&#x2F;www.cosmopolitanlasvegas.com&#x2F;d&#x2F;cosmopolitanlasvegas&#x2F;media&#x2F;Cosmopolitan_Las_Vegas_Images&#x2F;Restaurant&#x2F;Jaleo&#x2F;__thumbs_1024_576_crop&#x2F;restaurants-jaleo-central.jpg"
        alt="" data-object-fit="cover" />






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


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

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






        <h4 class="orc-c-card__kicker">Card kicker</h4>

        <h3 class="orc-c-card__title">


          Card heading


        </h3>
        <!--end orc-c-card__title-->





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


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



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

          <a href="#" class="orc-c-btn orc-c-btn--purple">

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


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





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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--break orc-c-card--reversed">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



        <div class="orc-c-btn-group orc-c-card--break orc-c-card--reversed">

          <button class="orc-c-btn orc-c-card--break orc-c-card--reversed">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--large">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

          <button class="orc-c-btn orc-c-card--large">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--align-left">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



        <div class="orc-c-btn-group orc-c-card--align-left">

          <button class="orc-c-btn orc-c-card--align-left">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--lined">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



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

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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


<div class="orc-c-card orc-c-card--med-text">

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Heading ipsum dolor sit (39 characters)

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="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>
        <!--end orc-c-text-passage-->




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

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



        <div class="orc-c-btn-group orc-c-card--med-text">

          <button class="orc-c-btn orc-c-card--med-text">

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

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




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



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

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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__title-link">

                        Mischief Ahead

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->

        <h4 class="orc-c-card__subtitle">
          Valid Sep 28, 2017 - Jan 17, 2018
        </h4>




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

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

        <div class="orc-c-text-passage">
          <ul>
            <li>4 complimentary nights (wraparound suite or below)</li>
            <li>$1500 in Identity Play</li>
            <li>$300 in dining credit</li>
          </ul>
        </div>
        <!--end orc-c-text-passage-->



        <form method="GET" action="#" class="orc-c-form  orc-js-form">
          <input type="hidden" name="_method" value="GET">
          <input type="hidden" name="_token" value="">

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


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



              <div class="orc-c-field orc-c-field--border orc-js-field">

                <h4 for="" class="orc-c-field__label"><span class='orc-u-color-brand-purple'>You have three of this offer. Choose one:</span></h4>

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

                  <ul class="orc-c-option-list">

                    <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

                      <label class="orc-c-input-group" for="radio-3">
                    <input id="radio-3" type="radio" name="offer-2" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">Valid Jul 28, 2017 - Nov 17, 2017</span>
                </label>


                    </li>
                    <!-- end orc-c-radio-list__item -->
                    <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

                      <label class="orc-c-input-group" for="radio-4">
                    <input id="radio-4" type="radio" name="offer-2" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Valid Oct 28, 2017 - Dec 17, 2017</span>
                </label>


                    </li>
                    <!-- end orc-c-radio-list__item -->
                    <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

                      <label class="orc-c-input-group" for="radio-5">
                    <input id="radio-5" type="radio" name="offer-2" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">Valid Sep 28, 2017 - Jan 17, 2018</span>
                </label>


                    </li>
                    <!-- end orc-c-radio-list__item -->

                  </ul>
                  <!-- end orc-c-option-list -->

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


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


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

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

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

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

              <a href="#" class="orc-c-btn ">

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


                  <span class="orc-c-btn__text orc-js-btn-text">Let&#39;s Do It</span>




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

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


              <a href="&#x2F;patterns&#x2F;04-pages-offer-details-long-choice&#x2F;04-pages-offer-details-long-choice.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


                  <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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




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

        </form>
        <!--end orc-c-form-->


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


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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />

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

	
	<span class="orc-c-badge__text">Limited! 15 Places Left</span>

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



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__title-link">

                        Play and Stay

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="orc-c-text-passage">
          <ul>
            <li>3 complimentary nights (wraparound suite or below)</li>
            <li>$3000 buy-in to The Distinction slot tournament</li>
            <li>Valid from Nov 9, 2017 - Nov 12, 2017</li>
          </ul>
        </div>
        <!--end orc-c-text-passage-->




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

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



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

          <a href="#" class="orc-c-btn ">

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


              <span class="orc-c-btn__text orc-js-btn-text">Let&#39;s Do It</span>




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

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


          <a href="&#x2F;patterns&#x2F;04-pages-offer-details&#x2F;04-pages-offer-details.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


              <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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



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

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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__title-link">

                        Mischief Ahead

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->

        <h4 class="orc-c-card__subtitle">
          Valid Sep 28, 2017 - Jan 17, 2018
        </h4>




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

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

        <div class="orc-c-text-passage">
          <ul>
            <li>$50 in Identity Play</li>
            <li>$50 more in bonus Identity Play when you earn 2,500 slot points within 48 hours of redeeming this offer</li>
          </ul>
        </div>
        <!--end orc-c-text-passage-->




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

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

        <div class="orc-c-card__highlighted-text">
          <p>To redeem, visit the Identity Desk at the center of The Cosmopolitan casino, or call Casino Services for more information.</p>
        </div>


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

          <a href="#" class="orc-c-btn ">

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


              <span class="orc-c-btn__text orc-js-btn-text">702-545-3878</span>




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

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


          <a href="&#x2F;patterns&#x2F;04-pages-offer-details&#x2F;04-pages-offer-details.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


              <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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



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

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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-offer-details-long-choice&#x2F;04-pages-offer-details-long-choice.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-offer-details-long-choice&#x2F;04-pages-offer-details-long-choice.rendered.html" class="orc-c-card__title-link">

                        Best Seats, Best Shows

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->

        <h4 class="orc-c-card__subtitle">
          Valid Nov 1, 2017 - Nov 30, 2017
        </h4>




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

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

        <div class="orc-c-text-passage">
          <p class='orc-u-text-uppercase'>4 Complimentary Concert Tickets</p>
          <p>Experience world-class events at The Chelsea, featuring artists at the forefront of the touring world and emerging artists that will inspire the next musical movements.</p>
        </div>
        <!--end orc-c-text-passage-->




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

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

        <div class="orc-c-card__highlighted-text">
          <p>You have 4 tickets left. You can use up to 2 tickets per show, and you can use this offer for more than 1 show.</p>
        </div>


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

          <a href="#" class="orc-c-btn ">

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


              <span class="orc-c-btn__text orc-js-btn-text">Let&#39;s Do It</span>




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

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


          <a href="&#x2F;patterns&#x2F;04-pages-offer-details-long-choice&#x2F;04-pages-offer-details-long-choice.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


              <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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



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

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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="#" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="#" class="orc-c-card__title-link">

                        Player's Choice

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->

        <h4 class="orc-c-card__subtitle">
          Valid Jul 28, 2017 - Nov 17, 2017
        </h4>




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

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

        <div class="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>
        <!--end orc-c-text-passage-->



        <form method="GET" action="#" class="orc-c-form  orc-js-form">
          <input type="hidden" name="_method" value="GET">
          <input type="hidden" name="_token" value="">

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


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



              <div class="orc-c-field orc-c-field--border orc-js-field">

                <h4 for="" class="orc-c-field__label">Choose one:</h4>

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

                  <ul class="orc-c-option-list">

                    <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

                      <label class="orc-c-input-group" for="radio-1">
                    <input id="radio-1" type="radio" name="offer-1" value="" class="orc-c-input-group__control orc-js-radio-trigger" checked  >
                    <span class="orc-c-input-group__text">2 complimentary nights, Sun - Thurs (City room or below)</span>
                </label>

                      <div class="orc-c-divider orc-c-divider--small orc-c-divider--bare">
                        <div class="orc-c-divider__text">or</div>
                      </div>
                      <!--end orc-c-divider-->


                    </li>
                    <!-- end orc-c-radio-list__item -->
                    <li class="orc-c-option-list__item orc-js-radio-trigger-parent">

                      <label class="orc-c-input-group" for="radio-2">
                    <input id="radio-2" type="radio" name="offer-1" value="" class="orc-c-input-group__control orc-js-radio-trigger"   >
                    <span class="orc-c-input-group__text">2 nights at regular rate, Fri - Sun (any room type, resort fee required)<hr><p>$75 resort credit</p></span>
                </label>


                    </li>
                    <!-- end orc-c-radio-list__item -->

                  </ul>
                  <!-- end orc-c-option-list -->

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


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


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

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

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

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

              <a href="#" class="orc-c-btn ">

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


                  <span class="orc-c-btn__text orc-js-btn-text">Let&#39;s Do It</span>




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

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


              <a href="&#x2F;patterns&#x2F;04-pages-offer-details-long-choice&#x2F;04-pages-offer-details-long-choice.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


                  <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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




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

        </form>
        <!--end orc-c-form-->


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


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

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

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

HTML


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

  <div class="orc-c-card__inner">
    <div class="orc-c-card__media orc-u-min-height-1">
      <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__img-link orc-u-min-height-1">

                <img class="orc-c-card__img
                    orc-js-lazyload"
                    data-src="..&#x2F;..&#x2F;images&#x2F;identity-landscape.png"
                    alt=""
                    
                    
                />

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

	
	<span class="orc-c-badge__text">Platinum Benefit</span>

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



            </a>
      <!--end orc-c-card__img-link-->



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


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

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

        <ul class="orc-c-icon-list">

          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="search">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->
          <li class="orc-c-icon-list__item">

            <a href="#" class="orc-c-icon-list__link" title="gear">

            <svg class="orc-c-icon orc-c-icon-list__icon">
	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
</svg><!--end orc-c-icon-->


        </a>
            <!--end orc-c-icon-list__link-->

          </li>
          <!--end orc-c-icon-list__item-->

        </ul>
        <!--end orc-c-icon-list-->







        <h3 class="orc-c-card__title">

          <a href="&#x2F;patterns&#x2F;04-pages-travelclick-dates-of-stay&#x2F;04-pages-travelclick-dates-of-stay.rendered.html" class="orc-c-card__title-link">

                        Play and Stay

                </a>
          <!--end orc-c-card__title-link-->

        </h3>
        <!--end orc-c-card__title-->





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

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

        <div class="orc-c-text-passage">
          <ul>
            <li>3 complimentary nights (wraparound suite or below)</li>
            <li>$3000 buy-in to The Distinction slot tournament</li>
            <li>Valid from Nov 9, 2017 - Nov 12, 2017</li>
          </ul>
        </div>
        <!--end orc-c-text-passage-->




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

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



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

          <a href="#" class="orc-c-btn ">

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


              <span class="orc-c-btn__text orc-js-btn-text">Let&#39;s Do It</span>




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

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


          <a href="&#x2F;patterns&#x2F;04-pages-offer-details&#x2F;04-pages-offer-details.rendered.html" class="orc-c-btn orc-c-btn--bare">

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


              <span class="orc-c-btn__text orc-js-btn-text">View More</span>




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

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




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



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

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

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

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

When to use

Cards are best used to display summary information.

When to consider an alternative

If your primary goal is to drive traffic to a feature or content, consider a media block instead.

Class Name	Description
`orc-c-card` Required	Default class for the card. Adds styling to the container of the card and the content within.
`orc-c-card--break` Modifier	Add to the `orc-c-card` element to position the stacked image and text side-by-side on larger screens.
`orc-c-card--lined` Modifier	Add to the `orc-c-card` element to add a bottom border. This is best used within a stacked card list, preferably cards that break the image and text side-by-side.
`orc-c-card--fill-space` Modifier	Add to the `orc-c-card` element in a card list grid for all cards to become the same height as the tallest card in the row.
`orc-c-card--dark` Modifier	Add to the `orc-c-card` element to add a dark background with light text. This is used within the dark theme.
`orc-c-card--picture` Modifier	Add to the `orc-c-card` element to create a card where the picture is the background with a text overlay.
`orc-c-card--align-left` Modifier	Add to the `orc-c-card` element to align all of the textual content to the left.
`orc-c-card--no-padding` Modifier	Add to the `orc-c-card` element to remove left and right padding so card content can align with the rest of the page’s content
`orc-c-card--padded` Modifier	Add to the `orc-c-card` element to add extra top and bottom padding
`orc-c-card--gradient` Modifier	Add to the `orc-c-card` and `orc-c-card--picture` classes to add a gradient over the image
`orc-c-card--reversed` Modifier	Used with `orc-c-card` and `orc-c-card--break` element to put the breaking card’s image on the right and text on the left on larger screens
`orc-c-card--large` Modifier	Add to the `orc-c-card` element when you want the card’s text and media to be large
`orc-c-card--date` Modifier	Add to the `orc-c-card` element when the card contains a date block within
`orc-c-card--med-text` Modifier	Add to the `orc-c-card` element to create a card with medium body text
`orc-c-card__inner`	Inner container of the card that houses the `orc-c-card__media` and `orc-c-card__content`
`orc-c-card__img-link`	Optional link that wraps the image if the card links out to another part of the site
`picture`	Used with the `source` element to help performance by switching out different sized images depending on the size of the browser window
`source`	Used within the `picture` element to change the size of image used on various browser window sizes
`orc-c-card__img`	Image within the card
`orc-c-badge`	Optional addition to card to alert the user with a highlighted important message about this card
`orc-c-card__content`	Container within `orc-c-card` that houses the content that is not media (images, etc.)
`orc-c-card__header`	Container within `orc-c-card` that houses the content towards the top of the card.
`orc-c-icon-list`	Added above the `orc-c-card__title` to add additional context as to what this card represents
`orc-c-social-share`	Added as an option if content is to be shared with social media
`orc-c-card__date`	The container that houses `orc-c-card__month` and `orc-c-card__day` within `orc-c-card--date`
`orc-c-card__month`	Used within `orc-c-card--date` for the 3-letter month name (i.e. the Apr in Apr 26)
`orc-c-card__day`	Used within `orc-c-card--date` for the number of day within the month (i.e. the 26 in Apr 26)
`orc-c-card__date-body`	If card is `orc-c-card--date`, this places the content within the `orc-c-card__date-body` to the right of the date.
`orc-c-card__kicker`	Optional smaller text above `orc-c-card__title` that adds context to the card title
`orc-c-card__title`	The main headline of text of the card
`orc-c-card__title-link`	Optional link that can wrap the `orc-c-card__title` text and link out
`orc-c-card__subtitle`	A subtitle of the card that adds detail to the card title
`orc-c-card__meta`	Additional meta information within the card
`orc-c-card__body`	Container of `orc-c-card` that houses the content in the middle portion of the card.
`orc-c-text-passage`	Added within `orc-c-card__body` as a description with the stylings of a default text passage
`orc-c-card__column`	Container set to `display: flex` to put `orc-c-card__column-left` and `orc-c-card__column-right` side by side within the card
`orc-c-card__column-left`	Added to `orc-c-card__column` and contains content that is located on the left side of `orc-c-card__column` container when there is enough space
`orc-c-text-passage`	Added to `orc-c-card__column-left` to display a passage of text with the styling of default text passage
`orc-c-card__column-right`	Added to `orc-c-card__column` and contains content that is located on the right side of `orc-c-card__column` container when there is enough space
`orc-c-card__column-media`	Add to the `orc-c-card` element to create a card with a bottom border
`orc-c-card__img`	Add to the `orc-c-card` element to create a card with a bottom border
`orc-c-card__column-description`	Used with
`orc-c-link-list`	Added to `orc-c-card__body` if a list of links is needed within the card
`orc-c-form`	Added to `orc-c-card__body` if a form is needed for submission by the user
`orc-c-card__footer`	Container within `orc-c-card` that houses the components at the bottom of the card.
`orc-c-card__highlighted-text`	Added to the `orc-c-card__footer` for as an intro for the button group or as a footnote.
`orc-c-btn-group`	A group of buttons added to the card to link to another location or provide an actionable button to submit a form with.

Card Complete

Default card `orc-c-card`

Breaking card `orc-c-card--break`

Lined card `orc-c-card--lined`

Card Fill Space `orc-c-card--fill-space`

Dark card `orc-c-card--dark`

Picture card `orc-c-card--picture orc-c-card--align-left`

Vertical picture card `orc-c-card--picture-vertical`

No padding card `orc-c-card--no-padding`

Padded card `orc-c-card--padded`

Gradient card `orc-c-card--picture orc-c-card--gradient orc-c-card--align-left`

Reversed card `orc-c-card--break orc-c-card--reversed`

Large card `orc-c-card--large`

Align left card `orc-c-card--align-left`

Date card `orc-c-card--date`

Medium text card `orc-c-card--med-text`

Duplicate card `orc-c-card`

Limited flag card `orc-c-card`

No redemption card `orc-c-card`

Pool card `orc-c-card`

Short choice card `orc-c-card`

Tier card `orc-c-card`

Usage

When to use

When to consider an alternative