Lists

<h3>Unordered List</h3>
<div class="versico example">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<h3>Long Line Unordered List</h3>
<div class="versico example">
    <ul>
        <li>Lorem ipsum dolor sit amet, Etiam consequat viverra est nec condimentum. Duis dapibus tincidunt erat id fringilla. Sed vel finibus nibh. Sed id tellus lorem. In convallis rhoncus viverra. Integer non mattis magna. Quisque facilisis sem lectus, sit amet cursus tellus efficitur eu. Praesent elit dolor, consectetur sit amet viverra ut, hendrerit in augue. Phasellus maximus orci vel nisi sagittis fringilla.</li>
        <li>Vivamus sagittis leo vel massa consequat, rutrum tempor quam condimentum. Fusce sed vestibulum magna, at tristique velit. Etiam tincidunt odio nisl, vel iaculis purus malesuada sit amet.</li>
        <li>In nec massa nisi. Vestibulum nec dignissim tortor. Donec quam lorem, egestas vitae erat sit amet, volutpat blandit mauris. Proin euismod, lorem vel commodo porta, arcu ex rhoncus ante, nec laoreet tellus nibh a lacus. Phasellus mattis, massa eu tempor molestie, magna lectus porttitor leo, a fermentum purus erat at odio.</li>
        <li>Consectetur adipiscing elit. In maximus vestibulum quam, non efficitur lectus efficitur nec. Maecenas luctus augue vitae consequat facilisis. Sed ligula felis, congue eu arcu et, faucibus feugiat arcu. Cras sit amet ante sed orci ullamcorper dignissim nec sit amet nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a consequat urna. Maecenas sed felis neque.</li>
    </ul>
</div>
<h3>Ordered Lists</h3>
<div class="versico example">
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</div>
<h3>Long Line Ordered List</h3>
<div class="versico example">
    <ol>
        <li>Lorem ipsum dolor sit amet, Etiam consequat viverra est nec condimentum. Duis dapibus tincidunt erat id fringilla. Sed vel finibus nibh. Sed id tellus lorem. In convallis rhoncus viverra. Integer non mattis magna. Quisque facilisis sem lectus, sit amet cursus tellus efficitur eu. Praesent elit dolor, consectetur sit amet viverra ut, hendrerit in augue. Phasellus maximus orci vel nisi sagittis fringilla.</li>
        <li>Vivamus sagittis leo vel massa consequat, rutrum tempor quam condimentum. Fusce sed vestibulum magna, at tristique velit. Etiam tincidunt odio nisl, vel iaculis purus malesuada sit amet.</li>
        <li>In nec massa nisi. Vestibulum nec dignissim tortor. Donec quam lorem, egestas vitae erat sit amet, volutpat blandit mauris. Proin euismod, lorem vel commodo porta, arcu ex rhoncus ante, nec laoreet tellus nibh a lacus. Phasellus mattis, massa eu tempor molestie, magna lectus porttitor leo, a fermentum purus erat at odio.</li>
        <li>Consectetur adipiscing elit. In maximus vestibulum quam, non efficitur lectus efficitur nec. Maecenas luctus augue vitae consequat facilisis. Sed ligula felis, congue eu arcu et, faucibus feugiat arcu. Cras sit amet ante sed orci ullamcorper dignissim nec sit amet nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a consequat urna. Maecenas sed felis neque.</li>
    </ol>
</div>
<hr>
<h3>List Items with Checkmarks</h3>
<div class="versico example">
    <ul class="checkmarked">
        <li>Checkmark Item 1</li>
        <li>Checkmark Item 2 which drops down to a second line to reveal that the alignment matches the default bullet point alignment so even if the line item doesn't break to a second line or at an instance that it does, you will be covered.</li>
        <li>Checkmark Item 3</li>
        <li>Checkmark Item 4</li>
    </ul>
</div>
<h3>List with Links</h3>
<div class="versico example">
    <ul>
        <li>Item 1</li>
        <li>Item 2 that also has a <a href="#do-nothing" class="text-link">link</a> in it.</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

• List Items inherit their styling from the surrounding tag. Example: If the list appears in a <p> tag, it will match it's styling.
• If a list needs to be centered, or all list items appear on one line, hide the list's marker point (usually a bullet point).
• Only use standard bullet points or the above specified check marks.
• When using checkmarks, put the class ".checkmarked" on the parent <ul> tag.
• Only hide bullet points when using for links or navigation. Otherwise, keep them visible.
• Do not manually add in bullet points to individual line items.
• Body copy lists that also include a link will take the standard ".text-link" class in the <a> tag.
• Only use checkmarks when promoting something. Example:
        This product has this
        This product can do that