Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Callout Box to your Website

A callout box is an effective way to display your call-to-action on your website in between content.

A callout box is an effective way to display your call-to-action on your website in between content blocks. Our callout box design is mobile responsive and allows room for your call-to-action, some additional messaging, and a CTA button.

Below is the HTML, CSS, and JavaScript required to add a callout box to your website.

Step 1 - Add the HTML below where you'd like to place your callout box

<div class="container">
  <div class="callout">
    <h5>Brought to you by <img class="by-webcorpco" src="https://www.solodev.com/assets/side-nav/logo.png" alt="webcorpco logo"></h5>
    <h4>Decide with Data.</h4>
    <p>The world's leading big data and business intelligence platform.</p>
    <a class="btn" href="">Get Started</a>
  </div>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

.callout {
  position: relative;
  top: -20px;
  padding: 45px 20px;
  text-align: center;
  opacity: 0;
  border-radius: 5px;
  background: #1f2532;
  margin-right: 125px;
  margin-left: 125px;
  margin-top: 50px;
  opacity: 1;
  top: 0px;
}
h5 {
  font: 700 13px/18px 'Source Sans Pro',sans-serif;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
}
h4, h5 {
  color: #90a4ae;
}
.by-webcorpco {
  display: inline-block;
  width: 95px;
  height: 22px;
  margin: -2px 0 0 4px;
  vertical-align: middle;
}
h4 {
  font: 700 22px/28px 'Source Sans Pro',sans-serif;
  margin-top: 35px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 60px;
  margin-bottom: 40px;
  color: #fff;
}
p {
  margin-top: 10px;
  color: rgba(255,255,255,.8);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 22px;
}
.btn {
  line-height: 40px;
  margin: 20px auto 0;
  color: #fff;
  background: #00bff3;
  font-size: 20px;
  max-width: 600px;
  margin: 35px auto 0;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 25px;
  padding-left: 25px;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
@media screen and (min-width: 35.5em)
.btn {
  font-size: 18px;
  line-height: 22px;
  max-width: 300px;
  margin: 35px auto 0;
  padding-top: 15px;
  padding-top: 15px;
}
@media screen and (min-width: 35.5em)
p {
  font-size: 20px;
  line-height: 28px;
}
@media screen and (min-width: 35.5em)
h4 {
  font-size: 34px;
  line-height: 40px;
}
@media screen and (min-width: 35.5em)
.callout {
  top: -30px;
  padding: 80px 45px;
}
@media screen and (min-width: 35.5em)
h5 {
  font-size: 15px;
  line-height: 18px;
}

Step 3 - Add the includes below to the page where your callout box lives

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev