Basic Elements

Block quotes and callouts are used to call attention to some important information. JamsEDU supports many different styles for callouts by default. This page will demonstrate how to customize callouts for your needs.

Go Back

There are two ways to add the Go Back link on a page. You can manually add the link to a page by placing the following HTML code above the h1 tag for the page:

<div id="go-back">
    <a href="../"><i class="fas fa-chevron-left icon"></i> Go Back</a>
</div>

An easier way to accomplish this automatically is by adding the class go-back to the main content section. Here is what the main content section looks like with this class added to it:

<section id="main-content" class="go-back">

Headings

Headings are used for accessibility and to visually notify sighted users of a section of content. The h1 or heading level 1 tag has the most importance and should be used at the top of every page. In contrast the h6 or heading level 6 tag has the lowest importance. You may use any amount of header tags on a single page but it is best practice to limit duplication as much as possible. For JamsEDU site headings are styled relatively the same. Below is the HTML code for all possible headings. This page is using quite a few of them already.

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Horizontal Rule

Horizontal rules allow you to draw a line across the page to separate sections of content. You can use this when you want to create space or a break between content and a header does not make sense to use. Here is a demo of the hr tag in action, its HTML code follows:

<hr>

Mark

The mark tag is an HTML5 tag that allows you to highlight a word or words to call attention to them. JamsEDU slightly modifies the default style of this tag.

<mark>highlight</mark>

Kbd

The kdb tag is used to define keyboard input: ↑ ↑ ↓ ↓ ← → ← → B A

<kbd>Konami Code</kbd>

Tables

Tables are supported by JamsEDU and have been designed with mobile-first design principles. The following table is from W3School's HTML Table tutorial and demonstrates how a table looks in JamsEDU. Following the demo is the code to make up to the first row of this table.

<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
    </tbody>
</table>

Code

The code tag code can be used for short snippets of inline code. It looks similar to the kbd tag but uses a bold font and lighter drop shadow:

<code>inline code here</code>

If you have larger blocks of code you wish to share on a page you should use a code block instead. The following code demonstrates an example you could use on your site. Please keep the following important points in mind when using a code block:

• By default JamsEDU only supports the languages in the common package of Highlight JS.
• You need to change the lang (language) attribute to match the language of your code; again it must be in the supported list. The demo below uses lang-html because it is an HTML example.
• Your first line of code should start on the same line as the opening pre and code tag, otherwise your code example will have an empty space at the top.
• If you place the closing pre tag on its own line you may end up with extra bottom margin on some browsers.
• You must replace any greater than (<) or less than symbols (>) with their HTML entities: < is < and > is >.

<pre class="lang-html"><code>Your code inside here...
This demo uses HTML...
Over 3 lines.
</code></pre>