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