Source: dist/css/acc_uc.css, line 2330

6 List

Description: A major part of the construction of the web and the content of the web are lists.

Source: dist/css/acc_uc.css, line 2390

6.1 Marker

Markers classes change the styles and looks of the the list item maker. Marker must attach to the parent UL or Ol and will not style the grand children.

Example s

.marker_primary

primary colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_secondary

secondary colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_accent

accent colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_alert

alert colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_warning

warning colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_success

success colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_highlight

highlight colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_black

black colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

.marker_white

white colored list markers.

List Item Text
List Item Text
List Item Text
- List Item Grand Children
- List Item Grand Children

List Item Text
List Item Text
List Item Text

<ul class="[modifier class]">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text
    <ul class="">
        <li>List Item Grand Children</li>
        <li>List Item Grand Children</li>
    </ul>
    </li>
</ul>
<ol class="[modifier class]">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text</li>
</ol>

<ul class="[modifier class]">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text
    <ul class="">
        <li>List Item Grand Children</li>
        <li>List Item Grand Children</li>
    </ul>
    </li>
</ul>
<ol class="[modifier class]">
    <li>List Item Text</li>
    <li>List Item Text</li>
    <li>List Item Text</li>
</ol>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2339

Example s

.ul_none

none

ul_none

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

.ul_bullet

bullet

ul_bullet

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

.ul_square

square

ul_square

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <ul class="[modifier class]">
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  </ul>
</div>

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <ul class="[modifier class]">
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
  </ul>
</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2480

6.3 Counters

Add counters in front of collections without the need of an OL or UL for an advanced list type. Counters cannot be nested!

Source: dist/css/acc_uc.css, line 2491

6.3.1 Counter Basics

Counter can be incremented by the counter_increment class.

Example

Default styling

: Item, Object, or Section

    <div class="counter_reset">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
 	</div>

    <div class="counter_reset">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment">:</span> Item, Object, or Section</div>
 	</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2520

6.3.2 Counter Sub

Counter Subs can be nested inside of counters

Example

Default styling

Item, Object, or Section

. Sub Item

Item, Object, or Section

    <div class="counter_reset ">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
            <div class="counter-sub_reset">
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
            </div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
 	</div>

    <div class="counter_reset ">
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
            <div class="counter-sub_reset">
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
                <div class="m_3 p_2 p-l_4 bg_primary-3"><span class="font_bold counter counter_upper-alpha"></span>.<span class="font_bold counter-sub counter-sub_increment counter-sub_lower-alpha"></span> Sub Item</div>
            </div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
        <div class="bg_primary-2 p_3 m_3"><span class="font_bold counter counter_increment counter_upper-alpha"></span> Item, Object, or Section</div>
 	</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2548

6.3.3 Counter Types

Create different types of list with the counter types

Example s

counter

Defualt Number Listing

Item, Object, or Section

counter_lower-alpha

Lowercase Alphabetic Listing

Item, Object, or Section

counter_upper-alpha

Uppercase Alphabetic Listing

Item, Object, or Section

counter_lower-roman

Lowercase Roman Listing

Item, Object, or Section

counter_upper-roman

Uppercase Roman Listing

Item, Object, or Section

<div class="counter_reset">
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
 	</div>

<div class="counter_reset">
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
		<div class="m_3 p_3 bg_primary-2"><span class="[modifier class] font_bold counter_increment"></span> Item, Object, or Section</div>
 	</div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2605

6.3.4 Order Markers

Quickly decorate the counter with a circle. Change the bgground and font color with utility classes to acheive different effects.

Example

Default styling

Item, Object, or Section

    <div class="counter_reset">
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_primary-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker font_10 br-tr_round br-br_round bg_highlight-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_info-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_warning-2"></span> Item, Object, or Section</div>
    </div>

    <div class="counter_reset">
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_primary-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker font_10 br-tr_round br-br_round bg_highlight-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_info-2"></span> Item, Object, or Section</div>
        <div class="m_3 p_3"><span class="font_bold counter counter_increment order-marker bg_warning-2"></span> Item, Object, or Section</div>
    </div>

Code Sample

Copy Code

Source: dist/css/acc_uc.css, line 2639

6.4 Inline Lists

Inline Lists are for separated items on a single line.

Example s

.ul_row.gap_4

basic ul with no separators but formatted with flex row

ul_row gap_4

Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn

.ul_inline

basic inline ul with no separators

ul_inline

Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn

.ul_inline-comma

wrapping line of text that is separated by commas

ul_inline-comma

Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn

.ul_inline-semicolon

wrapping line of text that is separated by semicolons

ul_inline-semicolon

Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn

.ul_inline-pipe

wrapping line of text that is separated by pipes

ul_inline-pipe

Evelyn Watsica II
Linda Lang
Laurie Greenfelder
Katie Wiegand
Brittany Conn

NOTE:

The limitations of the styleguide around compound pseudo selector :not(:last-child):after means a trailing divider shows up in documentation but not in production applications. Added a workaround to hide the divider via the following style tag in the example. This is not necessary in production applications.

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <ul class="[modifier class]">
    <li>Evelyn Watsica II</li>
    <li>Linda Lang</li>
    <li>Laurie Greenfelder</li>
    <li>Katie Wiegand</li>
    <li>Brittany Conn</li>
  </ul>
</div>
<style>
[class^="ul_inline"] > li:last-child::after {
    content:"" !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
</style>

<div class="font_normal font_1 p_3">
  <h3 class="font_2 font_bold c_shade_3 p-b_3">[modifier class]</h3>
  <ul class="[modifier class]">
    <li>Evelyn Watsica II</li>
    <li>Linda Lang</li>
    <li>Laurie Greenfelder</li>
    <li>Katie Wiegand</li>
    <li>Brittany Conn</li>
  </ul>
</div>
<style>
[class^="ul_inline"] > li:last-child::after {
    content:"" !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
</style>

Code Sample

Copy Code

List

6.1 Marker

Example s

.marker_primary

.marker_secondary

.marker_accent

.marker_alert

.marker_warning

.marker_success

.marker_highlight

.marker_black

.marker_white

6.2 List Type

Example s

.ul_none

ul_none

.ul_bullet

ul_bullet

.ul_square

ul_square

6.3 Counters

6.3.1 Counter Basics

Example

Default styling

6.3.2 Counter Sub

Example

Default styling

6.3.3 Counter Types

Example s

counter

counter_lower-alpha

counter_upper-alpha

counter_lower-roman

counter_upper-roman

6.3.4 Order Markers

Example

Default styling

6.4 Inline Lists

Example s

.ul_row.gap_4

ul_row gap_4

.ul_inline

ul_inline

.ul_inline-comma

ul_inline-comma

.ul_inline-semicolon

ul_inline-semicolon

.ul_inline-pipe

ul_inline-pipe

NOTE: