HTML Recipe Page

This page holds a selection of code snippets and explanations for reusable functionality and templates to reuse on public facing webpages.

Formatting

Code will be formatted in the same way for all examples. All code will be presented in a code-block like the one below:

<p>This is a paragraph</p>
<h2>This is a size 2 heading</h2>
<div class="container">
     <div class="box">
          <p>This is a paragraph, which is inside a box, which is inside a container</p>
     </div>
</div>

Writing Code

It is highly recommended to use a dedicated HTML Editor when working with HTML code. Editors like Adobe Dreamweaver will automatically highlight HTML keywords, as well as identify errors in your coding that might take a while to notice if you edit directly in the Gwella page editor.

When copying the code into Gwella, you should make sure that the page editor is set to "HTML". If you enter your code into the "Markdown" editor, the system may edit your HTML code in unexpected ways which could cause some of the code snippets included below to stop working.

Formatting
1. Accordion
2. Navigation Cards

Accordion

Contents

An accordion is a set of heading boxes that, when clicked, expand to show additional content contained within a box. Accordion boxes are linked, so that when one is opened, any previous content box is closed. This motion is also animated to show expansion and contraction of the content box.

All of the examples on this page use accordions to show the separate code blocks required to recreate the feature.

Code

HTML

The HTML code for the accordion is below. Highlighted areas below relate to:

Yellow - this highlights the label that will appear on the heading box.
Blue - this highlights the content that will appear inside the content box.

<div class="accordion">
  <div class="accordion-content-box">
    <div class="content-label first" onclick="accordionClick(this)">
      Accordion 1
    </div>
    <div class="content-text">
      Content for block one goes here.
    </div>
  </div>
 <div class="accordion-content-box">
    <div class="content-label" onclick="accordionClick(this)">
      Accordion 2
    </div>
    <div class="content-text">
      Content for block two goes here.
    </div>
  </div>
  <div class="accordion-content-box">
    <div class="content-label" onclick="accordionClick(this)">
      Accordion 3
    </div>
    <div class="content-text">
      Content for block three goes here.
    </div>
  </div>
</div>

Note the first section of code has the classes content-label and first, the following sections only have the class content-label. This must be done in the same way to ensure that only the topmost header has the rounded corners.

CSS

The CSS code for the accordion is below. Highlighted areas below relate to:

Yellow - This highlights the background color for the headings.
Blue - This highlights the border color.
Red - This highlights the background color of the content blocks.

:root {
  	--accordion-border: #3C4A61;
  	--accordion-background: #325083;
  	--accordion-content: #fff;
  }

  .accordion {
    margin: 10px;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    border-bottom: solid 2px var(--accordion-border);
  }

  .accordion .accordion-content-box {
    position: relative;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
  }

  .accordion .accordion-content-box .content-label {
    font-size: 18px;
    font-weight: bold;
    border: solid 4px var(--accordion-border);
    border-bottom: solid 2px var(--accordion-border);
    border-top: solid 2px var(--accordion-border);
    padding: 5px 5px 5px 15px;
    cursor: pointer;
    user-select: none;
    background-color: var(--accordion-background);
    color:white;
  }

  .accordion .accordion-content-box .first {
    border-radius: 20px 20px 0px 0px;
  }

  .accordion .accordion-content-box .content-text {
    position: relative;
    border-left: solid 2px var(--accordion-border);
    border-right: solid 2px var(--accordion-border);
    background-color: var(--accordion-content);
    max-height: 0px;
    padding: 15px 10px 15px 10px;
    overflow: hidden;
    display: none;
    transition: 0.4s ease-out;
    overflow-y: auto;
  }

  .accordion .accordion-content-box .content-label::before {
    position: absolute;
    content: "+";
    color: #777;
    float: right;
    font-size: 1.5em;
    transform: translateY(-10%);
    right: 10px;
  }

  .accordion .accordion-content-box .active::before {
    content: "-";
    transform: TranslateY(-15%) TranslateX(-35%);
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .content-text::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .content-text {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

JavaScript

The JavaScript code for the accordion is below. There are no parts that should be edited.

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function accordionClick(event) {
  event.classList.toggle("active");
  var panel = event.nextElementSibling;
  let elements = event.parentElement.parentElement.children;
  if (elements != null) {
    console.log("Elements found");
  }
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].firstElementChild != event) {
      console.log("not event");
      elements[i].firstElementChild.classList.remove("active");
      elements[i].children[1].style.maxHeight = "0px";
      elements[i].children[1].style.padding = "0px 10px 0px 10px";
    } else {
      console.log("event");
    }
  }
  sleep(400).then(() => {
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].firstElementChild != event) {
        elements[i].children[1].style.display = "none";
      }
    }
  });
  if (panel.style.display === "block") {
    panel.style.maxHeight = "0px";
    panel.style.padding = "0px 10px 0px 10px";
    sleep(400).then(() => {
      panel.style.display = "none";
    });
  } else {
    panel.style.display = "block";
    panel.style.maxHeight = panel.scrollHeight + "px";
    panel.style.padding = "15px 10px 15px 10px";
  }
}

