List Styles

Encounters Lite uses image list styles in addition to standard lists. Aside from the default unordered list and the ordered list, you will be adding a class to the <ul> tag like this:

<ul class="open-arrow">


Unordered List – Default


Unordered List – Open Arrow

The class for this is <ul class="open-arrow">


Unordered List – Closed Arrow

The class for this is <ul class="closed-arrow">


Unordered List – Checkmark

The class for this is <ul class="checkmark">


Unordered List – Square

The class for this is <ul class="square">


Ordered List – Default


Definition List – Default

Definition lists are used to outline multiple terms and descriptions, for example, a glossary would be ideal for this type of list. An example followed by a code snippet looks like this:


<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit uspendisse potenti.</dd>
<dd>Donec nec erat non nibh tincidunt posuere. In sodales porta urna eget faucibus.</dd>
<dd>Nam urna ante, porta vel lacinia a, gravida eu magna. Nunc vitae ipsum leo.</dd>