Footer

In groundhog since v0.1.1

Examples


<footer class="footer theme--dark">
  <div class="footer__socials">
    <h3>Join us on</h3>
    <a href="https://www.kununu.com/at/dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Kununu</title>
        <path class="st0" d="M16.6,8.7l0.5,0.5c0.3,0.3,0.7,0.3,1,0L18.2,9c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1c-0.1,0.1-0.1,0.2,0,0.2l0.5,0.5c0.1,0.1,0.1,0.2,0,0.3l-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1C16.5,8.4,16.5,8.6,16.6,8.7L16.6,8.7z"></path> <path d="M15.3,7.3c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l-0.5-0.5c-0.1-0.1-0.1-0.2,0-0.3l0.1-0.1 c0.1-0.1,0.2-0.1,0.3,0L16,6.6c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l0,0l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0l-0.1,0.1 c-0.3,0.3-0.3,0.7,0,0.9L15.3,7.3z"></path> <path d="M16.7,6.6c0.1,0.1,0.2,0.1,0.3,0l0.5-0.5c0.1-0.1,0.2-0.1,0.3,0l0.1,0.1c0.1,0.1,0.1,0.2,0,0.3L17.3,7 c-0.1,0.1-0.1,0.2,0,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.3,0l0,0l0.5-0.5c0.3-0.3,0.3-0.7,0-0.9l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-0.5,0.5 C16.5,6.4,16.5,6.5,16.7,6.6L16.7,6.6z"></path> <path d="M14.8,9.1c0.3,0.3,0.7,0.3,1,0l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l-0.5,0.5 c-0.1,0.1-0.2,0.1-0.3,0l-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l0,0 l-0.5,0.5C14.5,8.4,14.5,8.8,14.8,9.1L14.8,9.1z"></path> <path d="M5,19.2h2.1c0.2,0,0.4-0.2,0.4-0.3V16h0c0-0.8,0.6-1.4,1.4-1.4h0.7c0.8,0,1.4,0.6,1.4,1.4v0.7h0v2.2 c0,0.2,0.2,0.3,0.4,0.3h2.1c0.2,0,0.4-0.2,0.4-0.3l0-2.2V16c0-1.1-0.4-2-1.1-2.8c0.7-0.7,1.1-1.7,1.1-2.7V9.8h0 c0-0.2-0.2-0.3-0.3-0.3h-2.1c-0.2,0-0.3,0.1-0.3,0.3l0,0.7c0,0.7-0.6,1.4-1.4,1.4v0H8.9c-0.5,0-1,0.1-1.4,0.2V6.1 c0-0.2-0.2-0.3-0.4-0.3H5c-0.2,0-0.4,0.2-0.4,0.3v12.8C4.6,19.1,4.8,19.2,5,19.2z"></path>
      </svg>
    </a>
    <a href="https://www.facebook.com/Dynatrace/" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Facebook</title>
        <path d="M9.6,20.1v-7.3H7.2V9.6h2.4V8.4c0-2.2,1.6-4.1,3.6-4.1h2.6v3.2h-2.6c-0.3,0-0.6,0.3-0.6,0.9v1.3 h3.2v3.2h-3.2v7.3H9.6z"></path>
      </svg>
    </a>
    <a href="https://twitter.com/Dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Twitter</title>
        <path id="twitter" d="M14.4,5.6c1.3,0,2,0.4,2.6,1c0.6,0,1.3-0.4,1.7-0.6c0.1-0.1,0.3-0.2,0.4-0.2 C19,6.5,18.6,7,18.1,7.4c-0.1,0.1-0.2,0.2-0.4,0.3v0c0.7,0,1.3-0.3,1.9-0.5v0c-0.3,0.5-0.7,1-1.1,1.3c-0.2,0.1-0.3,0.3-0.5,0.4 c0,0.8,0,1.5-0.2,2.1c-0.8,3.8-3,6.3-6.5,7.4C10,18.8,8,19,6.6,18.6c-0.7-0.2-1.4-0.4-2-0.6c-0.3-0.1-0.6-0.3-0.9-0.5 c-0.1-0.1-0.2-0.1-0.3-0.2c0.3,0,0.7,0.1,1.1,0c0.3-0.1,0.7,0,1-0.1c0.8-0.2,1.4-0.4,2-0.7c0.3-0.2,0.7-0.4,0.9-0.6 c-0.4,0-0.7-0.1-1-0.2c-1.1-0.4-1.7-1.1-2.1-2.1c0.3,0,1.3,0.1,1.5-0.1c-0.4,0-0.8-0.3-1.1-0.4C4.7,12.6,4,11.7,4,10.2 c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.4,0.1,0.7,0.2c0.1,0,0.3,0.1,0.5,0c0,0,0,0,0,0c-0.2-0.2-0.4-0.3-0.6-0.5 c-0.6-0.7-1.1-1.8-0.7-3c0.1-0.3,0.2-0.6,0.4-0.9c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0.3,0.4,0.6,0.7,1,1c1.2,1,2.3,1.5,4.1,2 c0.4,0.1,1,0.2,1.5,0.2c-0.2-0.4-0.1-1.1,0-1.6c0.3-1.1,0.9-1.8,1.9-2.2c0.2-0.1,0.5-0.2,0.7-0.2C14.2,5.6,14.3,5.6,14.4,5.6z"></path>
      </svg>
    </a>
    <a href="https://www.linkedin.com/company/dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Linkedin</title>
        <path d="M7.5,19.1V9.8H4.4v9.4H7.5z M6,8.5c1.1,0,1.8-0.7,1.8-1.6 C7.7,6,7.1,5.3,6,5.3C4.9,5.3,4.2,6,4.2,6.9C4.2,7.8,4.9,8.5,6,8.5L6,8.5L6,8.5z"></path>
        <path d="M9.3,19.1h3.1v-5.2c0-0.3,0-0.6,0.1-0.8 c0.2-0.6,0.7-1.1,1.6-1.1c1.1,0,1.6,0.9,1.6,2.1v5h3.1v-5.4c0-2.9-1.5-4.2-3.6-4.2c-1.7,0-2.4,0.9-2.8,1.6h0V9.8H9.3 C9.3,10.7,9.3,19.1,9.3,19.1L9.3,19.1z"></path>
      </svg>
    </a>
    <a href="https://plus.google.com/+dynatrace/about" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Google+</title>
        <path d="M2.9,11.2c0-2.8,2.6-5.3,5.5-5.2C9.7,6,11,6.6,12,7.4c-0.4,0.5-0.9,1-1.4,1.4C9.4,8,7.6,7.7,6.4,8.7
		c-1.8,1.2-1.9,4.1-0.1,5.5c1.7,1.5,4.8,0.8,5.3-1.6c-1,0-2.1,0-3.1,0c0-0.6,0-1.2,0-1.9c1.7,0,3.5,0,5.2,0c0.1,1.5-0.1,3-1,4.2
		c-1.4,1.9-4.1,2.5-6.2,1.7C4.2,15.8,2.7,13.5,2.9,11.2z"></path> <path d="M17,9.1c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c-0.5,0-1,0-1.6,0c0,0.5,0,1,0,1.6
		c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c0.5,0,1,0,1.6,0C17,10.2,17,9.7,17,9.1z"></path>
      </svg>
    </a>
  </div>
</footer>


<footer class="footer theme--dark">
    <div class="footer__socials">
      <h3>Join us on</h3>
      <a href="https://www.kununu.com/at/dynatrace" class="btn btn--secondary footer__sociallink">
        <svg viewBox="0 0 23 23">
          <title>Kununu</title>
          <path class="st0" d="M16.6,8.7l0.5,0.5c0.3,0.3,0.7,0.3,1,0L18.2,9c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1c-0.1,0.1-0.1,0.2,0,0.2l0.5,0.5c0.1,0.1,0.1,0.2,0,0.3l-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1C16.5,8.4,16.5,8.6,16.6,8.7L16.6,8.7z"></path> <path d="M15.3,7.3c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l-0.5-0.5c-0.1-0.1-0.1-0.2,0-0.3l0.1-0.1 c0.1-0.1,0.2-0.1,0.3,0L16,6.6c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l0,0l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0l-0.1,0.1 c-0.3,0.3-0.3,0.7,0,0.9L15.3,7.3z"></path> <path d="M16.7,6.6c0.1,0.1,0.2,0.1,0.3,0l0.5-0.5c0.1-0.1,0.2-0.1,0.3,0l0.1,0.1c0.1,0.1,0.1,0.2,0,0.3L17.3,7 c-0.1,0.1-0.1,0.2,0,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.3,0l0,0l0.5-0.5c0.3-0.3,0.3-0.7,0-0.9l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-0.5,0.5 C16.5,6.4,16.5,6.5,16.7,6.6L16.7,6.6z"></path> <path d="M14.8,9.1c0.3,0.3,0.7,0.3,1,0l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l-0.5,0.5 c-0.1,0.1-0.2,0.1-0.3,0l-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l0,0 l-0.5,0.5C14.5,8.4,14.5,8.8,14.8,9.1L14.8,9.1z"></path> <path d="M5,19.2h2.1c0.2,0,0.4-0.2,0.4-0.3V16h0c0-0.8,0.6-1.4,1.4-1.4h0.7c0.8,0,1.4,0.6,1.4,1.4v0.7h0v2.2 c0,0.2,0.2,0.3,0.4,0.3h2.1c0.2,0,0.4-0.2,0.4-0.3l0-2.2V16c0-1.1-0.4-2-1.1-2.8c0.7-0.7,1.1-1.7,1.1-2.7V9.8h0 c0-0.2-0.2-0.3-0.3-0.3h-2.1c-0.2,0-0.3,0.1-0.3,0.3l0,0.7c0,0.7-0.6,1.4-1.4,1.4v0H8.9c-0.5,0-1,0.1-1.4,0.2V6.1 c0-0.2-0.2-0.3-0.4-0.3H5c-0.2,0-0.4,0.2-0.4,0.3v12.8C4.6,19.1,4.8,19.2,5,19.2z"></path>
        </svg>
      </a>
      <a href="https://www.facebook.com/Dynatrace/" class="btn btn--secondary footer__sociallink">
        <svg viewBox="0 0 23 23">
          <title>Facebook</title>
          <path d="M9.6,20.1v-7.3H7.2V9.6h2.4V8.4c0-2.2,1.6-4.1,3.6-4.1h2.6v3.2h-2.6c-0.3,0-0.6,0.3-0.6,0.9v1.3 h3.2v3.2h-3.2v7.3H9.6z"></path>
        </svg>
      </a>
      <a href="https://twitter.com/Dynatrace" class="btn btn--secondary footer__sociallink">
        <svg viewBox="0 0 23 23">
          <title>Twitter</title>
          <path id="twitter" d="M14.4,5.6c1.3,0,2,0.4,2.6,1c0.6,0,1.3-0.4,1.7-0.6c0.1-0.1,0.3-0.2,0.4-0.2 C19,6.5,18.6,7,18.1,7.4c-0.1,0.1-0.2,0.2-0.4,0.3v0c0.7,0,1.3-0.3,1.9-0.5v0c-0.3,0.5-0.7,1-1.1,1.3c-0.2,0.1-0.3,0.3-0.5,0.4 c0,0.8,0,1.5-0.2,2.1c-0.8,3.8-3,6.3-6.5,7.4C10,18.8,8,19,6.6,18.6c-0.7-0.2-1.4-0.4-2-0.6c-0.3-0.1-0.6-0.3-0.9-0.5 c-0.1-0.1-0.2-0.1-0.3-0.2c0.3,0,0.7,0.1,1.1,0c0.3-0.1,0.7,0,1-0.1c0.8-0.2,1.4-0.4,2-0.7c0.3-0.2,0.7-0.4,0.9-0.6 c-0.4,0-0.7-0.1-1-0.2c-1.1-0.4-1.7-1.1-2.1-2.1c0.3,0,1.3,0.1,1.5-0.1c-0.4,0-0.8-0.3-1.1-0.4C4.7,12.6,4,11.7,4,10.2 c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.4,0.1,0.7,0.2c0.1,0,0.3,0.1,0.5,0c0,0,0,0,0,0c-0.2-0.2-0.4-0.3-0.6-0.5 c-0.6-0.7-1.1-1.8-0.7-3c0.1-0.3,0.2-0.6,0.4-0.9c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0.3,0.4,0.6,0.7,1,1c1.2,1,2.3,1.5,4.1,2 c0.4,0.1,1,0.2,1.5,0.2c-0.2-0.4-0.1-1.1,0-1.6c0.3-1.1,0.9-1.8,1.9-2.2c0.2-0.1,0.5-0.2,0.7-0.2C14.2,5.6,14.3,5.6,14.4,5.6z"></path>
        </svg>
      </a>
      <a href="https://www.linkedin.com/company/dynatrace" class="btn btn--secondary footer__sociallink">
        <svg viewBox="0 0 23 23">
          <title>Linkedin</title>
          <path d="M7.5,19.1V9.8H4.4v9.4H7.5z M6,8.5c1.1,0,1.8-0.7,1.8-1.6 C7.7,6,7.1,5.3,6,5.3C4.9,5.3,4.2,6,4.2,6.9C4.2,7.8,4.9,8.5,6,8.5L6,8.5L6,8.5z"></path>
          <path d="M9.3,19.1h3.1v-5.2c0-0.3,0-0.6,0.1-0.8 c0.2-0.6,0.7-1.1,1.6-1.1c1.1,0,1.6,0.9,1.6,2.1v5h3.1v-5.4c0-2.9-1.5-4.2-3.6-4.2c-1.7,0-2.4,0.9-2.8,1.6h0V9.8H9.3 C9.3,10.7,9.3,19.1,9.3,19.1L9.3,19.1z"></path>
        </svg>
      </a>
      <a href="https://plus.google.com/+dynatrace/about" class="btn btn--secondary footer__sociallink">
        <svg viewBox="0 0 23 23">
          <title>Google+</title>
          <path d="M2.9,11.2c0-2.8,2.6-5.3,5.5-5.2C9.7,6,11,6.6,12,7.4c-0.4,0.5-0.9,1-1.4,1.4C9.4,8,7.6,7.7,6.4,8.7
      c-1.8,1.2-1.9,4.1-0.1,5.5c1.7,1.5,4.8,0.8,5.3-1.6c-1,0-2.1,0-3.1,0c0-0.6,0-1.2,0-1.9c1.7,0,3.5,0,5.2,0c0.1,1.5-0.1,3-1,4.2
      c-1.4,1.9-4.1,2.5-6.2,1.7C4.2,15.8,2.7,13.5,2.9,11.2z"></path> <path d="M17,9.1c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c-0.5,0-1,0-1.6,0c0,0.5,0,1,0,1.6
      c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c0.5,0,1,0,1.6,0C17,10.2,17,9.7,17,9.1z"></path>
        </svg>
      </a>
    </div>
    <div class="footer__legal">
      <p>&copy; 2017  Dynatrace LLC. All Rights Reserved</p>
      <ul class="footer__linklist footer__linklist--horizontal">
        <li class="footer__linkitem">
          <a href="#noop">Security</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Privacy</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Legal</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Contact</a>
        </li>
      </ul>
    </div>
  </footer>


