• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Panels

    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>
    
    Previous (UQ School Theme: Style Guide)Next (UQ Base Regions)