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