<footer class="footer theme--dark">
  <div class="footer__columns">
    <div class="footer__column__group">
    <div class="footer__column footer__column__separated">
      <h2>View this page in</h2>
      <ul class="footer__linklist">
        <li class="footer__linkitem">
          <a href="#noop">German</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Française</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Espanol</a>
        </li>
      </ul>
    </div>
    </div>
    <div class="footer__column__group footer__column__linklists">
    <div class="footer__column">
      <h2>Capabilities</h2>
      <ul class="footer__linklist">
        <li class="footer__linkitem">
          <a href="#noop">Application performance management (APM)</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Cloud monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Continuous delivery analytics</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Database monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Deep dive application monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Log analytics</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Mainframe monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Microservices and container</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Mobile app monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Network monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Real user monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Server monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Synthetic monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Real user monitoring for corporate applications</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Virtualization monitoring</a>
        </li>
      </ul>
    </div>
    <div class="footer__column">
      <h2>Column 3</h2>
      <ul class="footer__linklist">
        <li class="footer__linkitem">
          <a href="#noop">Application performance management (APM)</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Cloud monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Continuous delivery analytics</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Database monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Deep dive application monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Log analytics</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Mainframe monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Microservices and container</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Mobile app monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Network monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Real user monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Server monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Synthetic monitoring</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Real user monitoring for corporate applications</a>
        </li>
        <li class="footer__linkitem">
          <a href="#noop">Virtualization monitoring</a>
        </li>
      </ul>
    </div>
  <div class="footer__column">
    <h2>Column 4</h2>
    <ul class="footer__linklist">
      <li class="footer__linkitem">
        <a href="#noop">Application performance management (APM)</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Cloud monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Continuous delivery analytics</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Database monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Deep dive application monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Log analytics</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Mainframe monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Microservices and container</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Mobile app monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Network monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Real user monitoring</a>
      </li>
    </ul>
  </div>
  <div class="footer__column">
    <h2>Column 5 with a very long title</h2>
    <ul class="footer__linklist">
      <li class="footer__linkitem">
        <a href="#noop">Application performance management (APM)</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Cloud monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Continuous delivery analytics</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Database monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Deep dive application monitoring</a>
      </li>
    </ul>
  </div>
  <div class="footer__column">
    <h2>Column 6</h2>
    <ul class="footer__linklist">
      <li class="footer__linkitem">
        <a href="#noop">Application performance management (APM)</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Cloud monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Continuous delivery analytics</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Database monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Deep dive application monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Log analytics</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Mainframe monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Microservices and container</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Mobile app monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Network monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Real user monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Server monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Synthetic monitoring</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Real user monitoring for corporate applications</a>
      </li>
      <li class="footer__linkitem">
        <a href="#noop">Virtualization monitoring</a>
      </li>
    </ul>
  </div>
