A ready to use pricing table block for use with websites and landing pages. Dark styled and beautifully designed pricing table with 3 different plans to choose from.

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 - Pricing Table 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="pricing-table-2">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="cell large-8 text-center pricing-intro">
                    <h1 class="pricing-title">Pricing Plans</h1>
                    <p class="text-muted">You have 3 plans to choose from for using FWR blocks. Basic blocks are FREE
                        forever. Other premium blocks are also free. You can use it for your personal or commercial
                        projects. Just don't forget to share our website or give attribution.</p>

                </div>
            </div>

            <div class="grid-x grid-padding-x align-center pricing-plans">
                <div class="cell large-4 pricing-plan-wrap">
                    <div class="pricing-plan bg-white text-center">
                        <div class="pricing-header">
                            <h4>Small Business</h4>
                            <p class="text-muted">For small projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary">
                            <div class="pricing-text"><span>$19</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-unstyled">
                                <li>Upto 5 uses</li>
                                <li>Max 100 items/month</li>
                                <li>500 queries/month</li>
                                <li>Basic statistics</li>
                                <li>Email Support</li>
                            </ul>

                            <div class="pricing-action">
                                <button class="button primary">Get Started</button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="cell large-4 pricing-plan-wrap">
                    <div class="pricing-plan bg-white text-center">
                        <div class="pricing-header">
                            <h4>Professional</h4>
                            <p class="text-muted">For large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary">
                            <div class="pricing-text"><span>$29</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-unstyled">
                                <li>Upto 50 uses</li>
                                <li>Max 500 items/month</li>
                                <li>1000 queries/month</li>
                                <li>Full statistics</li>
                                <li>Email Support</li>
                            </ul>

                            <div class="pricing-action">
                                <button class="button primary">Get Started</button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="cell large-4 pricing-plan-wrap">
                    <div class="pricing-plan bg-white text-center">
                        <div class="pricing-header">
                            <h4>Power User</h4>
                            <p class="text-muted">For multi large scale projects</p>
                        </div>
                        <div class="pricing-amount bg-light-primary">
                            <div class="pricing-text"><span>$39</span>/year</div>
                            <div class="pricing-hover"></div>
                        </div>
                        <div class="pricing-features">
                            <ul class="list-unstyled">
                                <li>Unlimited uses</li>
                                <li>Unlimited items/month</li>
                                <li>Unlimited queries/month</li>
                                <li>Full statistics</li>
                                <li>Email & Phone Support</li>
                            </ul>
                            <div class="pricing-action">
                                <button class="button primary">Get Started</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- /.pricing-table-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";
$header-font-family: $body-font-family;
$body-font-color: #212529;
$primary: #5863f8;
$light-gray: #6c757d;
$white: #fff;
$black: #000;
$bg-dark: #343a40;
$intro-text: #adb5bd;

$button-radius: 4px;

body {
  color: $body-font-color;
}

.pricing-table-2 {
  font-family: $header-font-family;
  background: $bg-dark;
  @include padding-direction('vertical', 1.5);
}

.pricing-intro {
  p {
    line-height: 1.5;
  }
}

.pricing-plans {
  margin-top: .5rem;
}

.pricing-plan-wrap {
  max-width: 400px;
  margin: 1rem auto;
}

.pricing-plan {
  box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
  transition: box-shadow .3s;
  background: $white;

  &:hover {
    box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22);
  }
}

.bg-light-primary {
  background-color: rgba($primary, .1);
}

.pricing-action {
  margin-top: 1.5rem !important;
  @include padding-direction('vertical', 1);
}

