Use a panel when you want to highlight content that has a clear header and body content. Optionally, you can add a link or call to action.
Call attention to related text
Panel example
Panel Heading (h2)
This is the panel text
Show/hide markup
<div class="panel">
<h2 class="title">Panel Heading (h2)</h2>
<p>This is the panel text</p>
</div>Panel with optional button
Show/hide markup
<div class="panel">
<h2 class="title">Panel Heading (h2)</h2>
<p>This is the panel text</p>
<a href="#" class="button">Call to action</a>
</div>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
Interactive panels enable you to have both a headline and either a subhead or a sentence or two of content. However, only a header is required. The entire panel is clickable and can link to internal or external pages.
Interactive panel example
Show/hide markup
<div class="panel--interactive">
<a href="#">
<h2 class="title">Panel Heading (h2)</h2>
<p>This is the panel-button text</p>
</a>
</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 IU 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 our Creative & Web Studio.