LP6 Style Guide: Lists

HTML Code Snippet

								
	<!--Base Unstyled List-->
	<ul>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>

	<!--Unordered Disc List-->
	<ul class="list-disc">
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>

	<!--Unordered Circle List-->
	<ul class="list-circle">
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>
								
							

HTML Code Snippet

				
	<!--Ordered Numeric List-->
	<ol class="list-number">
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ol>

	<!--Ordered Alpha List-->
	<ol class="list-alpha">
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ol>

	<!--Ordered Roman List-->
	<ol class="list-roman">
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ol>
				
			

• Our average 70.7%
• Industry average 41.2%
• Andrew's average 101%

HTML Code Snippet

					
	<ul class="list-leaders list-leaders-dark">
		<li>
			<span>Our average</span>
			<span class="leader-stat">70.7%</span>
		</li>
		<li>
			<span>Industry average</span>
			<span class="leader-stat">41.2%</span>
		</li>
		<li>
			<span>Andrew's average</span>
			<span class="leader-stat">101%</span>
		</li>
	</ul>
					
				

HTML Code Snippet

					
	<!-- /demo see /core/_includes/steps-to-enroll-lp6.php for actual in-page usage -->
	<div class="steps-to-enroll">
		<span class="number">1</span>
		<h3>Choose Your Program</h3>
		<p><a href="#find">Select your desired program</a> from our 200+ degrees and certificates. If you are unsure which program is right for you, <a href="#rfi-off-canvas">complete our form</a> and an admissions representative will help you select the best fit for you.</p>

		<span class="number">2</span>
		<h3>Apply Online (15-25 Minutes)</h3>
		<p>There is no fee to <a id="lp5_apply_steps_text" href="https://online-campus.apus.edu/Home/index/AMU">submit our online admissions application</a>. You will be asked to provide information about your previous educational experiences and to declare your academic program.</p>
		<p>After you submit your application, an admissions representative will walk you through the steps you need to get started.</p>
	</div>
					
				

HTML Code Snippet

					
	<ol class="list-marker numbers">
		<li>Learn how to apply basic accounting, financial management, and business strategy to improve business decision making</li>
		<li>Understand the economic factors that impact markets, analyzing government, business, and consumer environments</li>
		<li>Develop the most effective organizational problem solving approaches, applying best practices for operations management, human resources, and other personnel roles</li>
		<li>Develop a strategic plan, integrating all aspects of planning and marketing</li>
		<li>Learn the importance of applying contract, tort, Uniform Commercial Code, and property law to business situations</li>
	</ol>
	<ul class="list-marker stars">
		<li>Learn how to apply basic accounting, financial management, and business strategy to improve business decision making</li>
		<li>Understand the economic factors that impact markets, analyzing government, business, and consumer environments</li>
		<li>Develop the most effective organizational problem solving approaches, applying best practices for operations management, human resources, and other personnel roles</li>
		<li>Develop a strategic plan, integrating all aspects of planning and marketing</li>
		<li>Learn the importance of applying contract, tort, Uniform Commercial Code, and property law to business situations</li>
	</ul>
					
				

General Guidance

Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a data table.

Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.

Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).

Accessibility

Lists are great from an accessibility standpoint because they provide structured order to content in a linear fashion. Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate and sometimes we provide info in tables that really would be better suited to lists.

Semantic Markup

Use semantic markup for lists. Identify the type of list container (ordered, unordered or description list) and group its related list item elements.

If you are using nested lists (i.e. lists within lists), then consider using an ordered list with a different numbering system in the secondary levels than in the primary levels to help users distinguish between them.

Another solution is to use smaller level headings combined with single level lists. See the example below.

Step One

1. List Item
2. List Item
3. List Item

Step Two

1. List Item
2. List Item
3. List Item

TBD