Warning: include(1.x/nav-section.php): failed to open stream: No such file or directory in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Warning: include(): Failed opening '1.x/nav-section.php' for inclusion (include_path='.:/ip/iucommsg/wwws:/ip/pagriet/lib:/ip/iucommsg/wwws/_includes:/ip/iucommsg/wwws/_shared-sections:/ip/iucommsg/wwws/_php') in /ip/iucommsg/wwws/_php/nav-section.php on line 2

Event Detail

Event feeds

Event feeds appear as sections, and each item in the feed links to the full event details. We have two options for event feeds: you can use an automatic feed from the IU Newsroom, or you can create a manual event feed. You also may choose from two styles:

Event feed example 1

  • Event Photo

    Event Title

    October 1

    8:00 PM–10:00 PM

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore optio, enim sed eius quisquam suscipit soluta natus fugiat aspernatur corporis eos explicabo! Quibusdam harum repellendus dolorum modi corporis, incidunt officiis dolor facilis neque excepturi nesciunt, perspiciatis quia. Obcaecati consectetur, molestiae?

  • Event Title: Extra Long and Spans Multiple Lines Because it's Amazingly Long

    October 11

    10:00 AM–11:00 AM

    Ad necessitatibus doloremque a nam dignissimos, aliquid, mollitia repellendus dolorem, officia in qui, voluptatem culpa. Consectetur fugiat neque ipsa quam fuga assumenda sapiente praesentium laudantium. Itaque illo excepturi, quo, doloremque laudantium expedita quisquam, sit, unde mollitia ea reprehenderit saepe ad.

Show/hide markup
<ul class="feed">
    <li class="feed-item event">
        <figure class="media image">
            <img src="//placehold.it/152x152" alt="Event Photo" />
        </figure>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title</a></h2>
            <p class="meta meta-date">October 1</p>
            <p class="meta meta-time">8:00 PM&ndash;10:00 PM</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore optio, enim sed eius quisquam suscipit soluta natus fugiat aspernatur corporis eos explicabo! Quibusdam harum repellendus dolorum modi corporis, incidunt officiis dolor facilis neque excepturi nesciunt, perspiciatis quia. Obcaecati consectetur, molestiae?</p>
        </div>
    </li>

    <li class="feed-item event">
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazingly Long</a></h2>
            <p class="meta meta-date">October 11</p>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
            <p>Ad necessitatibus doloremque a nam dignissimos, aliquid, mollitia repellendus dolorem, officia in qui, voluptatem culpa. Consectetur fugiat neque ipsa quam fuga assumenda sapiente praesentium laudantium. Itaque illo excepturi, quo, doloremque laudantium expedita quisquam, sit, unde mollitia ea reprehenderit saepe ad.</p>
        </div>
    </li>
</ul>

Event feed example 2

Show/hide markup
<ul class="feed">
    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">1</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title</a></h2>
            <p class="meta meta-time">8:00 PM&ndash;10:00 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">11</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazingly Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">24</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Only Medium Length</a></h2>
            <p class="meta meta-time">1:00 PM&ndash;2:30 PM</p>
        </div>
    </li>
    

    <li class="feed-item feed-item--small event">
        <div class="date-cube">
            <p>
                <span class="month">Oct</span>
                <span class="day">30</span>
            </p>
        </div>
    
        <div class="content">
            <h2 class="title"><a href="#">Event Title: Extra Long and Spans Multiple Lines Because it&#x27;s Amazing Long</a></h2>
            <p class="meta meta-time">10:00 AM&ndash;11:00 AM</p>
        </div>
    </li>
    
</ul>