College of Business Style Guide

News 

<section class="news-section" role="region" aria-label="news section">
    <h2>News</h2>
    <div class="news-listings">
        <div class="news-item">
            <div class="news-item-image">
                <img src="/images/news_item.png" alt="Go Campaign" />
            </div>
            <h3>Annual Scholarship Celebration Features Compelling Stories of Paying It Forward</h3>
            <p>Donors and scholarship recipients forge bonds through their love of Lehigh. <a href="#">Read more.</a></p>
        </div><!-- end news-item -->
        <div class="news-item">
            <div class="news-item-image">
                <img src="https://business.lehigh.edu/sites/default/files/2019-09/Female%20Leadership%20-%20stock%20image_1.jpg" alt="Go Campaign 2" />
            </div>
            <h3>Women in Business Conference Focuses on Personal Branding, Inclusion</h3>
            <p>Lehigh alumni, experts offer career advice at student-run event at Iacocca Hall. <a href="#">Read more.</a></p>
        </div><!-- end news-item -->
    </div><!-- news-items -->
    <a href="#">View More News</a>
</section>
 
<section class="news-section" role="region" aria-label="news section">
    <h2>{{ section_title }}</h2>
    <div class="news-listings">
        {% block cms_override %}
            {% for news_item in news_items %}
                {% include "@news_item" with {
                    image_src: news_item.image_src,
                    image_alt: news_item.image_alt,
                    headline: news_item.headline,
                    content: news_item.content,
                    url: news_item.url
                } %}
            {% endfor %}
        {% endblock cms_override %}
    </div><!-- news-items -->
    {% block cms_override_link %}
        <a href="{{ url }}">View More News</a>
    {% endblock cms_override_link %}
</section>
 
{
  "section_title": "News",
  "news_items": {
    "1": {
      "image_src": "/images/news_item.png",
      "image_alt": "Go Campaign",
      "headline": "Annual Scholarship Celebration Features Compelling Stories of Paying It Forward",
      "content": "Donors and scholarship recipients forge bonds through their love of Lehigh.",
      "url": "#"
    },
    "2": {
      "image_src": "https://business.lehigh.edu/sites/default/files/2019-09/Female%20Leadership%20-%20stock%20image_1.jpg",
      "image_alt": "Go Campaign 2",
      "headline": "Women in Business Conference Focuses on Personal Branding, Inclusion",
      "content": "Lehigh alumni, experts offer career advice at student-run event at Iacocca Hall.",
      "url": "#"
    }
  },
  "url": "#"
}
  • Content: 
    .news-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $white;
  padding: $space-double $space;

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

  h2 {
    font-size: 1.5rem;
    color: $lehigh-brown;
    font-weight: bold;
  }

  .news-listings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .news-item {
      flex: 1;

      &:nth-of-type(2) {
        margin: $space-double 0 0 0;
      }
    }

    @media only screen and (min-width: $break-desktop) {
      flex-direction: row;
      flex-wrap: nowrap;
      margin: $space-triple 0 0 0;

      .news-item {
        &:nth-of-type(2) {
          margin: 0 $space-triple;
        }

        &:last-of-type {
          margin: 0 0 0 $space-triple;
        }
      }
    }

    /* View more link styling */
    + a {
      color: $black;
      font-weight: bold;
      margin: $space-quadruple 0 0 0;
      padding: 0 0 $space-one-half 0;
      background-image: linear-gradient($teal, $teal);
      background-size: 0 1px, auto;
      background-repeat: no-repeat;
      background-position: center bottom;
      transition: all .2s ease-out;

      &:hover,
      &:focus {
        text-decoration: none;
        background-size: 100% 1px, auto;
      }
    }
  }

  &-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $space-double $space;

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

    .news-listings {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: $space 0 0 0;

      @media only screen and (min-width: $break-desktop) {
        flex-direction: row;
        flex-wrap: nowrap;
      }

      .news-item {
        max-width: inherit;
        flex: 1;
        justify-content: space-between;

        &:nth-of-type(2) {
          margin: $space-triple 0;
        }
        @media only screen and (min-width: $break-desktop) {
          &:nth-of-type(2) {
            margin: 0 $space-double;
          }
        }
      }

      h3 {
        font-size: 1.5rem;
        color: $lehigh-brown;
      }
    }

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

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

      .news-listings {
        h3 {
          color: $white;
        }
      }
    }
  }
}
  • URL: /components/raw/news_section/news_section.scss
  • Filesystem Path: components/03-sections/07-news_section/news_section.scss
  • Size: 2.5 KB

No notes defined.