.button {
  border-radius: $button-radius;
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 0;

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

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

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

.pricing-intro p {
  color: $intro-text;
}

.pricing-text span {
  font-size: 40px;
  font-weight: 600;
}

.pricing-amount {
  padding: 1.5rem;
}

.pricing-features {
  padding: 1.5rem;

  .list-unstyled {
    margin: 0;
    padding: 0;

    li {
      line-height: 2;
      list-style: none;
    }
  }
}

.pricing-title {
  font-family: $header-font-family;
  font-size: 2.5rem;
  line-height: 1.2;
  color: $white;
  margin-top: 0;
  margin-bottom: 1rem;
}

.pricing-header {
  padding: 1.5rem;

  h4 {
    font-family: $header-font-family;
    font-size: 1.5rem;
    line-height: 1.2;
  }

  p {
    margin-bottom: 0;
    line-height: 1.5;
  }
}

.text-muted {
  color: $light-gray;
}


@media #{breakpoint(large)} {

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

  .pricing-intro {
    @include padding-direction('horizontal', 3);
  }

  .pricing-title {
    margin-bottom: 1.5rem;
  }

  .pricing-plan-wrap {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .pricing-header {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .pricing-amount {
    position: relative;
    overflow: hidden;
    z-index: 0;

    .pricing-hover {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      background-color: $primary;
      color: $white;
      transition: opacity 0.3s;
      z-index: 0;
    }

    .pricing-text {
      position: relative;
      z-index: 2;
      transition: color .3s;
    }
  }

  .pricing-plans {
    margin-top: 2rem;
  }

  .pricing-plan {
    border-top: 5px solid $white;
    transition: border-color .3s, transform .3s, -webkit-transform .3s;
    cursor: default;
    position: relative;

    &:hover {
      border-color: $primary;
      transform: translateY(-1rem);

      .pricing-hover {
        opacity: 1;
      }

      .pricing-text {
        color: $white;
      }
    }
  }
}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  color: #212529;
}

.pricing-table-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #343a40;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.pricing-intro p {
  line-height: 1.5;
}

.pricing-plans {
  margin-top: .5rem;
}

.pricing-plan-wrap {
  max-width: 400px;
  margin: 1rem auto;
}

.pricing-plan {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: -webkit-box-shadow .3s;
  transition: -webkit-box-shadow .3s;
  transition: box-shadow .3s;
  transition: box-shadow .3s, -webkit-box-shadow .3s;
  background: #fff;
}

.pricing-plan:hover {
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.bg-light-primary {
  background-color: rgba(88, 99, 248, 0.1);
}

.pricing-action {
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.button {
  border-radius: 4px;
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.button.primary {
  background-color: #5863f8;
  color: #fff;
  border: solid 2px #5863f8;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fff;
}

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

.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: #5863f8;
  border-color: #5863f8;
  color: #fff;
}

.pricing-intro p {
  color: #adb5bd;
}

.pricing-text span {
  font-size: 40px;
  font-weight: 600;
}

.pricing-amount {
  padding: 1.5rem;
}

.pricing-features {
  padding: 1.5rem;
}

.pricing-features .list-unstyled {
  margin: 0;
  padding: 0;
}

.pricing-features .list-unstyled li {
  line-height: 2;
  list-style: none;
}

.pricing-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2.5rem;
  line-height: 1.2;
  color: #fff;
  margin-top: 0;
  margin-bottom: 1rem;
}

.pricing-header {
  padding: 1.5rem;
}

.pricing-header h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.5rem;
  line-height: 1.2;
}

.pricing-header p {
  margin-bottom: 0;
  line-height: 1.5;
}

.text-muted {
  color: #6c757d;
}

@media (min-width: 64em) {
  .pricing-table-2 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pricing-intro {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .pricing-title {
    margin-bottom: 1.5rem;
  }
  .pricing-plan-wrap {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .pricing-header {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .pricing-amount {
    position: relative;
    overflow: hidden;
    z-index: 0;
  }
  .pricing-amount .pricing-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #5863f8;
    color: #fff;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    z-index: 0;
  }
  .pricing-amount .pricing-text {
    position: relative;
    z-index: 2;
    -webkit-transition: color .3s;
    transition: color .3s;
  }
  .pricing-plans {
    margin-top: 2rem;
  }
  .pricing-plan {
    border-top: 5px solid #fff;
    transition: border-color .3s, transform .3s, -webkit-transform .3s;
    cursor: default;
    position: relative;
  }
  .pricing-plan:hover {
    border-color: #5863f8;
    -webkit-transform: translateY(-1rem);
            transform: translateY(-1rem);
  }
  .pricing-plan:hover .pricing-hover {
    opacity: 1;
  }
  .pricing-plan:hover .pricing-text {
    color: #fff;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9wcmljaW5nLXRhYmxlL3ByaWNpbmctdGFibGUtMg==