Icon Box

Icon boxes are used to visually highlight an icon.

Usage

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

Implementation

TypeName
Elements
Icon Box.c-icon-box
Modifiers
Color.c-box--dark--blue
--green --orange --pink --purple --red --teal --yellow
Size.c-icon-box--sm .c-icon-box--xs
StatesNone

Modifiers

Color

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

Size

<div className="flex space-x-4">
  <div className="c-icon-box">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c-icon-box c-icon-box--sm">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
  <div className="c-icon-box c-icon-box--xs">
    <FontAwesomeIcon icon={faStroopwafel} />
  </div>
</div>
Show more