College of Business Style Guide

Callout Section: Logo 

<section class="callout-section white" role="region" aria-labelledby="callout-section--uniqified">
    <h2 id="callout-section--uniqified" class="u-a11y-text">AACSB Accredited</h2>
    <p class="logo">
        <picture>
            <img src="/images/aacsb-logo.png" alt="AACSB Accredited" />
        </picture>
    </p>
    <p>Our business and accounting programs are among the elite twenty-fixe percent of U.S. business schools accredited by the Association to Advance Collegiate Schools of Business (AACSB).</p>
    <ul class="cta-list">
        <li><a href="#" class="button grey-light" role="button">Visit Website</a>
        </li>
    </ul>
</section>
 
<section class="callout-section {{ background_color }}" role="region" aria-labelledby="{{ heading_id }}">
    <h2 id="{{ heading_id }}" class="u-a11y-text">{{ logo_alt }}</h2>
    <p class="logo">
        {% block cms_override_logo %}
            <picture>
                <img src="{{ logo_src }}" alt="{{ logo_alt }}" />
            </picture>
        {% endblock cms_override_logo %}
    </p>
    <p>{{ text }}</p>
    <ul class="cta-list">
        {% block cms_override_buttons %}
            {% for button in buttons %}
                <li>{% include "@buttons--a-tag" with button only %}</li>
            {% endfor %}
        {% endblock cms_override_buttons %}
    </ul>
</section>
 
{
  "heading": "Visit Lehigh Business",
  "heading_id": "callout-section--uniqified",
  "text": "Our business and accounting programs are among the elite twenty-fixe percent of U.S. business schools accredited by the Association to Advance Collegiate Schools of Business (AACSB).",
  "buttons": [
    {
      "text": "Visit Website",
      "url": "#",
      "color": "grey-light"
    }
  ],
  "background_color": "white",
  "aria_label": "callout section",
  "logo_src": "/images/aacsb-logo.png",
  "logo_alt": "AACSB Accredited"
}
  • 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.