Components - Info Boxes

Headsup information with Info boxes

Grey Info boxes

Info Box

Implementation Code and the output

<body class="neon-ui">
  <div class="info-box">
    <i class="ph-bold ph-info"></i>
    <p>
        info-box: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

info-box: This is a sample info-round about

Info Box Plain

Implementation Code and the output

<body class="neon-ui">
  <div class="info-box-plain">
    <i class="ph-bold ph-info"></i>
    <p>
        info-box-plain: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

info-box-plain: This is a sample info-round about

Colored Tips - Info boxes

Tips Info box - Green

Implementation Code and the output

<body class="neon-ui">
  <div class="tips-box">
    <i class="ph-bold ph-info"></i>
    <p>
        tips-box: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

tips-box: This is a sample info-round about

Tips Info box - Blue

Implementation Code and the output

<body class="neon-ui">
  <div class="tips-box-blue">
    <i class="ph-bold ph-info"></i>
    <p>
        tips-box-blue: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

tips-box-blue: This is a sample info-round about

Tips Info box - Yellow

Implementation Code and the output

<body class="neon-ui">
  <div class="tips-box-yellow">
    <i class="ph-bold ph-info"></i>
    <p>
        tips-box-yellow: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

tips-box-yellow: This is a sample info-round about

Tips Info box - Red

Implementation Code and the output

<body class="neon-ui">
  <div class="tips-box-red">
    <i class="ph-bold ph-info"></i>
    <p>
        tips-box-red: This is a sample info-round
        <a href="">about</a>
    </p>
  </div>
</body>

Copy

tips-box-red: This is a sample info-round about

Navigational Components - Breadcrumbs

Components - Output Boxes