Unordered-list

Examples

  • Unified performance management
  • Smarter monitoring at scale
  • Big data analytics
    • Business dashboards
    • User behavior analytics
  • Open ecosystem

<ul class="list">
  <li>Unified performance management</li>
  <li>Smarter monitoring at scale</li>
  <li>
    Big data analytics
    <ul>
      <li>Business dashboards</li>
      <li>User behavior analytics</li>
    </ul>
  </li>
  <li>Open ecosystem</li>
</ul>

    
  • Unified performance management
  • Smarter monitoring at scale
  • Big data analytics
  • Open ecosystem

<div class="theme--blue">
  <ul class="list">
    <li>Unified performance management</li>
    <li>Smarter monitoring at scale</li>
    <li>Big data analytics</li>
    <li>Open ecosystem</li>
  </ul>
</div>

    
  • Unified performance management
  • Smarter monitoring at scale
  • Big data analytics
  • Open ecosystem

<div class="theme--purple">
  <ul class="list">
    <li>Unified performance management</li>
    <li>Smarter monitoring at scale</li>
    <li>Big data analytics</li>
    <li>Open ecosystem</li>
  </ul>
</div>

    
  • Unified performance management
  • Smarter monitoring at scale
  • Big data analytics
  • Open ecosystem

<div class="theme--royalblue">
  <ul class="list">
    <li>Unified performance management</li>
    <li>Smarter monitoring at scale</li>
    <li>Big data analytics</li>
    <li>Open ecosystem</li>
  </ul>
</div>

    
  • Unified performance management
  • Smarter monitoring at scale
  • Big data analytics
  • Open ecosystem

<div class="theme--green">
  <ul class="list">
    <li>Unified performance management</li>
    <li>Smarter monitoring at scale</li>
    <li>Big data analytics</li>
    <li>Open ecosystem</li>
  </ul>
</div>

    

Introduction

The Groundhog unordered list visually enhances the default <ul> list styling and nested versions. Keep in mind that the Groundhog unordered list component does not apply to default <ul> elements. The .list class has to be specifically set on the root <ul> element.

Including the unordered list component

  1. To include a Groundhog unordered list add a .list class to the <ul> tag. That's it.
    <ul class="list">
    <li>first list item</li>
    <li>second list item</li>
    <li>third list item</li>
    </ul>
    
  2. Add a wrapping <div> with a theme class to set the theme (optional):
    <div class="theme--blue">
    <ul class="list">
     <li>first list item</li>
     <li>second list item</li>
     <li>third list item</li>
    </ul>
    </div>
    

Nested unordered lists

It is possible to nest unordered lists.

<ul class="list">
  <li>first list item</li>
  <li>
    second list item
    <ul>
      <li>first nested list item</li>
    </ul>
  </li>
</ul>

Available themes for unordered lists

The default theme for the unordered list is turquoise, other available themes are:

class name theme color
.theme--blue Base class blue theme
.theme--purple Base class purple theme
.theme--green Base class green theme
.theme--royalblue Base class royalblue theme

Additional notes

To reset list styles use the following snippet:

ul {
  list-style: none;
  padding-left: 0;
}

ul li:before {
  position: absolute;
  content: none;
  margin: 0;
  padding: 0;
  display: none;
  width: auto;
  height: auto;
  float: none;
}