Horizontal card list

Horizontal card list

HTML


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

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

    <ul class="orc-c-horizontal-card-list__list">

      <li class="orc-c-horizontal-card-list__item">
        <div class="orc-c-card orc-c-card--picture orc-c-card--picture-vertical orc-c-card--align-left">

          <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="restaurant" 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-->

      </li>
      <!--end orc-c-horizontal-card-list__item-->
      <li class="orc-c-horizontal-card-list__item">
        <div class="orc-c-card orc-c-card--picture orc-c-card--picture-vertical orc-c-card--align-left">

          <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="restaurant" 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">Multicultural</h4>

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


                  Momofuku


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

      </li>
      <!--end orc-c-horizontal-card-list__item-->
      <li class="orc-c-horizontal-card-list__item">
        <div class="orc-c-card orc-c-card--picture orc-c-card--picture-vertical orc-c-card--align-left">

          <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="restaurant" 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">Modern Supper Club</h4>

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


                  Rose. Rabbit. Lie.


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

      </li>
      <!--end orc-c-horizontal-card-list__item-->
      <li class="orc-c-horizontal-card-list__item">
        <div class="orc-c-card orc-c-card--picture orc-c-card--picture-vertical orc-c-card--align-left">

          <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="restaurant" 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">Chinese &amp; Mexican</h4>

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


                  China Poblano


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

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

    </ul>
    <!--end orc-c-horizontal-card-list__list-->

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

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

When to use

Best for using visuals, rather than text, to drive traffic to topically related content.

When to consider an alternative

A media block list is a good alternative if the content is better expressed with a longer description and a smaller image.

Class Name	Description
`orc-c-horizontal-card-list` Required	Apply to the horizontal card list’s containing HTML element. This class sets up the general layout of the component.
`orc-c-horizontal-card-list__inner` Required	Apply to the horizontal card list’s inner `div`. This helps cap the content and allow the cards to scroll horizontally without overflowing past browser width.
`orc-c-horizontal-card-list__list` Required	Actual unordered list of horizontal card list items. Set to `display: flex` to place items side-by-side.
`orc-c-horizontal-card-list__item` Required	Apply to all `li` elements within the `orc-c-horizontal-card-list__list`.
`orc-c-card` Required	Actual card within each horizontal card list item. See the card for more information about classes used in this component.

Horizontal card list `orc-c-horizontal-card-list`

Usage

When to use

When to consider an alternative