Skip to main content

JCU Web Framework

The living style guide for University web applications.

Exposition

Exposition sets the tone and describes the content or intent of the given page or site through background imagery. It is designed to sit behind all other content on a page and typically used on a CMS-style pages.

Contents

Examples

Worked example

See the Content Page example for a fully-worked, living example.

Basic demonstration

This is a simple example of how this component can express the topic area and theme of the page. By default, Exposition is positioned behind all other elements on a page using a negative z-index.

Leaf curl image

This text sits atop the Exposition

This is content.

<div class="jcu-exposition hidden-print">
  <img src="/docs/1.0/dist/images/backgrounds/GreenLeafSwirl.jpg" alt="Leaf curl image" role="presentation">
</div>
<div class="jcu-content">
  <h1>This text sits atop the Exposition</h1>
  <p>This is content.</p>
</div>