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>

    
  1. Unified performance management
  2. Smarter monitoring at scale
  3. Big data analytics
    1. Business dashboards
    2. User behavior analytics
  4. Open ecosystem

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

    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren


<div class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</div>

<div class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</div>

<p class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>

<p class="step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>

    

Introduction

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

Including the list component

  1. To include a Groundhog list add a .list class to the <ul> or <ol> 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, just for <ul>):
    <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 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>
<ol class="list">
  <li>first list item</li>
  <li>
    second list item
    <ol>
      <li>first nested list item</li>
    </ol>
  </li>
</ol>

Number <div> or <p> elements

It is possible to number blocks by adding the .step class.

<div class="step">
  <p>First block</p>
</div>
<div class="step">
  <p>Second block</p>
</div>

Available classes for lists

class name effect
.list Base class for unordered and ordered lists
.step Class for numbering blocks

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;
}