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:
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>
<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>
bsd-pink
bsd-lpink
bsd-purple
bsd-lpurple
bsd-red
msw-dblue
msw-lblue
at-red
at-blue
link-blue
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:
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>
<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>
bsd-pink
bsd-lpink
bsd-purple
bsd-lpurple
bsd-red
msw-dblue
msw-lblue
at-red
at-blue
link-blue
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 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:
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>
<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>
bsd-pink
bsd-lpink
bsd-purple
bsd-lpurple
bsd-red
msw-dblue
msw-lblue
at-red
at-blue
link-blue
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 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:
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>
<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>
bsd-pink
bsd-lpink
bsd-purple
bsd-lpurple
bsd-red
msw-dblue
msw-lblue
at-red
at-blue
link-blue
text
gray-1
gray-2
gray-3
gray-4
gray-5
white
black
reset
Gather all the documents you will need to applyLorem 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.
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.
