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>