Infochip

Examples

<div class="infochip">
  <div class="infochip__icon">
    <svg role="img" class="icon icon--blue">
      <use xlink:href="#ruxit"></use>
    </svg>    
  </div>
  <div class="infochip__desc">
    <div class="infochip__desc__title" title="Title">
      Title
    </div>
    <div>
      Description
    </div>
  </div>
</div>
    

Introduction

The Groundhog infochip component is a styled element, usually two lines of text, a title and a description. It is typically accompanied by an icon.

Including the infochip component

1. To include a infochip component into your project, first create the html structure like shown in the example:

   <div>
   <div>
    <div>
      My title
    </div>
    <div>
      Description
    </div>
   </div>
   </div>
   

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

   <div class="infochip">
   <div class="infochip__desc">
    <div class="infochip__desc__title">
      My title
    </div>
    <div>
      Description
    </div>
   </div>
   </div>
   

3. For infochips with an icon, adapt the structue like this:

   <div class="infochip">
   <div class="infochip__icon">
    <svg role="img" class="icon icon--blue">
      <use xlink:href="#ruxit"></use>
    </svg>    
   </div>
   <div class="infochip__desc">
    <div class="infochip__desc__title">
      My title
    </div>
    <div>
      Description
    </div>
   </div>
   </div>
   

4. Add the title attribute for hover functionality.

   ...
   <div class="infochip__desc">
    <div class="infochip__desc__title" title="My title">
      My title
    </div>
   ...
   

Additional attributes for the infochip