Card list

Card list

HTML


<ul class="orc-c-card-list orc-l-grid--3up">

  <li class="orc-c-card-list__item orc-l-grid__item">
    <div class="orc-c-card orc-l-grid--3up">

      <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;fpo-1024x576.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-l-grid--3up">

              <button class="orc-c-btn orc-l-grid--3up">

    <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-->

  </li>
  <!--end orc-c-card-list__item-->
  <li class="orc-c-card-list__item orc-l-grid__item">
    <div class="orc-c-card orc-l-grid--3up">

      <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;fpo-1024x576.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-l-grid--3up">

              <button class="orc-c-btn orc-l-grid--3up">

    <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-->

  </li>
  <!--end orc-c-card-list__item-->
  <li class="orc-c-card-list__item orc-l-grid__item">
    <div class="orc-c-card orc-l-grid--3up">

      <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;fpo-1024x576.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-l-grid--3up">

              <button class="orc-c-btn orc-l-grid--3up">

    <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-->

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

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

When to use

When there are several options for a user to choose from, such as Identity offers.

When to consider an alternative

If you have a single offer or piece of content to promote, a single card gives you several layout options for displaying summary information.

Class Name	Description
`orc-c-card-list` Required	Apply to the card list’s containing HTML element. Use with a layout grid class to layout the list items in various formats (i.e. 2up, 3up, etc.).
`orc-l-grid` Required	Apply in addition to `orc-c-card-list` to layout card list items in a grid format. Apply `orc-l-grid--3up` in addition to this to layout items 3 across and wrap on large screens for example.
`orc-c-card-list__item` Required	Apply to each card list item.
`orc-l-grid__item` Required	Apply in addition to `orc-c-card-list__item` to help layout these in a grid format. This way `orc-l-grid` can target the `orc-l-grid__item` and format these accordingly.
`orc-c-card` Required	Applied to the container of the actual card. See the card for more information about classes used in this component.

Card list `orc-c-card-list orc-l-grid--3up`

Usage

When to use

When to consider an alternative