A to Z List
A to Z list contains the "a to z list menu" and then "a to z content sections". Each "a to z list menu item" is anchored to its corresponding content section. When your application outputs a content section which does not contain any content then the content section must be removed from the HTML output. Also, the A to Z list menu item which references the content section that is no longer output in the HTML (due to it not having any content), must have its href attribute removed.
The A to Z list component is wrapped in a container element c-atoz-list. The "a to z menu" must be placed inside the opening element of this container element, as seen in the HTML demo below.
A to Z list JavaScript plugin
The A to Z list component must contain the class js-atoz-list which activates the JavaScript plugin. The JavaScript plugin will check for content sections with the class of c-atoz-list__content-item with the "ID" which matches the href for the "a to z menu item". If no section is found then the JavaScript plugin will set the menu item to is-disbled.
Content section types
An A to Z list content sections can contain either of the following content types:
There MUST NOT be a mixture of these content types within one A to Z list component instance or within each content section.
Inside of the closing element of ALL "a to z content sections" must contain the "Back to top global" component. Each back to top global component must anchor link back to the unique ID on the container element, i.e, id="unique-id-name-atoz".
Content heading to be referenced by the A-Z menu
Each A to Z content section must contain a heading which is used to categorise the piece of content. The HTML demo below uses an <h2> element. The difference with "a to z list of links" content type is that this heading must contain the alphabetic letter which matches the "a to z menu item" that anchors to the particular section.
A to Z list of alphabetically sorted links content type
The A to Z list of alphabetically sorted links must contain the <ul> element as seen in the demo below with the CSS class c-atoz-list__link-list, as well as the above mentioned heading element. This content type MUST NOT contain any other HTML elements other than what is demonstrated below e.g. <li> with an anchor link surrounding its text.
A to Z list people content type
The A to Z list of people should be used when you cannot simply link to Staff Directory for a list of your staff or when you are showing a small team within your department/area.
This list should be sorted alphabetically based on the person's first name.
Content order
The A to Z people content image <figure> element is optional, however if an image is included for a person it must be placed at the top of the content section and have the exact HTML seen in the demo below. The <figure> element, should be followed by:
- A heading with the person's name which links to their Directory page, or if they are not from the Uni, their profile page if they have one (the link should be optional).
- This should then be followed by their position as a subheading (optional)
- Then followed by their credentials (optional).
- From there, any standard text content can be added e.g. paragraph, bullet list, links.
Each item within a "people content" section must be divided by the <hr> element. DO NOT include the <hr> element if there is only one piece of content within the section.
The A to Z people content can also include the small accordion component, as seen in the demo below.
-
Contact Adam Dr Adam Smith
Senior Lecturer
B. Architecture (University of Adelaide, Australia), PhD in Architecture (Adel)
Introduction or text about Adam can be inserted here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. His/her research interests include:
- Sed ut perspiciatis
- Ab illo inventore
- Sed quia consequuntur
Read more about Adam's research interests and recent publications
More information or text about Adam can be inserted here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
-
C
-
G
-
I
-
Q
<div class="c-atoz-list js-atoz-list" id="unique-id-name-atoz">
<!-- A to Z menu -->
<ul class="c-atoz-list__menu">
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-a">A</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-b">B</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-c">C</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-d">D</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-e">E</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-f">F</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-g">G</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-h">H</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-i">I</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-j">J</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-k">K</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-l">L</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-m">M</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-n">N</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-o">O</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-p">P</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-q">Q</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-r">R</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-s">S</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-t">T</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-u">U</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-v">V</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-w">W</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-x">X</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-y">Y</a></li>
<li class="c-atoz-list__menu-item"><a href="#unique-id-name-z">Z</a></li>
</ul>
<!-- / A to Z menu -->
<ul class="c-atoz-list__body">
<!-- A to Z content section -->
<li id="unique-id-name-a" class="c-atoz-list__content-item">
<!-- A to Z people content -->
<!-- A to Z people content image must be at the top of the content section and have this exact HTML -->
<figure class="c-image-content c-image--small c-image-content--border c-image-content--right">
<a class="c-image-content__link" href="#0">
<img class="c-image-content__image" alt="Dr Adam Smith" src="/kss-assets/images/placeholder/900x1200.jpg">
</a>
<figcaption class="c-image-content__caption"><a href="mailto:#">Contact Adam</a></figcaption>
</figure>
<!-- The A to Z people content section can contain any combination of paragraph element
below the <figure> element above. -->
<!-- Each A to Z content section must contain a heading which is used to categorise the piece of content. -->
<h2><a href="#0">Dr Adam Smith</a></h2>
<h3>Senior Lecturer</h3>
<p class="u-paragraph--intro">B. Architecture (University of Adelaide, Australia), PhD in Architecture (Adel)</p>
<p>Introduction or text about Adam can be inserted here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. His/her research interests include:</p>
<ul>
<li>Sed ut perspiciatis</li>
<li>Ab illo inventore</li>
<li>Sed quia consequuntur</li>
</ul>
<!-- A to Z people content can include the small accordion component -->
<div class="c-accordions c-accordions--small js-accordion">
<section class="c-accordions__item" id="accordion1">
<h2 class="c-accordions__item-heading"><a class="c-accordions__item-link" href="#accordion1" aria-expanded="true" aria-controls="item1">Read more about Adam's research interests and recent publications</a></h2>
<div class="c-accordions__item-content" id="item1">
<p>More information or text about Adam can be inserted here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</section>
</div>
<!-- / A to Z people content demo -->
<!-- always place an <hr> between A to Z people content items when there are more than one people content item.
DO NOT include the <hr> element if there is only one piece of content within the section -->
<hr>
<!-- more people content can go here ... -->
<!-- always place the global back to top component inside the closing element </li> of each A to Z content section -->
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#unique-id-name-atoz" title="Go to top of list">
<span class="u-hidden-text">Go to top of list</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>
</li>
<!-- / A to Z content section -->
<!-- A to Z content section -->
<!-- Each a to z content section contains the unique ID which is referenced from the a-z list menu item -->
<li id="unique-id-name-c" class="c-atoz-list__content-item">
<!-- A to Z link list content
<!-- As mentioned above in the people content section, the heading element below is used to categorise the content section.
The difference here with a to z list of links content type is that the heading must contain the alphabetic letter
which matches the a to z menu item which anchors to the section. -->
<h2>C</h2>
<!-- Each A to Z link list must contain ONLY the <ul> with the following markup -->
<ul class="c-atoz-list__link-list">
<li><a href="#0">California</a></li>
<li><a href="#0">Camarasaurus</a></li>
<li><a href="#0">Canada</a></li>
<li><a href="#0">Camouflage</a></li>
<li><a href="#0">Calculator</a></li>
</ul>
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#unique-id-name-atoz" title="Go to top of list">
<span class="u-hidden-text">Go to top of list</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>
</li>
<!-- / A to Z content section -->
<!-- A to Z content section -->
<li id="unique-id-name-g" class="c-atoz-list__content-item">
<h2>G</h2>
<ul class="c-atoz-list__link-list">
<li><a href="#0">Gandhi</a></li>
<li><a href="#0">Georgia</a></li>
<li><a href="#0">Ghost</a></li>
<li><a href="#0">Garden</a></li>
<li><a href="#0">Galaxy</a></li>
</ul>
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#unique-id-name-atoz" title="Go to top of list">
<span class="u-hidden-text">Go to top of list</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>
</li>
<!-- / A to Z content section -->
<!-- A to Z content section -->
<li id="unique-id-name-i" class="c-atoz-list__content-item">
<h2>I</h2>
<ul class="c-atoz-list__link-list">
<li><a href="#0">Iceberg</a></li>
<li><a href="#0">Ice Cream</a></li>
<li><a href="#0">Iced Tea</a></li>
<li><a href="#0">Iguana</a></li>
<li><a href="#0">Illusion</a></li>
</ul>
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#unique-id-name-atoz" title="Go to top of list">
<span class="u-hidden-text">Go to top of list</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>
</li>
<!-- / A to Z content section -->
<!-- A to Z content section -->
<li id="unique-id-name-q" class="c-atoz-list__content-item">
<h2>Q</h2>
<ul class="c-atoz-list__link-list">
<li><a href="#0">Quartz</a></li>
<li><a href="#0">Quilt</a></li>
<li><a href="#0">Quicksand</a></li>
<li><a href="#0">Quarter</a></li>
<li><a href="#0">Question</a></li>
</ul>
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#unique-id-name-atoz" title="Go to top of list">
<span class="u-hidden-text">Go to top of list</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>
</li>
<!-- / A to Z content section -->
</ul>
</div>