Component Library

News Item 

<div class="paragraph-widget paragraph-widget--news-items">
    <div class="news-items__wrap">
        <div class="text-content">
            <h2>In the News</h2>
        </div>
        <div class="news-items">
            <div class="news-item">
                <div class="news-item__tags">
                    <ul>
                        <li>The Onion</li>
                    </ul>
                </div>
                <div class="news-item__article-title">
                    <a href="http://example.com" class="link-set__link iastate22-link-secondary">News Title<span class="arrow"></span></a>
                </div>
                <p class="news-item__article-excerpt">News title story excerpt</p>
            </div>
            <div class="news-item">
                <div class="news-item">
                    <div class="news-item__tags">
                        <ul>
                            <li>4chan</li>
                        </ul>
                    </div>
                    <div class="news-item__article-title">
                        <a href="http://example.com" class="link-set__link iastate22-link-external" target="_blank">News Story with External Link<span class="arrow"></span></a>
                    </div>
                    <p class="news-item__article-excerpt">News title story excerpt</p>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="paragraph-widget paragraph-widget--news-items">
  <div class="news-items__wrap">
    <div class="text-content">
        <h2>In the News</h2>
    </div>
    <div class="news-items">
        <div class="news-item">
          <div class="news-item__tags">
            <ul>
              <li>The Onion</li>
            </ul>
          </div>
          <div class="news-item__article-title">
            <a href="http://example.com" class="link-set__link iastate22-link-secondary">News Title<span class="arrow"></span></a>
          </div>
            <p class="news-item__article-excerpt">News title story excerpt</p>
        </div>
        <div class="news-item">
          <div class="news-item">
            <div class="news-item__tags">
              <ul>                                                
                <li>4chan</li>
              </ul>
            </div>
            <div class="news-item__article-title">
              <a href="http://example.com" class="link-set__link iastate22-link-external" target="_blank">News Story with External Link<span class="arrow"></span></a>
            </div>
            <p class="news-item__article-excerpt">News title story excerpt</p>
          </div>
        </div>
    </div>
  </div>
</div>
 
{
  "tags": [
    "Lorem ipsum",
    "dolor sit"
  ],
  "article_title": "Lorem ipsum dolor sit",
  "article_excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus."
}
  • Content: 
    .news-items {
  display: flex;
  flex-direction: column;
  gap: rem(15);
  margin-bottom: rem(50);

  @include media-breakpoint-up(lg) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .news-item {
    @include media-breakpoint-up(lg) {
      flex: 0 0 48.5%;
    }
    .news-item__tags {
      ul {
        margin: rem(20) 0 0;
        li {
          color: $iastate-red;
          font-size: rem(16);
          font-weight: 600;
          padding-right: rem(15);
          display: none;
          &:first-child {
            display: inline;
          }
          @include media-breakpoint-up(lg) {
            display: inline;
          }
        }
      }
    }
    .news-item__article-title {
      font-size: rem(22);
    }
  }
}

.paragraph-widget--news-items {
  margin-top: 0;
  margin-bottom: 0;

  + .paragraph-widget--filter-form {
    margin-top: 0;
  }
}

.news-items__wrap {
  main & {
    padding-top: rem(30);
    padding-bottom: rem(40);
    position: relative;

    &:after {
      content: "";
      background: $off-white;
      left: -50vw;
      width: 150vw;
      top: 0;
      bottom: 0;
      z-index: 0;
      position: absolute;
    }
    @include media-breakpoint-up(md) {
    }
    @include media-breakpoint-up(xl) {
      padding-top: rem(70);
      padding-bottom: rem(70);
    }

    > * {
      max-width: 1112px;
      padding: 0;
      position: relative;
      z-index: 1;
    }
  }
}
  • URL: /components/raw/news-item/_news-item.scss
  • Filesystem Path: src/components/news-item/_news-item.scss
  • Size: 1.5 KB

There are no notes for this item.