Lists: Unordered

Add as many <li> items as you need to achieve your list. Remember to keep basic ordered list structure or this will display incorrectly.

You can also remove the stylized number by removing the <p class=”stylized-list__number>..</p> element. This is not needed.

In fact, you can use an image (e.g. an icon) instead of the number, if the icon snippet is not working for you (e.g. if you have shorter amounts of content). Note that below, the 90×90 is how the icon displays, but for consistency across devices across the site, please provide all icons at 150×150 pixels as per the specifications.

• Do not use the stylized ordered list for smaller bits of text, as this looks “broken” to the user – there’s not enough content below the numbers.
• Do not use too much text within the 2-column ordered list. It starts to look very cumbersome and difficult to read. The below example has too much text. Keep each text block around 100 characters or fewer.
• If using images for a stylized unordered list, 1:1 icons are required, as most icons are square in nature. The icons will display at 90px wide, and height will be auto. Therefore, if you have 4 icons/images, make sure they are all approximately the same dimension, or at least on a similar artboard size, so that the list is consistent.

If you have a large amount of text that needs to be associated with a stylized ordered list, you can make the container full-width of the column (vs 1/2 size) by removing the “col-md-6” class from each item (this needs to be done in a snippet, not the Sitecore component). An example of this is below:

From a code perspective, just remove the class as mentioned above:

<li class="col-12 stylized-list__item">
    <p class="stylized-list__number">02</p>
    <h4>Results Driven</h4>
    <p>We improve the effectiveness of the assessment process for clients by hitting all the key metrics for success and a strong focus on ROI.</p>
</li>

Do not use a stylized ordered list to provide “navigation” from solution pages – use the Content Matrix – Large or Products Module as prescribed. Do not hyperlink text underneath a number unless it is part of a table of contents sending the user to other insights from an edition overview page (or similar).