Drupal Template: 
UQ Base Template

1.0 UQ Themed Panels uq.panels.css

Provides an array of panel variations to highlight and feature content with preset UQ themed colours.

  • div.panel defines the panel container with no padding and 4px, 15% drop-shadow.
    • h3 coloured heading. Defaults to white text on black background.
    • .panel-description provides preset tints and border presenting an introduction. Defaults to a grey tint.
    • .panel-element container with padding for separate blocks of content.
    • .panel-html to support consistent presentation of the html code used to implement a feature.

Options

  • .no-shadow to remove dropshadows surrounding the panel.
  • For a full width panel or to present content 'edge to edge' e.g. 100% width banner image use a custom div with the foundation twelve class e.g. <div class="twelve">.

1.1 Panel title

Colours to reflect the vibe of the thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus. Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum, ullamcorper in ante. Suspendisse placerat lacinia mauris, sit amet tristique mauris egestas sed. Phasellus blandit fermentum pharetra. Etiam at nisl non sem lacinia vehicula. Nulla feugiat ante ac sapien ultrices iaculis. Aliquam at velit dui.

A diagram
This is where the escaped code lives.

1.2 Coloured panel title

The vibe of the thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus. Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum, ullamcorper in ante. Suspendisse placerat lacinia mauris, sit amet tristique mauris egestas sed. Phasellus blandit fermentum pharetra. Etiam at nisl non sem lacinia vehicula. Nulla feugiat ante ac sapien ultrices iaculis. Aliquam at velit dui.

1.2.1 Equal height panel

This panel uses equal-height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at.

1.2.2 Coloured panel title

This panel uses equal-height

Cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus.

1.2.3 Equal height panel

This panel uses equal-height

Pellentesque id fringilla eros. Etiam interdum aliquam nunc, eu blandit dolor semper in. Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam.

2.0 Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo ipsum, convallis a interdum at, cursus vitae leo. Ut ac orci non purus laoreet venenatis ac sed lorem. Curabitur elit elit, convallis in rutrum non, luctus at lacus.

2.1 Pies within panels

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

Pie

 

2.2 Edge to edge

Example Image

By removing the panel-element class we can use edge to edge.

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

2.2.1 Deep nested panel

Example nested panel.

Fusce leo risus, vehicula ac mollis cursus, tempus at dolor. Sed fermentum aliquam libero, vel mollis lacus laoreet et. Donec ipsum lorem, molestie nec viverra fermentum.

<div class="panel">
	<h3>1.0 Example Panel</h3>
		<div class="panel-description">
			<p>Description and reference markup via <code>code example</code></p>
		</div>
	<div class="panel-element panel-modifier">
		<style scoped>
			/* insert example specific styles */
			.example { }
		</style>
		<div class="example">
			<!--Insert example html code -->
		</div>
	</div>
	<div class="panel-html">
		<pre> <!--Insert escaped html code here --> </pre>
	</div>
</div>