Skip to Main Content
Contact Libraries      Portal Login

Standards and Guidelines: Horizontal Boxes

Status Note

Published: Content approved by Group 2 members.

Last updated: 04/04/2023 - Essential - Horizontal Boxes (Limit of items has been changed).

Essential - Horizontal Boxes    Required

  • Horizontal boxes are recommended for 4 or 8 items and will help to save some space on a guide. 
  • Use a standard box for 1-3 or 5-7 items
  • You can add a maximum of 8 items to a horizontal box. Exception: listings of HE texts as requested by teachers.
  • Remove information from the display such as the ISBN, editions, subtitle and author information. These details (bar the ISBN) can be moved to the description.
  • If a box is on one item type only e.g. eBooks, you can remove the item type from the title. The box title needs to state the item type of the items displayed.

Reusable Box Code for Current Subject Guide Template    Required

  • Copy the box code below and add it to the Source field of a Rich Text/HTML content item of the box that you want to use for a horizontal book display.
  • Always add the Rich text/HTML content item with the code to the top of your box.
  • Change the box number in the code to the box number of the box in which you want to display the books horizontally. You need to change the number 4 times.
  • Be careful not to add extra space or override other parts of the code. If the code gets change it will not work and your covers will not display horizontally. 

<p>
<style type="text/css">#s-lg-box-collapse-20552543 ul.s-lg-link-list-5 {padding-left: 0;}#s-lg-box-collapse-20552543 .s-lg-book {margin: 0.4em 1em 0 0;   /* top and right margin to set spacing */max-width: 8em; /* how wide whole book element should be */ } #s-lg-box-collapse-20552543 .s-lg-book img{width: 8em;  /* cover image as wide as book element */ height: auto;  /* or you can set this to a specific height for more uniformity - might be some img distortion */}#s-lg-box-collapse-20552543 .s-lg-link-list-5 li {display: inline-block;padding-top: 0;vertical-align: top;}
</style>
</p>

Horizontal Box Example - eBooks and Books

Horizontal Box Example - eBooks Only