Splash

Splash content can be used to highlight a message with supporting imagery.

The attribute data-expand can be set true to expand and blur the image as a background to the page.

These should be used conservatively as they can block users from completing a desired task.

Sample splash image

Sample splash content

Code

<div class="row standardContent splash splashwrapper" data-expand="true">
          <div id="content_12345" class="maincontent content fullwidth splash column large-12">
                    <div class="splashimage">
                         <img src="/path/to/img/src" alt="alt text" />  
                    <div class="splashtext">
                         content
                    </div>
          </div>
           &nbsp;
     </div>
</div>

See also