List Styles

There are three main styles of lists available for use in JamsEDU: ordered lists (ol) with numbers, unordered lists (ul) with arrows/ bullets, and definition lists (dt) with terms and their definitions. We also support smaller versions of the ordered and unordered lists where the numbers or arrows are not as large. You can also nest any combination of lists inside another, but this type of use should be limited.

Alternative Styles:

The default style for primary (non-nested) lists are rather large. You can add a class of smaller to an ul or ol tag to make them smaller. dt lists do not support this class since the styles are smaller by default. You may also add the class of indent to any primary (non-nested) list to indent the entire list more. Using smaller and indent together works great.

Ordered List

Ordered lists add a number to each item in the list. This type of list is useful when you have sequential steps that should be followed in order.

  1. Step Title

    The instructions for this step.

  2. Step Title

    The instructions for this step.

  3. Step Title

    The instructions for this step. 

<ol>
    <li>
        <h2>Step Title</h2>
        <p>
            The instructions for this step.
        </p>
    </li>
    <li>
        <h2>Step Title</h2>
        <p>
            The instructions for this step.
        </p>
    </li>
    <li>
        <h2>Step Title</h2>
        <p>
            The instructions for this step.
        </p>
    </li>
</ol>

Unordered List

You can also use traditional ul (unordered lists). The following is an example of an unordered list followed by the HTML to create this element.

  • Item 1

    Content for this item.

  • Item 2

    Content for this item.

  • Item 3

    Content for this item. 

<ul>
    <li>
        <h2>Item 1</h2>
        <p>
            Content for this item.
        </p>
    </li>
    <li>
        <h2>Item 2</h2>
        <p>
            Content for this item.
        </p>
    </li>
    <li>
        <h2>Item 3</h2>
        <p>
            Content for this item.
        </p>
    </li>
</ul>

Definition List

Definition lists can be added to provide a list of vocabulary or important terms and their definitions or explanations. The definition list can also be used to link out to an resource and provide an explanation of what that resource is. The HTML code below shows one term being defined and one additional resource being linked to:

Term
Term definition.
Linked Term
Resource definition. 
<dl>
    <dt>
        Term
    </dt>
    <dd>
        Term definition.
    </dd>
    <dt>
        <a href="#enter-url-here" target="_blank">Linked Term</a>
    </dt>
    <dd>
        Resource definition.
    </dd>
</dl>

Nesting Lists

The following example is used to demonstrate what nested lists will look like. You can nest any type of list inside any other type. The code for this demo is also below:

  1. Step 1

    This step has an unordered list of instructions:

    • Do this...

    • ...and do this.

  2. Step 2

    This step has an ordered list of instructions:

    1. Do this first.

    2. Do this second. 

<ol>
    <li>
        <h2>Step 1</h2>
        <p>
            This step has an unordered list of instructions:
            <ul>
                <li>
                    <p>
                        Do this...
                    </p>
                </li>
                <li>
                    <p>
                        ...and do this.
                    </p>
                </li>
            </ul>
        </p>
    </li>
    <li>
        <h2>Step 2</h2>
        <p>
            This step has an ordered list of instructions:
            <ol>
                <li>
                    <p>
                        Do this first.
                    </p>
                </li>
                <li>
                    <p>
                        Do this second.
                    </p>
                </li>
            </ol>
        </p>
    </li>
</ol>