Basic Usage

<div class="news-events-container">
    <section class="news-box">
        <h3>News</h3>
        <ul>
            <li class="news-item">
                <figure class=" img-block" style="">
                    <div class="img-wrapper img-frame full-size-img" style=" height: 400px;">
                        <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                    </div>
                </figure>
                
                <div class="news-content">
                    <a class="news-link" href="#">Curabitur arcu arcu, tincidunt eget ante ac, tempus iaculis ex. Pellentesque convallis justo vitae bibendum lacinia.</a>
                    <div class="event-date">July 1, 2017</div>
                </div>
            </li>
            <li class="news-item">
                <figure class=" img-block" style="">
                    <div class="img-wrapper img-frame full-size-img" style=" height: 400px;">
                        <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                    </div>
                </figure>
                
                <div class="news-content">
                    <a class="news-link" href="#">Curabitur arcu arcu, tincidunt eget ante ac, tempus iaculis ex. Pellentesque convallis justo vitae bibendum lacinia.</a>
                </div>
            </li>
            <li class="news-item">
                <figure class=" img-block" style="">
                    <div class="img-wrapper img-frame full-size-img" style=" height: 400px;">
                        <img src="/ndsu-web-template/images/sample2.jpg" alt="Sample Image"  />
                    </div>
                </figure>
                
                <div class="news-content">
                    <a class="news-link" href="#">Curabitur arcu arcu, tincidunt eget ante ac, tempus iaculis ex. Pellentesque convallis justo vitae bibendum lacinia.</a>
                    <div class="event-date">July 1, 2017</div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu arcu, tincidunt eget ante ac, tempus iaculis ex. Pellentesque convallis justo vitae bibendum lacinia. Phasellus interdum metus ut aliquet aliquet.
                    </p>
                </div>
            </li>
            <li class="news-item">
                <figure class=" img-block" style="">
                    <div class="img-wrapper img-frame full-size-img" style=" height: 400px;">
                        <img src="/ndsu-web-template/images/sample.png" alt="Sample Image"  />
                    </div>
                </figure>
                
                <div class="news-content">
                    <a class="news-link" href="#">Curabitur arcu arcu, tincidunt eget ante ac, tempus iaculis ex. Pellentesque convallis justo vitae bibendum lacinia.</a>
                </div>
            </li>
        </ul>
        <a href="#" class="read-more-link">Read More News</a>
    </section>
    <section class="events-box">
        <h3>Events</h3>
        <ul>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
            <li class="event-item">
                <a class="event-name" href="#">Non nos preius voloreum repeliq</a>
                <div class="event-date">July 1, 2017</div>
                <div class="event-location">Memorial Union</div>
            </li>
        </ul>
    </section>
</div>