Feature block to highlight features of your product, web application or mobile application or any SaaS (Software-as-a-Service) application.

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 - Feature 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="feature-2 bg-light">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="cell medium-10 large-8 text-center">
                    <h1 class="feature-intro-title">Create your awesome website</h1>
                    <p class="lead">We have crafted FWR Blocks with an aim to provide designers, developers and agencies a
                        perfect tool for creating their websites quickly and easily.</p>

                </div>
            </div>

            <div class="grid-x grid-padding-x feature-list">
                <div class="cell medium-4 large-4 text-center">
                    <div class="card feature-card text-center">
                        <img src="//assets.free-website-resources.com/img/feature-1.jpg" alt="">
                        <div class="card-body">
                            <h5 class="feature-title">Crafted with perfection</h5>
                            <p>FWR blocks are carefully created with perfection at its core.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4 large-4 text-center">
                    <div class="card feature-card text-center">
                        <img src="//assets.free-website-resources.com/img/feature-2.jpg" alt="">
                        <div class="card-body">
                            <h5 class="feature-title">Beauty in Design</h5>
                            <p>FWR blocks are well-designed. Your website will always look fresh and awesome.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-4 large-4 text-center">
                    <div class="card feature-card text-center">
                        <img src="//assets.free-website-resources.com/img/feature-3.jpg" alt="">
                        <div class="card-body">
                            <h5 class="feature-title">Plug and Play</h5>
                            <p>FWR blocks are carefully created with perfection at its core.</p>
                        </div>
                    </div>
                </div>
                <div class="cell medium-12 large-12 align-center feature-action">
                    <a href="#" class="primary button">Get started</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /.feature-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;
$primary: #5863f8;
$light-gray: rgba(88, 99, 248, 0.1);
$button-radius: 4px;
$white: #fff;
$feature-card-radius: 1rem;
$box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

.feature-2 {
  font-family: $header-font-family;
  @include padding-direction('vertical', 1.5);
}

.bg-light {
  background: $light-gray;
}

.feature-intro-title {
  font-family: $header-font-family;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.feature-list {
  margin-top: 3rem;
}

.lead {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.feature-card {
  max-width: 400px;
  box-shadow: $box-shadow-sm;
  border-radius: $feature-card-radius;
  overflow: hidden;
  margin: 0 auto 1.5rem;
  transition: box-shadow .3s;

  &:hover {
    box-shadow: $box-shadow;
  }
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: 15px;
  color: $primary;
}

.card-body {
  padding: 1.5rem;
}

.button {
  background-color: $primary;
  border-radius: $button-radius;
  font-size: 1.25rem;
  padding: .5rem 1.5rem .5rem;
  line-height: 1.5;

  &.primary {
    @include button-style($primary, 'auto', $white);
  }

  &.hollow {
    @include button-hollow-style($white);

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

.feature-action {
  .button {
    margin-bottom: 0;
  }
}


@media #{breakpoint(medium)} {

  .feature-2 {
    @include padding-direction('vertical', 4.5);
  }

  .feature-intro-title {
    font-size: 40px;
    margin-bottom: 1.5rem;
  }

  .feature-card {
    flex: 1 1 auto;

    .card-body {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
  }

  .feature-list {
    margin-top: 4rem;

    .cell {
      display: flex;
    }
  }

  .feature-action {
    margin-top: 2rem;

    .button {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

}


@media #{breakpoint(large)} {

  .feature-2 {
    @include padding-direction('vertical', 6);
  }

  .feature-card {
    .card-body {
      padding-left: 3rem;
      padding-right: 3rem;
    }
  }

  .feature-action {
    margin-top: 3rem;
  }

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

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

.feature-intro-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: 28px;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.feature-list {
  margin-top: 3rem;
}

.lead {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.feature-card {
  max-width: 400px;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 1rem;
  overflow: hidden;
  margin: 0 auto 1.5rem;
  -webkit-transition: -webkit-box-shadow .3s;
  transition: -webkit-box-shadow .3s;
  transition: box-shadow .3s;
  transition: box-shadow .3s, -webkit-box-shadow .3s;
}

.feature-card:hover {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.feature-title {
  font-size: 1.25rem;
  margin-bottom: 15px;
  color: #5863f8;
}

.card-body {
  padding: 1.5rem;
}

.button {
  background-color: #5863f8;
  border-radius: 4px;
  font-size: 1.25rem;
  padding: .5rem 1.5rem .5rem;
  line-height: 1.5;
}

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

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

.button.hollow {
  border: 1px solid #fff;
  color: #fff;
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #807f7f;
  color: #807f7f;
}

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

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

.feature-action .button {
  margin-bottom: 0;
}

@media (min-width: 40em) {
  .feature-2 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .feature-intro-title {
    font-size: 40px;
    margin-bottom: 1.5rem;
  }
  .feature-card {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
  .feature-card .card-body {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .feature-list {
    margin-top: 4rem;
  }
  .feature-list .cell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .feature-action {
    margin-top: 2rem;
  }
  .feature-action .button {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 64em) {
  .feature-2 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
  .feature-card .card-body {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .feature-action {
    margin-top: 3rem;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9mZWF0dXJlL2ZlYXR1cmUtMg==