Bulleted ListsLast updated: 01.07.2020

Icon List (Font Awesome)

A list item that allows you to use Font Awesome icons to choose the bullet image of your choice. For available icons, visit the FA library.

Implementation:
The tl-bl-iconic class is required on the parent UL element. Then visit the FA library to select the icons you'd like to place within the list element, and place those i tags within each li:

<ul class="tl-bl-iconic">
    <li><i class="far fa-check-circle"></i><span>...

Color Picker:
Select the element you'd like to adjust the color of. Once selected, click on any color to preview the potential output.

HTML Output

<ul class="tl-bl-iconic">
  <li><i class="far fa-check-circle"></i><span>Gather all the documents you will need to apply:</span></li>
  <li><i class="far fa-check-circle"></i><span>Provide your basic information, (ex: demographics, on FAFSA form)</span></li>
  <li><i class="far fa-check-circle"></i><span>List the schools that should receive the FAFSA information.</span></li>
  <li><i class="far fa-check-circle"></i><span>Answer the dependency status questions.</span></li>
  <li><i class="far fa-check-circle"></i><span>Complete the parent demographics section.</span></li>
  <li><i class="far fa-check-circle"></i><span>Supply your financial and tax information.</span></li>
  <li><i class="far fa-check-circle"></i><span>Sign the FAFSA form and submit it.</span></li>
</ul>
&lt;ul class=&quot;tl-bl-iconic&quot;&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Gather all the documents you will need to apply:&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Provide your basic information, (ex: demographics, on FAFSA form)&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;List the schools that should receive the FAFSA information.&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Answer the dependency status questions.&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Complete the parent demographics section.&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Supply your financial and tax information.&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;i class=&quot;far fa-check-circle&quot;&gt;&lt;/i&gt;&lt;span&gt;Sign the FAFSA form and submit it.&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt;
  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
  • Gather all the documents you will need to apply:
  • Provide your basic information, (ex: demographics, on FAFSA form)
  • List the schools that should receive the FAFSA information.
  • Answer the dependency status questions.
  • Complete the parent demographics section.
  • Supply your financial and tax information.
  • Sign the FAFSA form and submit it.

Numbered List

An ordered list that applies a circle around the list number.

Implementation:
The tl-bl-numbered class is required on the parent OL element:

<ol class="tl-bl-numbered">
    <li>First item here...

Color Picker:
Select the element you'd like to adjust the color of. Once selected, click on any color to preview the potential output.

HTML Output

<ol class="tl-bl-numbered">
  <li>Gather all the documents you will need to apply:</li>
  <li>Provide your basic information, (ex: demographics, on FAFSA form)</li>
  <li>List the schools that should receive the FAFSA information.</li>
  <li>Answer the dependency status questions.</li>
  <li>Complete the parent demographics section.</li>
  <li>Supply your financial and tax information.</li>
  <li>Sign the FAFSA form and submit it.</li>
</ol>
&lt;ol class=&quot;tl-bl-numbered&quot;&gt; &lt;li&gt;Gather all the documents you will need to apply:&lt;/li&gt; &lt;li&gt;Provide your basic information, (ex: demographics, on FAFSA form)&lt;/li&gt; &lt;li&gt;List the schools that should receive the FAFSA information.&lt;/li&gt; &lt;li&gt;Answer the dependency status questions.&lt;/li&gt; &lt;li&gt;Complete the parent demographics section.&lt;/li&gt; &lt;li&gt;Supply your financial and tax information.&lt;/li&gt; &lt;li&gt;Sign the FAFSA form and submit it.&lt;/li&gt; &lt;/ol&gt;
  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
  1. Gather all the documents you will need to apply:
  2. Provide your basic information, (ex: demographics, on FAFSA form)
  3. List the schools that should receive the FAFSA information.
  4. Answer the dependency status questions.
  5. Complete the parent demographics section.
  6. Supply your financial and tax information.
  7. Sign the FAFSA form and submit it.

Numbered w/ Background

An ordered list that applies a circle around the list number as well as a background to the content within the element.

Implementation:
The tl-bl-numbered-bg class is required on the parent OL element:

<ol class="tl-bl-numbered">
    <li>First item here...

Color Picker:
Select the element you'd like to adjust the color of. Once selected, click on any color to preview the potential output.

HTML Output


<ol class="tl-bl-numbered-bg">
  <li>Gather all the documents you will need to apply:</li>
  <li>Provide your basic information, (ex: demographics, on FAFSA form)</li>
  <li>List the schools that should receive the FAFSA information.</li>
  <li>Answer the dependency status questions.</li>
  <li>Complete the parent demographics section.</li>
  <li>Supply your financial and tax information.</li>
  <li>Sign the FAFSA form and submit it.</li>
</ol>
&lt;ol class=&quot;tl-bl-numbered-bg&quot;&gt; &lt;li&gt;Gather all the documents you will need to apply:&lt;/li&gt; &lt;li&gt;Provide your basic information, (ex: demographics, on FAFSA form)&lt;/li&gt; &lt;li&gt;List the schools that should receive the FAFSA information.&lt;/li&gt; &lt;li&gt;Answer the dependency status questions.&lt;/li&gt; &lt;li&gt;Complete the parent demographics section.&lt;/li&gt; &lt;li&gt;Supply your financial and tax information.&lt;/li&gt; &lt;li&gt;Sign the FAFSA form and submit it.&lt;/li&gt; &lt;/ol&gt;
  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
  1. Gather all the documents you will need to apply:
  2. Provide your basic information, (ex: demographics, on FAFSA form)
  3. List the schools that should receive the FAFSA information.
  4. Answer the dependency status questions.
  5. Complete the parent demographics section.
  6. Supply your financial and tax information.
  7. Sign the FAFSA form and submit it.

Numbered w/ Background (w/ header and info text)

An ordered list that applies a circle around the list number as well as a background to the content within the element.

Implementation:
The tl-bl-numbered-bg-info class is required on the parent OL element:

<ol class="tl-bl-numbered">
    <li>First item here...

Color Picker:
Select the element you'd like to adjust the color of. Once selected, click on any color to preview the potential output.

HTML Output


<ol class="tl-bl-numbered-bg-info">
  <li><span class="tl-li-header">Gather all the documents you will need to apply</span>
  <span class="tl-li-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
  <li><span class="tl-li-header">Provide your basic information, (ex: demographics, on FAFSA form)</span>
  <span class="tl-li-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
</ol>
&lt;ol class=&quot;tl-bl-numbered-bg-info&quot;&gt; &lt;li&gt;&lt;span class=&quot;tl-li-header&quot;&gt;Gather all the documents you will need to apply&lt;/span&gt; &lt;span class=&quot;tl-li-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;span class=&quot;tl-li-header&quot;&gt;Provide your basic information, (ex: demographics, on FAFSA form)&lt;/span&gt; &lt;span class=&quot;tl-li-text&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/span&gt;&lt;/li&gt; &lt;/ol&gt;
  • opd-green
  • opd-lgreen
  • opd-blue
  • opd-lblue
  • edu-green
  • edu-lgreen
  • edu-blue
  • edu-lblue
  • cjp-green
  • cjp-lgreen
  • cjp-blue
  • cjp-lblue
  • cjp-orange
  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • had-green
  • had-orange
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • reset
  1. Gather all the documents you will need to apply Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Provide your basic information, (ex: demographics, on FAFSA form) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.