Displaying Content with Responsive Tiles

The web is filled with quality content but its presentation has never been more paramount.

The web is filled with quality content but its presentation has never been more paramount. In this article, we show you a popular way of displaying your website content using responsive tiles. This allows you to create a tile which, when clicked, directs to a detail page of that particular tile which is relevant to its graphic, title, and subtitle.

Below is the HTML, CSS, and JavaScript to add responsive content tiles to your website.

Step 1 - Add the HTML below where you'd like to populate your responsive tiles

<div class="container">
  <section class="cms-boxes">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 cms-boxes-outer">
          <div class="cms-boxes-items cms-features">
            <div class="boxes-align">
              <div class="small-box">
                <i class="fa fa-4x fa-laptop">&nbsp;</i>
                <h2>Data Management</h2>
                <p>Gain valuable insights with WebCorpCo Data.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 cms-boxes-outer">
          <div class="cms-boxes-items cms-security">
            <div class="boxes-align">
              <div class="small-box">
                <i class="fa fa-4x fa-cog">&nbsp;</i>
                <h2>Enterprise<br> Data Funnel</h2>
                <p>Pull in realtime data from every source on the web.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 cms-boxes-outer">
          <div class="cms-boxes-items cms-scalability">
            <div class="boxes-align">
              <div class="small-box">
                <i class="fa fa-4x fa-arrows-alt" aria-hidden="true"></i>
                <h2>Pattern Analysis</h2>
                <p>The world's most advanced algorithms let loose on your data.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 cms-boxes-outer">
          <div class="cms-boxes-items cms-built">
            <div class="boxes-align">
              <div class="large-box">
                <i class="fa fa-4x fa-heart" aria-hidden="true"></i>
                <h2>Award-winning customer service</h2>
                <p>Award-winning, U.S. based support 24/7. If you need help we are here.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 cms-boxes-outer">
          <div class="cms-boxes-items cms-documentation">
            <div class="boxes-align">
              <div class="large-box">
                <i class="fa fa-4x fa-file-code-o">&nbsp;</i>
                <h2>Documentation</h2>
                <p>From connecting data sources to styling reports, we have everything you need to get the most value out of WebCorpCo.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

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

section.cms-boxes .cms-boxes-outer {
  text-align: left;
  margin-bottom: 6px;
  padding: 0 3px;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items {
  height: 350px;
  display: table;
  width: 100%;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items p {
  color: #fff;
}
section.cms-boxes .cms-features {
  background-color: #b70457;
}
section.cms-boxes .boxes-align {
  display: table-cell;
  vertical-align: middle;
}
section.cms-boxes .small-box, 
section.cms-boxes .large-box {
  max-width: 350px;
  margin: 0 auto;
  text-align: center;
}
section.cms-boxes .cms-boxes-items h2 {
  font-size: 35px;
  color: #fff;
  font-weight: 400;
  line-height: 37px;
  text-align: center;
  margin: 20px 0 10px;
  text-transform: uppercase;
}
section.cms-boxes .cms-security {
  background-color: #0489b7;
}
section.cms-boxes .cms-security, 
section.cms-boxes .cms-documentation {
  background-color: rgb(66, 16, 88);
}
section.cms-boxes .cms-scalability {
  background: url(https://www.solodev.com/assets/tiles/scalability.jpg) 0 0 no-repeat;
  background-size: cover;
}
section.cms-boxes .cms-built {
  background: url(https://www.solodev.com/assets/tiles/customer-service.jpg) 0 0 no-repeat;
  background-size: cover;
}
section.cms-boxes .cms-security, section.cms-boxes .cms-documentation {
  background-color: rgb(66, 16, 88);
}
section.cms-boxes .cms-boxes-items:hover {
  opacity: .2;
  cursor: pointer;
}

Step 3 - Add the includes below to the web page featuring your tiles

<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Download from Github

Share on Facebook Tweet It