{"id":13933,"date":"2025-01-22T09:01:05","date_gmt":"2025-01-22T14:01:05","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=13933"},"modified":"2026-02-24T07:01:14","modified_gmt":"2026-02-24T12:01:14","slug":"lists","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"<p>When presenting information in list form on your website, you can choose between two primary types of lists:<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><strong>Ordered list<\/strong>: A numbered list ideal for sequences, instructions, or any content that follows a specific order.<\/p>\n<ol class=\"hwc-list-checked\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<p><strong>Unordered list<\/strong>: A bulleted list used for collections of items where order does not matter.<\/p>\n<ul>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h2>How to Create a List<\/h2>\n<ol>\n<li>Place your cursor where you\u2019d like the list to begin.<\/li>\n<li>Select the appropriate <strong>ordered<\/strong> or <strong>unordered list<\/strong> icon in the editor toolbar.<a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13934\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor.png\" alt=\"Screenshot showing the list icons in the editor.\" width=\"450\" height=\"92\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor.png 700w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor-300x61.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor-600x123.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/01\/list-icons-in-editor-560x114.png 560w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/li>\n<li>Start typing your list items; press <strong>Enter<\/strong> after each item to add another.<\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>How To Change the List Style<\/h2>\n<p>To apply specific styles to your list for a customized appearance, follow these steps:<\/p>\n<ol>\n<li><strong>Create a list<\/strong>.<\/li>\n<li><strong>Choose a Style<\/strong>:\n<ol>\n<li>Review the List Style Options below to decide which style you wish to use.<\/li>\n<li>Note the corresponding <strong>class name(s)<\/strong> for the style you choose.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Locate the List in HTML<\/strong>:\n<ol>\n<li>Highlight the first list item. This will remain highlighted when switching to the HTML view, making it easier to locate the list.<\/li>\n<li>Click the <strong>Text<\/strong> tab in the upper-right corner of the editor to display the HTML of the page.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Add the Class Name<\/strong>:\n<ol>\n<li>Find the <code class=\"inline\">&lt;ol&gt;<\/code> or <code class=\"inline\">&lt;ul&gt;<\/code> tag directly above the highlighted list item.<\/li>\n<li>Before the closing bracket, add a space followed by <code class=\"inline\">class=\"class-name\"<\/code>.<\/li>\n<li><code>&lt;ol class=\"hwc-list-checked\"&gt;<\/code><\/li>\n<\/ol>\n<\/li>\n<li><strong>Combine Styles (Optional)<\/strong>:\n<ol>\n<li>In some instances you may wish to combine styles.<\/li>\n<li>Add all class names within the quotes, separated by a space. For example.<\/li>\n<li><code>&lt;ol class=\"hwc-list-checked dark-blue\"&gt;<\/code><\/li>\n<\/ol>\n<\/li>\n<li><strong>Check Accessibility<\/strong>: Ensure that the list styles are used on a background color that provides adequate color contrast to meet accessibility guidelines. For example, light colored lists should only be used on dark background that provide adequate contrast. View our <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/color\/\">Color and Contrast accessibility documentation<\/a> to learn more.<\/li>\n<li><strong>Preview Changes<\/strong>:\n<ol>\n<li>Select the <strong>Visual tab<\/strong> to return to the visual editor mode.<\/li>\n<li>The new styles will not be visible within the editor.<\/li>\n<li><strong>Preview<\/strong> the page to see the styles in action.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Save Your Changes<\/strong>.<\/li>\n<\/ol>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>List Style Options<\/h2>\n<p>Below are the available styles and their corresponding class name that can be applied to modify the look of a list.<\/p>\n<h3>Flush Left<\/h3>\n<p>This style removes the indent from the first-level list items, aligning them flush with the left margin. Nested lists will still to indent as usual. This style can be applied to an ordered or unordered list.<\/p>\n<p>Class name: <code class=\"inline\">hwc-list-flush-left<\/code>.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Applied To An Ordered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-flush-left\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-flush-left\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n<ol>\n<li>This is a nested list that indents.<\/li>\n<li>Lorem ipsum dolor sit amet.\n<ol>\n<li>This is a nested list that indents.<\/li>\n<li>Lorem ipsum dolor sit amet.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Applied To An Unordered List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-flush-left\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-flush-left\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n<ul>\n<li>This is a nested list that indents.<\/li>\n<li>Lorem ipsum dolor sit amet.\n<ul>\n<li>This is a nested list that indents.<\/li>\n<li>Lorem ipsum dolor sit amet.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>Underlined List<\/h3>\n<p>This style can only be applied to unordered lists. It removes the default bullet and displays a divider line beneath each list item to create clear visual separation.<\/p>\n<p><code>&lt;ul class=\"hwc-list-divided\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-divided\">\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>Condensed List<\/h3>\n<p>This style can be applied to both ordered and unordered lists. It reduces the vertical spacing between list items to create a more compact layout.<\/p>\n<p><code>&lt;ul class=\"hwc-list-condensed\"&gt;<\/code><\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Normal List (no class assigned)<\/h4>\n<ul>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Condensed List<\/h4>\n<ul class=\"hwc-list-condensed\">\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<li>Lorem ipsum dolor sit amet<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>Checked List<\/h3>\n<p>This style replaces the bullet icon with a checkmark. This style can only be applied to unordered lists.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Default Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked dark-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked dark-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Yellow Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked yellow\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked yellow\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class = \"alert alert-info notification-dark-blue oscitas-bootstrap-container\">\n<h4>Light Blue Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked light-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked light-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Light Gray Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked light-gray\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked light-gray\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>White Checked List<\/h4>\n<p><code>&lt;ul class=\"hwc-list-checked white\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-checked white\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>Styled Numbered List<\/h3>\n<p>This is a stylized numbered list with larger numbers . This style can only be applied to ordered lists.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Default Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h4>Blue Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h4>Dark Blue Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered dark-blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered dark-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h4>Yellow Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered yellow\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered yellow\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class = \"alert alert-info notification-dark-blue oscitas-bootstrap-container\">\n<h4>Light Blue Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered light-blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered light-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h4>Light Gray Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered light-gray\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered light-gray\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h4>White Numbered List<\/h4>\n<p><code>&lt;ol class=\"hwc-list-numbered white\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered white\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered blue<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered dark-blue<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered dark-blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered dark-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered yellow<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered yellow\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered yellow\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class = \"alert alert-info notification-dark-blue oscitas-bootstrap-container\">\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered light-blue<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered light-blue\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered light-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered light-gray<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered light-gray\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered light-gray\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<h3 style=\"text-align: center;\">ol hwc-list-numbered centered white<\/h3>\n<p><code>&lt;ol class=\"hwc-list-numbered centered white\"&gt;<\/code><\/p>\n<ol class=\"hwc-list-numbered centered white\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>Font Awesome Icons<\/h3>\n<p>This provides a variety of bullet icons and color options (blue, dark blue, light blue, light gray, and white) to chose from. These styles can only be applied to unordered lists.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Default Asterisk Icon<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<\/div>\n<\/div>\n<p>Any of the color options can be combined with any of the bullet styles.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Blue Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe dark-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe dark-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Yellow Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe yellow\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe yellow\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<div class = \"alert alert-info notification-dark-blue oscitas-bootstrap-container\">\n<h4>Light Blue Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe light-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe light-blue\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Light Gray Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe light-gray\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe light-gray\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>White Asterisk<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe white\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe white\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Blue Heart<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue heart\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue heart\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Heart Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe dark-blue heart light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe dark-blue heart light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Yellow Circle<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe yellow circle\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe yellow circle\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Circle Xmark<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe dark-blue circle-xmark\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe dark-blue circle-xmark\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Check<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-check\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-check\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Circle Check Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe dark-blue circle-check light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe dark-blue circle-check light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Right Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-right light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-right light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Arrow Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-arrow-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-arrow-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Play<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-play\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-play\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Circle Chevron Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue circle-chevron-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue circle-chevron-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Angle Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue angle-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue angle-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Yellow Angles Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe yellow angles-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe yellow angles-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Play<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue play\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue play\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Yellow Star<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe yellow star\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe yellow star\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Star Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue star light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue star light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Xmark<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-xmark\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-xmark\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Check<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-check\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-check\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Check Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-check light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-check light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Caret Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-caret-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-caret-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Dark Blue Square Caret Right Outline<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe dark-blue square-caret-right light\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe dark-blue square-caret-right light\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Up Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-up-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-up-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Arrow Up Right<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-arrow-up-right\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-arrow-up-right\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Square Plus<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue square-plus\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue square-plus\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Diamond<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue diamond\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue diamond\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<h4>Blue Landmark Dome<\/h4>\n<p><code>&lt;ul class=\"hwc-list-font-awe blue landmark-dome\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-font-awe blue landmark-dome\">\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-dotted osc-rule\" \/>\n<h3>List Menu<\/h3>\n<p>This is a stylized list that looks like an menu. These styles can only be applied to unordered lists.<\/p>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>Default List Menu<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>Dark Blue List Menu<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu dark-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu dark-blue\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>Light Blue List Menu<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu light-blue\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu light-blue\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>Light Gray List Menu<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu light-gray\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu light-gray\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n<h4>List Menu With Centered Text<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu center\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu center\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>List Menu With Medium Text<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu font-med\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu font-med\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>List Menu With Large Text<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu font-lg\"&gt;<\/code><\/p>\n<ul class=\"hwc-list-menu font-lg\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<h4>Combined Styles<\/h4>\n<p><code>&lt;ul class=\"hwc-list-menu font-lg center dark-blue\"&gt;<\/code><br \/>\nExample of how the classes can be combined. This is a dark blue list menu with large, centered text.<\/p>\n<ul class=\"hwc-list-menu font-lg center dark-blue\">\n<li><a href=\"#\">About Us<\/a><\/li>\n<li><a href=\"#\">Research<\/a><\/li>\n<li><a href=\"#\">Education<\/a><\/li>\n<li><a href=\"#\">Contact Us &#8211; Lorem ipsum dolor sit amet, cons adipi elit, sed do eiusmod tempor ut labore et dolore<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When presenting information in list form on your website, you can choose between two primary types of lists: How to Create a List Place your cursor where you\u2019d like the list to begin. Select the appropriate ordered or unordered list icon in the editor toolbar. Start typing your list items; press Enter after each item &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/lists\/\" aria-label=\"Read more about Lists\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-13933","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=13933"}],"version-history":[{"count":8,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13933\/revisions"}],"predecessor-version":[{"id":15439,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/13933\/revisions\/15439"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=13933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}