Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Catalogue group

Code


 <!--Catalogue group - list of links with the responsive icon-->
 <ul class="cui catalogue-group catalogue-detail without-bg-color">
    <li>
      <a class="catalogue-title-link" href="#">
        <span class="cicon-lacrosse cicon-responsive cui" aria-hidden="true"></span>
        <span class="catalogue-title h3"> <span class="sub-cat-title">Neque porro quisquam est qui dolorem ipsum <</span> span class="cicon-arrow-circle-right"></span></span>
      </a>

        <ul class="group-links">
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
        </ul>

    </li>
  </ul>


  <ul class="cui catalogue-group catalogue-detail with-bg-color-grey">
    <li>
      <a class="catalogue-title-link" href="#">
        <span class="cicon-home cicon-responsive cui" aria-hidden="true"></span>
        <span class="catalogue-title h3"> <span class="sub-cat-title"> Lorem Ipsum </span> <span class="cicon-arrow-circle-right"></span></span>
      </a>

        <ul class="group-links">
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
          <li><a href="#">Lorem Ipsum </a></li>
        </ul>

    </li>
  </ul>

<!--Catalogue group - list of links without the responsive icon-->
<!--
        The default catalogue-title-link has the min-height set up
        Add the class 'auto-height' with 'catalogue-title-link' will removed the min-height
-->

<ul class="cui catalogue-group catalogue-detail without-bg-color catalogue-group-without-icon">
    <li>
      <a class="catalogue-title-link" href="#">
        <span class="catalogue-title h4"> <span class="sub-cat-title"> Neque porro quisquam est qui quisquam dolorem ipsum </span> <span class="cicon-arrow-circle-right"></span></span>
        <span class="descript">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain. </span>
      </a>

        <ul class="group-links">
          <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
          <li><a href="#"><span>Neque porro quisquam est qui dolorem </span></a></li>
          <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
          <li><a href="#"><span>Lorem Ipsum orro quisquam est</span></a></li>
          <li><a href="#"><span>Lorem Ipsum orro quisquam est</span></a></li>
        </ul>

    </li>
  </ul>



  <ul class="cui catalogue-group catalogue-detail without-bg-color catalogue-group-without-icon title-link-remove">
    <li>
      <h3 class="catalogue-title-link">
        <span class="catalogue-title h4"> <span class="sub-cat-title"> Neque porro quisquam est qui dolorem ipsum quia </span> <span class="cicon-arrow-circle-right"></span></span>
        <span class="descript">Lorem Ipsum lorem Ipsum</span>
      </h3>

        <ul class="group-links">
          <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
          <li><a href="#"><span>Neque porro quisquam est qui dolorem</span></a></li>
          <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
          <li><a href="#"><span>Lorem Ipsum</span></a></li>
          <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
        </ul>

    </li>
  </ul>

 <--Remove the min-height on the title - add the 'auto-height' beside the "catalogue-title-link" -->
 <ul class="cui catalogue-group catalogue-detail without-bg-color catalogue-group-without-icon title-link-remove">
    <li>
        <h3 class="catalogue-title-link auto-height">
              <span class="catalogue-title h4"><span class="sub-cat-title">Neque porro quisquam est qui dolorem ipsum quia</span><span class="cicon-arrow-circle-right"></span></span>
              <span class="descript">Lorem Ipsum lorem Ipsum</span>
            </h3>
        <ul class="group-links">
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem</span></span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></span></a></li>
            <li><a href="#"><span>Lorem Ipsum</span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
        </ul>
    </li>
</ul>


<ul class="cui catalogue-group catalogue-detail without-bg-color catalogue-group-without-icon title-link-remove ">
    <li>
        <p class="catalogue-title-link auto-height">
            <span class="catalogue-title h4"><span class="sub-cat-title">Neque porro quisquam est qui dolorem ipsum quia</span><span class="cicon-arrow-circle-right"></span></span>
            <span class="descript">Lorem Ipsum lorem Ipsum</span>
        </p>
        <ul class="group-links">
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem</span></span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></span></a></li>
            <li><a href="#"><span>Lorem Ipsum</span></a></li>
            <li><a href="#"><span>Neque porro quisquam est qui dolorem ipsum</span></a></li>
        </ul>
    </li>
</ul>

Usage

This pattern may be used in the global navigation menu.

Two visual versions

  • White background with dark text description: add the class name 'without-bg-color' to the content div
  • Light grey background with dark text description: add the class name 'with-bg-color-grey' to the content div

Accessibility

Use the unorder list to display the list of items