Navigation Cards

Contents

Navigation cards are a selection of rectangular boxes containing and image and a text link that can be used to provide a visual navigation menu for users to move through a hub area. They typically appear in a row and have either 3 or 4 card per row. An example of how the cards look is below (they do not link to anywhere):

Example link heading

Code

HTML

The HTML code for the accordion is below. Highlighted areas below relate to:

Yellow - this highlights image URL for the card image.
Red - this highlights the URL for the target page.
Blue - this highlights the text for the card.

<div class="row">
  <div class="column">
    <a href="https://nhswalesleadershipportal.heiw.wales/pharmacy-become-member">
      <div class="card">
        <figure>
          <img src="https://nhswalesleadershipportal.heiw.wales/api/storage/d8993565-7bb1-4de5-ade0-953cd4397637/1.%20Tiles%20-%20Resources.png" alt="three fingers in the air">
        </figure>
        <div class="container">
          <p>
            <span class="card-link">Example link heading</span>
          </p>
          </center>
        </div>
      </div>
    </a>
  </div>
  <div class="column">
    <a href="https://nhswalesleadershipportal.heiw.wales/pharmacy-become-member">
      <div class="card">
        <figure>
          <img src="https://nhswalesleadershipportal.heiw.wales/api/storage/7835b357-ad56-4220-9b17-6ac1b9241812/4.%20Self.png" alt="three fingers in the air">
        </figure>
        <div class="container">
          <p>
            <span class="card-link">Example link heading</span>
          </p>
          </center>
        </div>
      </div>
    </a>
  </div>
  <div class="column">
    <a href="https://nhswalesleadershipportal.heiw.wales/pharmacy-become-member">
      <div class="card">
        <figure>
          <img src="https://nhswalesleadershipportal.heiw.wales/api/storage/ebd9dd1b-338b-4d6f-b1f9-6b7af1094f74/2.%20Tiles%20-%20Programme.png" alt="three fingers in the air">
        </figure>
        <div class="container">
          <p>
            <span class="card-link">Example link heading</span>
          </p>
          </center>
        </div>
      </div>
    </a>
  </div>
  <div class="column">
    <a href="https://nhswalesleadershipportal.heiw.wales/pharmacy-become-member">
      <div class="card">
        <figure>
          <img src="https://nhswalesleadershipportal.heiw.wales/api/storage/8c5f6fd6-1bd1-4b2d-9345-98664d93428e/3.%20Tiles%20-%20Members.png" alt="three fingers in the air">
        </figure>
        <div class="container">
          <p>
            <span class="card-link">Example link heading</span>
          </p>
          </center>
        </div>
      </div>
    </a>
  </div>
</div>

CSS

The CSS code for the accordion is below. Highlighted areas below relate to:

Yellow - This highlights the colour of the card tint.

:root {
	--card-tint :#ddd;
}
        
.column {
  float: left;
  width: 210px;
  margin-bottom: 16px;
  padding: 0 8px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	overflow: hidden;
	max-width:210px;
	height:360px;
	transition: 0.4s ease-out;
}

figure {
width:210px;
height:210px;
	overflow: hidden;
	margin:0px;
	padding:0px;
	border-radius:20px 20px 0px 0px;
}

.card-link{
	color:#a3195b;
	text-decoration:none;
	border-bottom: solid 1px rgba(163, 25, 91, 1);
	transition: 0.2s ease-out;
	font-size:1.5em;
	text-align:center;
}

.card:hover {
	background-color: var(--card-tint);
}

.card:hover .card-link {
	border-bottom:solid 1px rgba(163, 25, 91, 0);
}

figure img {
	width:100%;
	transition: 0.4s ease-out;
}

.card:hover figure img{
	transform: scale(1.3);
}

.container {
  padding: 0 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
	height:150px;
}

.container p {
	text-align:center;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
	display:flex;
	flex-direction:row;
	justify-content:center;
}

HTML Recipe Book

HTML Recipe Page

Formatting

Writing Code

Contents

Accordion

Code

Navigation Cards

Code