Content-Aware CTA

In this example below you will see how to do a Content-Aware CTA with some HTML / CSS and Javascript

Demo for a content-aware call to action box within a grid. The CTA expands to fill the remaining space based on the number of grid items before it. Use the buttons to add or remove grid items and see it work its magic.

Thumbnail
This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright praliedutzel ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Content-Aware CTA</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="header">
  <h1 class="header__title">Content-Aware CTA</h1>
  <a href="http://praliedutzel.com/content-aware-call-to-action/" target="_blank">Read the Article</a>
</header>

<ul class="grid">
  <li class="grid__item"></li>
  <li class="grid__item"></li>
  <li class="grid__item"></li>
  <li class="grid__item"></li>
  <li class="grid__item grid__cta">
    <a href="http://praliedutzel.com/writings/" target="_blank" class="grid__link">Read More Articles</a>
  </li>
</ul>

<button type="button" id="add-grid" class="button">Add Grid Item</button>
<button type="button" id="remove-grid" class="button">Remove Grid Item</button>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/content-aware-cta-mVNMYa */
.grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flexbox .grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

.grid__item {
  background-color: #232439;
  width: calc(100% - 2em);
  margin: 1em;
  padding: 2em 1em;
  display: block;
  float: left;
}
.flexbox .grid__item {
  float: none;
}

.grid__link {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.grid__link:hover, .grid__link:focus {
  color: #6ddce5;
}

@media screen and (min-width: 40em) and (max-width: 64em) {
  .grid__item {
    width: calc(50% - 2em);
  }

  .grid__cta {
    width: calc(100% - 2em);
  }

  .grid__cta:nth-of-type(2n) {
    width: calc(50% - 2em);
  }
}
@media screen and (min-width: 64em) {
  .grid__item {
    width: calc(33.333% - 2em);
  }

  .grid__cta {
    width: calc(100% - 2em);
  }

  .grid__cta:nth-of-type(3n) {
    width: calc(33.333% - 2em);
  }

  .grid__cta:nth-of-type(3n+2) {
    width: calc(66.666% - 2em);
  }
}
.button {
  background-color: transparent;
  margin: 1em;
  padding: 1em;
  display: inline-block;
  cursor: pointer;
  border: 2px solid #6ddce5;
  border-radius: 0;
  outline: none;
  color: #6ddce5;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.button:hover, .button:focus {
  background-color: #6ddce5;
  color: #fff;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #232439;
  padding: 4rem 2rem;
  text-align: center;
}
.header a {
  margin-top: 1rem;
  display: block;
  color: #6ddce5;
  font-size: 0.85rem;
  text-decoration: none;
}

.header__title {
  margin: 0;
  color: #fff;
  font-weight: 300;
}


/*Downloaded from https://www.codeseek.co/praliedutzel/content-aware-cta-mVNMYa */
$('#add-grid').on('click', function() {
  $('.grid').prepend( '<li class="grid__item"></div>' );
});


$('#remove-grid').on('click', function() {
  $('.grid__item').first().remove();
});

Comments