College of Business Style Guide

Half and Half 

<section class="half-and-half false grey_lightest clearfix" role="region" aria-label="Faculty Directory section">
    <div class="half-and-half-image">
        <img src="" alt="" />
    </div>
    <h2 class="half-and-half-title">Faculty Directory</h2>
    <div class="half-and-half-copy">
        <p>Find a faculty member.</p>
    </div>
    <p class="half-and-half-btn">

        <a href="#">Directory</a>
    </p>
</section>
 
<section class="half-and-half {{ swap }} {{ background_color }} clearfix" role="region" aria-label="{{ heading|striptags('<drupal-render-placeholder>')|trim }} section">
    <div class="half-and-half-image">
        {% block cms_override_image %}
            <img src="{{ img_src }}" alt="{{ img_alt }}" />
        {% endblock cms_override_image %}
    </div>
    <h2 class="half-and-half-title">{{ heading }}</h2>
    <div class="half-and-half-copy"><p>{{ text }}</p></div>
    <p class="half-and-half-btn">
        {# @todo Consider making a component for links and integrating it
        with Drupal link fields. #}
        {% block cms_override_link %}
            <a href="{{ url }}">{{ link_text }}</a>
        {% endblock cms_override_link %}
    </p>
</section>
 
{
  "picture": {
    "img_src": "/images/facutly_graduation.png",
    "img_alt": "faculty at graduation"
  },
  "heading": "Faculty Directory",
  "text": "Find a faculty member.",
  "url": "#",
  "link_text": "Directory",
  "swap": false,
  "background_color": "grey_lightest"
}
  • Content: 
    .half-and-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $space-double $space;

  @media only screen and (min-width: $break-tablet) {
    display: block;
    position: relative;
    padding: 0;
  }

  @media only screen and (min-width: $break-desktop) {
    display: block;
    position: relative;
    padding: 0;
  }

  &.grey_lightest {
    background-color: $grey_lightest;
  }

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

  &-title {
    order: -1;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 $space 0;

    @media (min-width: 768px) {
      order: 0;
      margin: 7% 0 $space 0;
    }
  }

  &-image {
    float: left;
    margin: $space 0;

    @media only screen and (min-width: $break-tablet) {
      margin: 0 $space-triple 0 0;
      max-width: 50%;
    }

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

    img {
      max-width: 100%;
      height: auto;
    }
  }

  &-btn {
    a {
      color: $grey_darkest;
      font-weight: bold;

      &::before {
        content: '+ ';
      }
    }
  }

  &.swap {
    padding: $space 0 0 0;

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

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

    .half-and-half-image {
      float: right;

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

      @media only screen and (min-width: $break-desktop) {
        margin: 0 0 0 $space-triple;
      }
    }
  }
}
  • URL: /components/raw/half_and_half/half_and_half.scss
  • Filesystem Path: components/03-sections/12-half_and_half/half_and_half.scss
  • Size: 1.6 KB

No notes defined.