Panels

Panels in a grid

Panel Heading (h2)

This is the panel text

Second Heading (h2)

This is text for panel two

Show/hide markup
<div class="grid halves">
    <div class="grid-item">
        <div class="panel">
            <h2 class="title">Panel Heading (h2)</h2>
            <p>This is the panel text</p>
        </div>
        

    </div>

    <div class="grid-item">
        <div class="panel">
            <h2 class="title">Second Heading (h2)</h2>
            <p>This is text for panel two</p>
        </div>
        

    </div>

</div>

Interactive panels in a grid

Show/hide markup
<div class="grid halves">

    <div class="grid-item">
        <div class="panel--interactive">
            <a href="#">
            <h2 class="title">Panel Heading (h2)</h2>
            <p>This is the panel text</p>
            </a>
        </div>
        
    </div>

    <div class="grid-item">
        <div class="panel--interactive">
            <a href="#">
            <h2 class="title">Second Heading (h2)</h2>
            <p>This is text for panel two</p>
            </a>
        </div>
        
    </div>

</div>

Apply IU style to any site

You can use our style and code snippets to improve any website in any content management system. Or you can request a copy of the Web Framework, a self-service tool that lets developers build a site in the WCMS.

If you would like to learn more about how we can help you build your website in the Web Framework, contact Eleanor Berman at IU Communications.