Call to action block for use with websites and landing pages.

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - CTA 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="cta-2 bg-primary">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-middle cta-row">
                <div class="cell medium-6 large-6">
                    <p class="cta-text">High quality FWR blocks are carefully crafted to let you create your website quickly and easily</p>
                </div>
                <div class="cell medium-6 large-6 btn-box">
                    <button class="button primary">Get Started</button>
                    <button class="button hollow">Learn More</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.cta-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$primary: #5863f8;
$white: $white;
$button-radius: 4px;

// Custom CSS
body {
  font-family: #{$body-font-family} !important;
}

.cta-2 {
  @include padding-direction('vertical', 3);
}

.bg-primary {
  background: $primary;
}

.button {
  border-radius: $button-radius;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 20px;

  &.primary {
    @include button-style($white, 'auto', $primary);
    border: solid 2px $white;
    color: $primary;
    margin-right: 8px;

    &:hover {
      background-color: $primary;
      color: $white;
    }
  }

  &.hollow {
    @include button-hollow-style($primary);
    border: solid 2px $white;
    color: $white;

    &:hover, &:focus, &:active {
      background-color: $white;
      border-color: $white;
      color: $primary;
    }
  }
}

.cta-text {
  color: $white;
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 0;
  text-align: center;
}

.btn-box {
  margin-top: 3rem;

  .button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    @include padding-direction('horizontal', 1.5);
  }
}


@media #{breakpoint(medium)} {

  .cta-row {
    @include padding-direction('vertical', 1);
  }

  .cta-text {
    text-align: left;
  }

  .btn-box {
    margin-top: 0;
    text-align: center;

    .button {
      display: inline-block;
      @include margin-direction('horizontal', .25);
      margin-bottom: 0;
    }
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}

.cta-2 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.bg-primary {
  background: #5863f8;
}

.button {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 20px;
}

.button.primary {
  background-color: #fefefe;
  color: #5863f8;
  border: solid 2px #fefefe;
  color: #5863f8;
  margin-right: 8px;
}

.button.primary:hover, .button.primary:focus {
  background-color: #cbcbcb;
  color: #5863f8;
}

.button.primary:hover {
  background-color: #5863f8;
  color: #fefefe;
}

.button.hollow {
  border: 1px solid #5863f8;
  color: #5863f8;
  border: solid 2px #fefefe;
  color: #fefefe;
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #0711a1;
  color: #0711a1;
}

.button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
  border: 1px solid #5863f8;
  color: #5863f8;
}

.button.hollow:hover, .button.hollow:focus, .button.hollow:active {
  background-color: #fefefe;
  border-color: #fefefe;
  color: #5863f8;
}

.cta-text {
  color: #fefefe;
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 0;
  text-align: center;
}

.btn-box {
  margin-top: 3rem;
}

.btn-box .button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

@media (min-width: 40em) {
  .cta-row {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .cta-text {
    text-align: left;
  }
  .btn-box {
    margin-top: 0;
    text-align: center;
  }
  .btn-box .button {
    display: inline-block;
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
    margin-bottom: 0;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9jdGEvY2FsbC10by1hY3Rpb24tMg==