Infochip

In groundhog since v5.1.0

Examples

Title
Description

<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>
  1. 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>
  1. 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>
  1. 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 caption

attribute name effect
infochip Wrapper class for the infochip
infochip__desc Styling for infochip text
infochip__desc__title Styles the infochip title
infochip__icon Wrapper for the infochip icon