Edinburgh GEL

Overview panels

Panels are used to present links or prioritise content in terms of its importance.

In EdWeb panels are currently used on overview pages. Their purpose is to aid navigation and act as signposts to further content. They can be generated automatically or crafted manually - or a mix of the two.

Important content can be visually prioritised or demoted depending on your business or editorial priorities.

Accessibility review

Standard well-formed HTML panels are fully accessible. There are no problems with these elements. Images in panels in the Overview content type and the homepage content type have alternative text.

Accessibility issues

None.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h3>High priority &amp; Medium priority</h3>
<div class="row">
<div class="col-md-6">
  <div class="panel uoe-overview-high">
    <a href="#">
      <div class="panel-heading">
        <h3>Drivers for change</h3>
      </div>
      <img src="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/polopoly_cms_associated_image_900.jpg?itok=uUC89i03" width="900" height="600" alt="">
    </a>
    <div class="panel-body">
      We conducted a programme review in 2010 and extensive consultation with the University web publishing community in 2011.
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="panel uoe-overview-medium">
    <a href="#">
      <div class="panel-heading">
        <h3>Vision for the new CMS</h3>
      </div>
      <img src="http://www.ed.ac.uk/files/styles/panel_breakpoints_theme_uoe_mobile_1x/public/thumbnails/image/tech_support_associated_image_900.jpg?itok=2Taqmvtk" width="900" height="600" alt="">
    </a>
    <div class="panel-body">
      We’ve encapsulated what we’re trying to achieve in a series of statements, summarised as “BRIDGES”.
    </div>
  </div>
</div>
</div>

<h3>Low priority (no image) &amp; No priority (no image)</h3>
<div class="row">
<div class="col-md-6">
  <div class="panel uoe-overview-medium">
    <div class="panel-heading">
      <a href="#">
        <h3>Why Drupal?</h3>
      </a>
    </div>
    <div class="panel-body">
      We’re developing the new Content Management System (CMS) using Drupal, an open source technology which will bring new opportunities in terms of speed of development, flexibility and opportunities for collaboration.
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="panel uoe-overview">
    <div class="panel-heading">
      <a href="#">
        <h3>Timescales and migration</h3>
      </a>
    </div>
  </div>
</div>
</div>