Icon Box

Icon boxes are used to visually highlight an icon.

Usage

<div className="c_h-icon-box">
  <FontAwesomeIcon icon={faStroopwafel} />
</div>

Implementation

Type	Name
Elements
Icon Box	`.c_h-icon-box`
Modifiers
Color	`.c-h-icon-box--blue` `--green` `--orange` `--purple` `--red` `--teal` `--yellow` `--white`
Size	`.c_h-icon-box--sm` `.c_h-icon-box--lg` `.c_h-icon-box--xl`
States	None

Modifiers

Color

<div className="flex space-x-4">
  <div className="c_h-icon-box">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--blue">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--green">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--orange">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--purple">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--red">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--teal">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--yellow">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--white">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
</div>

Size

<div className="flex space-x-4">
  <div className="c_h-icon-box c_h-icon-box--sm">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--lg">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c_h-icon-box c_h-icon-box--xl">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
</div>