Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

List

In groundhog since v0.1.1

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>
Level one step
Level one step
Level one step

A headline between level one steps

Level one step

Level one step

Level two step
Level two step

Level one step

Level two step

Level three step
Level three step
Level three step
This is not a level two step.
Level two step
Level one step

<div class="step">Level one step</div>
<div class="step">Level one step</div>
<div class="step">Level one step</div>
<h3>A headline between level one steps</h3>
<div class="step">Level one step</div>
<div class="step">
  <p>Level one step</p>
  <div class="step">Level two step</div>
  <div class="step">Level two step</div>
</div>
<div class="step">
  <p>Level one step</p>
  <div class="step">
    <p>Level two step</p>
    <div class="step">Level three step</div>
    <div class="step">Level three step</div>
    <div class="step">Level three step</div>
  </div>
  <div>This is not a level two step.</div>
  <div class="step">Level two step</div>
</div>
<div class="step">Level one step</div>

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