<div class="footer__column">
  <h2>Column 7</h2>
  <ul class="footer__linklist">
    <li class="footer__linkitem">
      <a href="#noop">Security</a>
    </li>
    <li class="footer__linkitem">
      <a href="#noop">Privacy</a>
    </li>
    <li class="footer__linkitem">
      <a href="#noop">Legal</a>
    </li>
    <li class="footer__linkitem">
      <a href="#noop">Sitemap</a>
    </li>
  </ul>
</div>
</div>
  </div>
  <div class="footer__socials">
    <a href="https://www.kununu.com/at/dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Kununu</title>
        <path class="st0" d="M16.6,8.7l0.5,0.5c0.3,0.3,0.7,0.3,1,0L18.2,9c0.3-0.3,0.3-0.7,0-0.9l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1c-0.1,0.1-0.1,0.2,0,0.2l0.5,0.5c0.1,0.1,0.1,0.2,0,0.3l-0.1,0.1c-0.1,0.1-0.2,0.1-0.3,0l-0.5-0.5c-0.1-0.1-0.2-0.1-0.3,0 l-0.1,0.1C16.5,8.4,16.5,8.6,16.6,8.7L16.6,8.7z"></path> <path d="M15.3,7.3c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l-0.5-0.5c-0.1-0.1-0.1-0.2,0-0.3l0.1-0.1 c0.1-0.1,0.2-0.1,0.3,0L16,6.6c0.1,0.1,0.2,0.1,0.3,0l0.1-0.1c0.1-0.1,0.1-0.2,0-0.2l0,0l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0l-0.1,0.1 c-0.3,0.3-0.3,0.7,0,0.9L15.3,7.3z"></path> <path d="M16.7,6.6c0.1,0.1,0.2,0.1,0.3,0l0.5-0.5c0.1-0.1,0.2-0.1,0.3,0l0.1,0.1c0.1,0.1,0.1,0.2,0,0.3L17.3,7 c-0.1,0.1-0.1,0.2,0,0.2l0.1,0.1c0.1,0.1,0.2,0.1,0.3,0l0,0l0.5-0.5c0.3-0.3,0.3-0.7,0-0.9l-0.1-0.1c-0.3-0.3-0.7-0.3-1,0l-0.5,0.5 C16.5,6.4,16.5,6.5,16.7,6.6L16.7,6.6z"></path> <path d="M14.8,9.1c0.3,0.3,0.7,0.3,1,0l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l-0.5,0.5 c-0.1,0.1-0.2,0.1-0.3,0l-0.1-0.1c-0.1-0.1-0.1-0.2,0-0.3l0.5-0.5c0.1-0.1,0.1-0.2,0-0.2l-0.1-0.1c-0.1-0.1-0.2-0.1-0.3,0l0,0 l-0.5,0.5C14.5,8.4,14.5,8.8,14.8,9.1L14.8,9.1z"></path> <path d="M5,19.2h2.1c0.2,0,0.4-0.2,0.4-0.3V16h0c0-0.8,0.6-1.4,1.4-1.4h0.7c0.8,0,1.4,0.6,1.4,1.4v0.7h0v2.2 c0,0.2,0.2,0.3,0.4,0.3h2.1c0.2,0,0.4-0.2,0.4-0.3l0-2.2V16c0-1.1-0.4-2-1.1-2.8c0.7-0.7,1.1-1.7,1.1-2.7V9.8h0 c0-0.2-0.2-0.3-0.3-0.3h-2.1c-0.2,0-0.3,0.1-0.3,0.3l0,0.7c0,0.7-0.6,1.4-1.4,1.4v0H8.9c-0.5,0-1,0.1-1.4,0.2V6.1 c0-0.2-0.2-0.3-0.4-0.3H5c-0.2,0-0.4,0.2-0.4,0.3v12.8C4.6,19.1,4.8,19.2,5,19.2z"></path>
      </svg>
    </a>
    <a href="https://www.facebook.com/Dynatrace/" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Facebook</title>
        <path d="M9.6,20.1v-7.3H7.2V9.6h2.4V8.4c0-2.2,1.6-4.1,3.6-4.1h2.6v3.2h-2.6c-0.3,0-0.6,0.3-0.6,0.9v1.3 h3.2v3.2h-3.2v7.3H9.6z"></path>
      </svg>
    </a>
    <a href="https://twitter.com/Dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Twitter</title>
        <path id="twitter" d="M14.4,5.6c1.3,0,2,0.4,2.6,1c0.6,0,1.3-0.4,1.7-0.6c0.1-0.1,0.3-0.2,0.4-0.2 C19,6.5,18.6,7,18.1,7.4c-0.1,0.1-0.2,0.2-0.4,0.3v0c0.7,0,1.3-0.3,1.9-0.5v0c-0.3,0.5-0.7,1-1.1,1.3c-0.2,0.1-0.3,0.3-0.5,0.4 c0,0.8,0,1.5-0.2,2.1c-0.8,3.8-3,6.3-6.5,7.4C10,18.8,8,19,6.6,18.6c-0.7-0.2-1.4-0.4-2-0.6c-0.3-0.1-0.6-0.3-0.9-0.5 c-0.1-0.1-0.2-0.1-0.3-0.2c0.3,0,0.7,0.1,1.1,0c0.3-0.1,0.7,0,1-0.1c0.8-0.2,1.4-0.4,2-0.7c0.3-0.2,0.7-0.4,0.9-0.6 c-0.4,0-0.7-0.1-1-0.2c-1.1-0.4-1.7-1.1-2.1-2.1c0.3,0,1.3,0.1,1.5-0.1c-0.4,0-0.8-0.3-1.1-0.4C4.7,12.6,4,11.7,4,10.2 c0.1,0.1,0.2,0.1,0.3,0.2c0.2,0.1,0.4,0.1,0.7,0.2c0.1,0,0.3,0.1,0.5,0c0,0,0,0,0,0c-0.2-0.2-0.4-0.3-0.6-0.5 c-0.6-0.7-1.1-1.8-0.7-3c0.1-0.3,0.2-0.6,0.4-0.9c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0.3,0.4,0.6,0.7,1,1c1.2,1,2.3,1.5,4.1,2 c0.4,0.1,1,0.2,1.5,0.2c-0.2-0.4-0.1-1.1,0-1.6c0.3-1.1,0.9-1.8,1.9-2.2c0.2-0.1,0.5-0.2,0.7-0.2C14.2,5.6,14.3,5.6,14.4,5.6z"></path>
      </svg>
    </a>
    <a href="https://www.linkedin.com/company/dynatrace" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Linkedin</title>
        <path d="M7.5,19.1V9.8H4.4v9.4H7.5z M6,8.5c1.1,0,1.8-0.7,1.8-1.6 C7.7,6,7.1,5.3,6,5.3C4.9,5.3,4.2,6,4.2,6.9C4.2,7.8,4.9,8.5,6,8.5L6,8.5L6,8.5z"></path>
        <path d="M9.3,19.1h3.1v-5.2c0-0.3,0-0.6,0.1-0.8 c0.2-0.6,0.7-1.1,1.6-1.1c1.1,0,1.6,0.9,1.6,2.1v5h3.1v-5.4c0-2.9-1.5-4.2-3.6-4.2c-1.7,0-2.4,0.9-2.8,1.6h0V9.8H9.3 C9.3,10.7,9.3,19.1,9.3,19.1L9.3,19.1z"></path>
      </svg>
    </a>
    <a href="https://plus.google.com/+dynatrace/about" class="btn btn--secondary footer__sociallink">
      <svg viewBox="0 0 23 23">
        <title>Google+</title>
        <path d="M2.9,11.2c0-2.8,2.6-5.3,5.5-5.2C9.7,6,11,6.6,12,7.4c-0.4,0.5-0.9,1-1.4,1.4C9.4,8,7.6,7.7,6.4,8.7
		c-1.8,1.2-1.9,4.1-0.1,5.5c1.7,1.5,4.8,0.8,5.3-1.6c-1,0-2.1,0-3.1,0c0-0.6,0-1.2,0-1.9c1.7,0,3.5,0,5.2,0c0.1,1.5-0.1,3-1,4.2
		c-1.4,1.9-4.1,2.5-6.2,1.7C4.2,15.8,2.7,13.5,2.9,11.2z"></path> <path d="M17,9.1c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c0.5,0,1,0,1.6,0c0,0.5,0,1,0,1.6c-0.5,0-1,0-1.6,0c0,0.5,0,1,0,1.6
		c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c-0.5,0-1,0-1.6,0c0-0.5,0-1,0-1.6c0.5,0,1,0,1.6,0C17,10.2,17,9.7,17,9.1z"></path>
      </svg>
    </a>
  </div>
  <p class="footer__legal">© 2017 Dynatrace LLC. All Rights Reserved</p>
