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
Accordion
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
LS Search
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
Partners
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
FAQ
Question and Answer
Quote – Block Style
Quote
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
RSS feed Output an RSS feed in a block, for news feeds or similar
Social Links
Social media box
TOC
Table of contents Block providing links to in-page headings
Tabs
Tabs
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();
}
});