List Styles With Tutorial

List Styles

 

Description Lists

In the RCE, there are easy ways to style ordered and unordered lists, but did you know that there is code to create a description list as well? Using it provides a visually appealing, accessible way to display a list of definitions and their terms that can be staggered or inline.

Staggered Description List

This is the default style created when using the description list (<dl>) list code. For example,

Acid
A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride
The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride
Compound produced by dehydration of a carbonic acid
Description List Code 
<dl>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
</dl>

Inline Description List

Caution: This class is no longer supported by Instructure and will display differently in the mobile app.

This look is created by using a Canvas class, so be aware that in the mobile app it will look like the staggered list above but without the bolded terms.

Acid
A substance that produces H+(aq) ions in aqueous solution
Acid Anhydride
The oxide of a nonmetal that reacts with water to form an acid
Acid Anhydride
Compound produced by dehydration of a carbonic acid
Inline Description List Code 
<dl class="dl-horizontal">
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
   <dt>Term</dt>
   <dd>Definition</dd>
</dl>

Guidelines and Modifications

  • To add additional terms and definitions, copy only the term and definition lines and paste them into your HTML editor. Remember to put them before the closing </dl> tag!
  • You can use this snippet in conjunction with other snippets, such as box style.
  • You may also like the Glossary Table style in the Tables Module.

 

Grouped Lists

If you want to display a long list in sections or a series of lists next to each other, you can use a Canvas grid-row class.

Caution: This class is no longer supported by Instructure and will display differently in the mobile app.

Grouped List Example

  • Math
  • Science
  • Chemistry
  • Calculus
  • Physics
  • Art 
  • Creative Writing
  • Photography
  • Drawing
  • Painting
  • Speech
  • Film
  • Computer Science
  • Biology
  • History

 

 

Grouped List Code 
  <div class="grid-row">
    <div class="col-xs">
        <div class="styleguide-section__grid-demo-element">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
    <div class="col-xs">
        <div class="styleguide-section__grid-demo-element">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
    <div class="col-xs">
        <div class="styleguide-section__grid-demo-element">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>

 

Pill Box List

Pill Box List Example

Use with caution Caution: This class is no longer supported by Instructure and will display differently in the mobile app.

This unique style is good as a way to present short lists of closely related information.

  • Estimated Reading Time
  • 30 mins
  • 10 seconds

 

Pill Box List Code 
<ul class="pill">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

In the mobile app, the content will display as a bulleted list:

  • Estimated Reading Time
  • 30 mins
  • 10 seconds

 

Response Lists

The Response List is a nested or outline list with text styling and side borders. Possible uses for this style include:

  • FAQs
  • Survey Results

Response List Example:

  • What word associations and personal experiences come to mind when you hear the word "inclusivity"?

    • “Inclusivity means having a sense of belongingness, but … the basis of that is feeling safe and comfortable.”

    • “Acceptance of everybody’s different lifestyles and identities … Nobody should feel outed or harassed due to their identity. No fear of violence or material that would make them feel less than.”

    • “Everyone’s happy. There’s no discrimination. There’s no tension between anyone.”

  • Who sets the tone for inclusivity in the classroom?

    • “Professors should be promoting an environment in which each student is respected and embraced by their peers.”

    • “In a perfectly inclusive classroom, I picture students from all walks of life being given equal attention by their professors and their peers.”

    • “Every student has their opinion -- get it out of them … It’s your job.”

  • What do you expect of professors when difficult topics arise during class?

    • “Even though you want to have free speech … you also have to be considerate of [students’] safety and well-being.”

    • “Although professors don’t have to actively call people out, they should act in a case where someone is racially attacked or if they see a microaggression. They have to make the call of when to act and when not to, but they should do their job and protect students.”

    • “I think that’s what a college campus is for -- to hear sides that might not agree with you. I think it’s important that everyone feels comfortable, though, and I think that’s what inclusivity means.”

