News & Events Widgets

The news and events widget will utilize the client's Cascade Calendar and News functionality. The widget will have the option to select multiple categories. Cascade CMS will dynamically pull content into the widget from detail pages with matching categories. Only the four most recent events and three most recent news will display. The widget will require scheduled publishing to push content to the production site.

Available in: Gateway, Universal and Department pages.


Rendered HTML


News and Events

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
Column 1 alt text

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED

02/14/2019 in College News

Column 2 alt text

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED

02/14/2019 in College News

Column 3 alt text

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED

02/14/2019 in College News

Category Events

View All Events

HTML Source

Click the copy icon button to copy the HTML example code.


<section aria-label="Columns" class="news columns">
  <div class="wrapper">
    <h2>News and Events</h2>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
    
    <div class="eventWidgetHeading">
      <h2>NEWS</h2><a class="callout" href="#">View ALL News</a>
    </div>
    <div class="col4 ">
      <a href="#">
          <img alt="Column 1 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
      </a>
      <div class="content">
          <h3>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED</h3>
          <p class="infoSmall">02/14/2019 in <a href="#">College News</a></p>
      </div>
    </div>
    <div class="col4">
      <a href="#">
          <img alt="Column 2 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
      </a>
      <div class="content">
          <h3>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED</h3>
          <p class="infoSmall">02/14/2019 in <a href="#">College News</a></p>
      </div>
    </div>

    <div class="col4 ">
      <a href="#">
          <img alt="Column 3 alt text" src="http://placehold.it/877x475&text=MIN-WIDTH: 877px" />
      </a>
      <div class="content">
          <h3>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED</h3>
          <p class="infoSmall">02/14/2019 in <a href="#">College News</a></p>
      </div>
    </div>
  </div>
</section>
                    
<section aria-label="Events" class="container events">
  <div class="eventWidgetHeading">
    <h2>Category Events</h2><a class="callout" href="#">View All Events</a>
  </div>
  <div class="yellowWrap">
    <div class="col3">
      <a href="#" class="eventWrap">
        <span class="eventWidgetDate">Nov 03, 2018</span>
        <span class="eventWidgetTitle">Aggies FanFest presented by City of Greensboro in partnership with WNAA 90.1 FM. Free and open to the public.</span>
      </a>
      <div class="eventWidgetCategory">Category</div>
    </div>
    <div class="col3">
      <a href="#" class="eventWrap">
        <span class="eventWidgetDate">Nov 03, 2018</span>
        <span class="eventWidgetTitle">33rd Annual Dr. Ronald E. McNair Celebration Luncheon.</span>
      </a>
      <div class="eventWidgetCategory">Category, Category 2</div>
    </div>
    <div class="col3">
      <a href="#" class="eventWrap">
        <span class="eventWidgetDate">Nov 03, 2018</span>
        <span class="eventWidgetTitle">Cheatham-White Scholarship Nominations Open.</span>
      </a>
      <div class="eventWidgetCategory">Category, Category 2, Category 3</div>
    </div>
    <div class="col3">
      <a href="#" class="eventWrap">
        <span class="eventWidgetDate">Nov 03, 2018</span>
        <span class="eventWidgetTitle">School of Nursing 6th Annual Diabetes Awareness Walk, Nov. 8 at 11:30 a.m. - 1 p.m. Noble Hall Lawn.</span>
      </a>
      <div class="eventWidgetCategory">Category, Category 2</div>
    </div>
  </div>
</section>