</footer>

Introduction

The Groundhog footer component visually enhances the standard html <footer> element. The footer component usually holds buttons and link lists.

To include a footer component into your project, first create the <footer> element:

<footer>
<div>
 <a href="https://www.facebook.com/Dynatrace">facebook</a>
</div>
</footer>

To add the visual enhancements of Groundhog, add the necessary classes to the elements class attributes:

<footer class="footer">
<div class="footer__socials theme--dark">
 <a href="https://www.facebook.com/Dynatrace" class="btn btn--secondary footer__sociallink">facebook</a>
</div>
</footer>

Add a list of links (optional). Links can be divided in multiple columns. To separate a column use the footer__column__separated class.

<footer class="footer">
  <div class="footer__columns">
    <div class="footer__column__group">
      <div class="footer__column footer__column__separated">
        <h2>View this page in</h2>
        <ul class="footer__linklist">
          <li class="footer__linkitem">
            <a>German</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer__column__group footer__column__linklists">
      <div class="footer__column">
        <h2>Capabilities</h2>
        <ul class="footer__linklist">
          <li class="footer__linkitem">
            <a>Application performance management (APM)</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

class name	effect
`.footer`	Sets the basic styling for the footer element
`.footer__sociallink`	Sets the styling for the social buttons
`.footer__columns`	Defines the link list area
`.footer__column__group`	Defines a column group
`.footer__column__separated`	Sets the styling for separated columns
`.footer__linklist`	Sets the styling for the link list
`.footer__linklist--horizontal`	Sets the styling for the horizontal link list
`.footer__linkitem`	Sets link styling to list elements

Footer

Examples

Introduction

Including the footer component

Available classes for footer