College of Business Style Guide

Callout Section: Email Signup 

<section class="callout-section white" role="region" aria-labelledby="callout-section--uniqified">
    <h2 id="callout-section--uniqified">Subscribe to ilLUminate</h2>
    <p>What's the newest business thinking? Subscribe to our blog to receive email updates.</p>
    <form class="email_signup">
        <input type="text" name="email" placeholder="Enter email" size="35">
        <ul class="cta-list email">
            <li><button class="button gold" type="button">
                    Subscribe
                </button>
            </li>
        </ul>
    </form>
</section>
 
<section class="callout-section {{ background_color }}" role="region" aria-labelledby="{{ heading_id }}">
    <h2 id="{{ heading_id }}">{{ heading }}</h2>
    <p>{{ text }}</p>
    {% block cms_form_override %}
    <form class="email_signup">
        <input type="text" name="email" placeholder="Enter email" size="35">
        <ul class="cta-list email">
            {% for button in buttons %}
                <li>{% include "@buttons" with button only %}</li>
            {% endfor %}
        </ul>
    </form>
    {% endblock cms_form_override %}
</section>
 
{
  "heading": "Subscribe to ilLUminate",
  "heading_id": "callout-section--uniqified",
  "text": "What's the newest business thinking? Subscribe to our blog to receive email updates.",
  "buttons": [
    {
      "text": "Subscribe",
      "url": "#",
      "color": "gold"
    }
  ],
  "background_color": "white"
}
  • Content: 
    .callout-section {
  padding: $space-double;
  background-color: $off-white;
  text-align: center;
  color: $grey_dark;

  @media only screen and (min-width: $break-desktop) {
    padding: $space-sextuple 0;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: bold;
  }

  p {
    @media only screen and (min-width: $break-desktop) {
      padding: 0 15rem;

      .subnav ~ .main-content & {
        padding: 0 10%;
      }
    }
  }
  .form-actions{
    @include reset-list-nav;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media only screen and (min-width: $break-desktop) {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    .button {
      width: 16rem;
      background-color: $gold;
      color: $grey_darkest;
      &.grey-dark {
        background-color: $grey_dark;
        border: 1px solid $grey_dark;
        color: $white;

        &:hover,
        &:focus {
          color: $grey_dark;
          background-color: $white;
        }
      }
      &.form-submit {
        margin-top: 1rem;
      }
    }
    li {
      margin: $space 0;

      @media only screen and (min-width: $break-desktop) {
        margin: 0;
      }

      &:nth-of-type(2) {
        margin: 0;

        @media only screen and (min-width: $break-desktop) {
          margin: 0 $space-quadruple;
        }
      }
    }
  }

  .cta-list {
    @include reset-list-nav;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media only screen and (min-width: $break-desktop) {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    .button {
      width: 16rem;
      
      &.grey-dark {
        background-color: $grey_dark;
        border: 1px solid $grey_dark;
        color: $white;

        &:hover,
        &:focus {
          color: $grey_dark;
          background-color: $white;
        }
      }
      &.form-submit {
        margin-top: 1rem;
      }
    }
    li {
      margin: $space 0;

      @media only screen and (min-width: $break-desktop) {
        margin: 0;
      }

      &:nth-of-type(2) {
        margin: 0;

        @media only screen and (min-width: $break-desktop) {
          margin: 0 $space-quadruple;
        }
      }
    }
  }

  &.white {
    background-color: $white;
    color: $grey_darkest;
  }

  &.off-white {
    background-color: $off-white;
    color: $grey_dark;
  }

  &.gold {
    background-color: $gold;
    color: $grey_darkest;
  }

  &.grey_dark {
    background-color: $grey_dark;
    color: $white;
  }
  .mailchimp-signup-subscribe-form,
  .email_signup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    input {
      margin: 0 $space 0 0;
      border: 1px solid $grey_light;
      height: 2.5rem;
    }
    label {
      display: none;
      
      &.option {
        display: inline;
      }
    }
  }
}
  • URL: /components/raw/callout_section/callout_section.scss
  • Filesystem Path: components/03-sections/05-callout_section/callout_section.scss
  • Size: 2.9 KB

No notes defined.