Skip Navigation

Lazy Blocks


Content link box Manual box – Image, title, summary text, link.

Card – Query Loop

Content link box (dynamic) Display a series of content boxes (using featured image, excerpt etc) that match certain criteria ie L2 landing pages and list pages that are related to a particular topic or department. Or guides/information pages etc.

Button – Block Style

Content link box (no image or sub-text) Title, link

CTA Panel

Content link box (no image) Title, summary, text, link

Promo Card

Content promo panel Image/gallery of images, video, title, summary, link

Promo Card– Query

Content promo panel (dynamic) Display associated information for a given piece of content


Expanding boxes

Cover – Block Style

Hero image with text overlay panel

Interactive form – Not a block

Interactive form / click through Q&A e.g. Scholarships calculator. Interactive click through form that users answer a series of questions to get to the answer that is right for them.

Large intro text

Or Paragraph – Block Style

Library search One-off search feature on /departments/support/ls/ homepage

Booking form

Membership / bookings Memberships for Edge Hill Sport / Tickets for the Arts Centre, may be a better way to integrate into the webpages.

News Cards – Query

News post panel Scrolling element with individual news stories represented as boxes

Number Cards

Numbered steps panel Numbered steps in a sequence represented visually

Opening Times – Third Party Plugin

Opening times Could be editable table or derived from Location object


Partnerships / accreditation’s / awards Logos of partner organisations / accreditation’s that a course is associated with.

Privacy – Reusable Block

Privacy statement link

Profile – Query

Profile List/Grid


Question and Answer

Quote – Block Style


Post List – Query

Reference list – List of articles (often written by EHU), currently on website as a standard list.

Post List – Query

Related content box Associated contacts/links etc, to appear adjacent to paragraph content


RSS feed Output an RSS feed in a block, for news feeds or similar

Social media box


Table of contents Block providing links to in-page headings



Timeline – In progress

Timeline block Present a series of distinct dated steps on a visual timeline. We need this for key dates for Clearing and Applicants.

USPs/key stats panel Individual stats or USPs represented with icons, title, sub-text and link

This is a test accordion

Pellentesque eu egestas augue. Nullam cursus vehicula nisl. Mauris odio nunc, consequat posuere orci eu, accumsan commodo nulla. Nulla aliquet, quam a commodo malesuada, ex neque maximus velit, nec feugiat neque augue a mauris.

div.lzb-block { border: solid gray 1px; padding: 12px; margin-bottom: 24px; } article div.wp-block-group{ border: solid gray 1px; padding: 12px; margin-bottom: 24px; margin-left: 0 !important; } article div.wp-block-group::not-first { margin-left: 0 !important; } /* Accordion Styles */ * { box-sizing: border-box; } div { text-align: left; margin: 0; padding: 0; border: none; white-space: normal; line-height: normal; } .hidden { display:none;} .accordion-container h2 { margin:1em 0 0 0; } h2 button { all: inherit; border:1px solid black; padding:5px 35px 5px 5px; margin: 0; background: #ddd; cursor:pointer; width:100%; } h2 button:hover, h2 button:focus { background-color:#f9eed8; } h2 button[aria-expanded=”true”] { background: #ccc; } .accordion-panel { margin:0; padding: 0.5em; border: 2px solid #fff; } .accordion-panel:focus { outline:none; -webkit-animation-name: animation; -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-play-state: running; animation-name: animation; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-play-state: running; border: 2px solid #fff; } @-webkit-keyframes animation { 0% {border-color:#f9eed8;} 100.0% {border-color:#fff;} } @keyframes animation { 0% {border-color:#f9eed8;} 100.0% {border-color:#fff;} } .accordion-panel p{ margin:0 0 1em 0; padding:0; } ///// Accordion General Functions /////// jQuery(document).ready(function($) { // Code here will be executed on document ready. Use $ as normal. $(‘html’).addClass( ‘js’ ).removeClass( ‘no-js’ ); // Code for accordions $hdr = ‘h2’; // set heading level to look out for $acc_id = 1; // global id counter /* The setup function that runs when the page has loaded */ // Firstly, look for all headers of the right level within an accordion container $(‘.accordion-container’).find($hdr).each(function(){ // Store current ID value $this_id = $acc_id; // Get the current contents of the header $this_text = $(this).text(); // empty the header $(this).empty(); // Construct the button string with the attributes we need $this_button = ‘‘; // Add the button string into the heading $(this).append($this_button); // Get the set of elements between this header and the next header, or the end of the accordion container var $set = $(this).nextUntil($hdr); // Set up the panel string $this_panel = ‘‘; // Wrap everything in a
with the necessary elements included. // This will be the accordion panel that is hidden by default and shown on demand. $set.wrapAll($this_panel); // Now increment the $acc_id value ready for the next one $acc_id++; }); // Now set up the event listeners // Look for all buttons that are inside a correct level heading inside the accordion container $(‘.accordion-container’).find($hdr).find(‘button’).on(‘click’, function(e) { var $thisId = $( this ).attr(‘data-id’); if ($(this).attr( ‘aria-expanded’ ) == ‘true’) { hideAccordion($( this )); $( this ).focus(); } else { showAccordion($( this )); } }); function showAccordion(obj) { // Being passed a button var $thisId = $( obj ).attr(‘data-id’); var $panel = $(‘#accordion-panel-‘+$thisId); console.log(“In showAccordion – “+$thisId); $($panel).removeClass(‘hidden’); $(obj).attr(‘aria-expanded’,’true’); $(obj).focus(); } function hideAccordion(obj) { // Being passed a button var $thisId = $( obj ).attr(‘data-id’); var $panel = $(‘#accordion-panel-‘+$thisId); console.log(“In hideAccordion – “+$thisId); $($panel).addClass(‘hidden’); $(obj).attr(‘aria-expanded’,’false’); $(obj).focus(); } });