Response List Code 
<ul style="list-style-type: none; margin: 0 0 1.5rem 1.5rem;">
    <li>
        <p style="font-size: 1.15rem; color: #002157;">Content here.</p>
        <ul style="list-style-type: none; border-left: solid #00215750 0.25rem; margin: 0 0 1.5rem 0.5rem; padding-left: 0.5rem;">
            <li>
                <p>Content here.</p>
            </li>
            <li>
                <p>Content here.</p>
            </li>
        </ul>
    </li>
    <li>
        <p style="font-size: 1.15rem; color: #002157;">Content here.</p>
        <ul style="list-style-type: none; border-left: solid #00215750 0.25rem; margin: 0 0 1.5rem 0.5rem; padding-left: 0.5rem;">
            <li>
                <p>Content here.</p>
            </li>
            <li>
                <p>Content here.</p>
            </li>
        </ul>
    </li>
</ul>

 

Guidelines and Modifications

  • To add more list items, copy a list item (<li> to </li>) in bold.
  • You can change the font color and size.
  • You can change the color of the side border.

 

Styled Lists With Borders

Styled Ordered List Example

  1. List Item

    Content

  2. List Item

    Content

Ordered List Code to Copy 
<ol style="font-size: 140%; color: #002157; margin-bottom: 1.5rem;">
    <li>
        <div style="border-bottom: 0.1rem solid #002157; margin: 2rem 0 1rem 0;">List Item</div>
        <div style="font-size: 1rem; color: #2d3b45;">
            <p>Content.</p>
        </div>
    </li>
    <li>
        <div style="border-bottom: 0.1rem solid #002157; margin: 2rem 0 1rem 0;">List Item</div>
        <div style="font-size: 1rem; color: #2d3b45;">
            <p>Content.</p>
        </div>
    </li>
</ol>

Styled Unordered List Example

  • List Item

    Content

  • List Item

    Content

Styled Order List Code 
<ul style="list-style-type: none;">
    <li>
        <div style="font-size: 140%; color: #002157; border-bottom: 0.1rem solid #002157; margin: 2rem 0 1rem 0;">List Item</div>
        <p>Content.</p>
    </li>
    <li>
        <div style="font-size: 140%; color: #002157; border-bottom: 0.1rem solid #002157; margin: 2rem 0 1rem 0;">List Item</div>
        <p>Content.</p>
    </li>
</ul>

Guidelines and Modifications

  • You can change the font size and color of the bottom border.

 

 

List Tutorial

Lists are either unordered (bulleted) or ordered (numbered). For styling lists, there are several options built into the RCE for both types.

However, you may want a list type that is not in the RCE. There are three types that work in Canvas: lower alpha, decimal with leading zeroes, and lower Greek. These must be done by adding code in the HTML editor. 

An unordered list is defined by <ul></ul> tags and an ordered list is defined by <ol></ol> tags. Each list item goes in <li></li> tags regardless of the type of list. To create a specific list style, you simply add the HTML style code to the opening <ul> or <ol> tag. Here we provide the code for list styles that work in Canvas, but are not in the RCE.

Ordered List Lower Alpha

  1. List item
Ordered List Lower Alpha Code 
<ol style="list-style-type: lower-alpha;">
    <li>List item</li>
</ol>

 

Ordered List Decimal With Leading Zeros

  1. List item
Ordered List Decimal With Leading Zeros Code 
<ol style="list-style-type: decimal-leading-zero;">
    <li>List item</li>
</ol>

 

Ordered List Lower Greek

  1. List item
Ordered List Lower Greek Code 
<ol style="list-style-type: lower-greek;">
    <li>List item</li>
</ol>

 

Guidelines and Modifications

  • If you need to add an indent within an ordered or unordered list, the easiest way is to simply use the Tab key or the increase indent function in the RCE. Use indents sparingly in lists and avoid creating lists with too many levels as it can be confusing for those using a screenreader.
  • To start at a specific number, use <ol start="#"> (replace # with the number you want to start with). However, note that this will always need to be a number. Therefore, if you want to restart an alphabetical list with the letter b, you will use <ol start="2"> since b is the second letter in the alphabet.