Let us know what you think about the new Building Blocks

Simple Subscription Form

By Ally Reid

How do I use This?

A simple subscription form

<div class="simple-subscription-form">
    <p>Receive updates and latest news direct from our team. Simply enter your email below :</p>
    <div class="input-group">
      <span class="input-group-label">
        <i class="fa fa-envelope"></i>
      <input class="input-group-field" type="email" placeholder="Email" required>
      <button class="button">Sign up now</button>

$subscription-form-bg: darken($primary-color, 20%);
$subscription-form-color: $white;
$subscription-form-padding: rem-calc(32);

.simple-subscription-form {
  background: $subscription-form-bg;
  color: $subscription-form-color;
  padding: $subscription-form-padding;
  border-radius: $global-radius;

  .button {
    margin-bottom: 0;
    border-radius: 0 $global-radius $global-radius 0;

.simple-subscription-form {
  background: #0c3e5f;
  color: #fefefe;
  padding: 2rem;
  border-radius: 0;

.simple-subscription-form .button {
  margin-bottom: 0;
  border-radius: 0 0 0 0;