Counter-list

Jump To:

Outputs a styled list with counters

Demos

Numeric Counter List

A standard ordered list styled with custom counters.

First item in the list.
Second item with more content to demonstrate how the counter stays aligned.
Third item.

<ol class="counter-list">
  <li>First item in the list.</li>
  <li>Second item with more content to demonstrate how the counter stays aligned.</li>
  <li>Third item.</li>
</ol>

Alphabetical Counter List

Using the `counter-list--alphabetical` modifier to use letters instead of numbers.

Analyze the requirements.
Design the solution.
Implement the features.

<ol class="counter-list counter-list--alphabetical">
  <li>Analyze the requirements.</li>
  <li>Design the solution.</li>
  <li>Implement the features.</li>
</ol>

Non-List Counter Elements

You can also use the `counter-list__item` class on non-list elements (like divs).

This is a div acting as a counter item.

Another div in the counter flow.

<div class="counter-list">
  <div class="counter-list__item">This is a div acting as a counter item.</div>
  <div class="counter-list__item">Another div in the counter flow.</div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "margin" : (2rem 0),
  "item-margin" : (0 0 1rem 0),
  "align-items" : baseline, 
  "counter-width" : 2.4em,
  "counter-height" : null,
  "counter-gap" : 1em,
  "counter-style" : numeric,
  "counter-border-radius" : 50%,
  "counter-font-size" : 1.2em,
  "counter-font-weight" : null,
  "counter-font-family" : null,
  "counter-color" : white,
  "counter-background-color" : "accent",
  "extra-selector" : null
);

File Information

File: _counter-list.scss
Group: counter-list
Type: variable
Lines (comments): 13-26
Lines (code): 28-43

Map Properties

Name	Type	Default	Description
margin	List	CssUnit	(2rem 0)
item-margin	List	CssUnit	((0 0 1rem 0))
align-items	Keyword	baseline	How to align the counter (flexbox align-items values)
counter-width	CssUnit	2.4em	The width and height (if height is falsy)
counter-height	CssUnit	null	The height (optional)
counter-gap	CssUnit	1em	The gap between the counter and the list item content.
counter-style	String	numeric	The list-style-type used for the counter.
counter-border-radius	Keyword	Percentage	50%
counter-font-size	CssUnit	1.2em	The font-size of the counter text.
counter-color	Color	String	white
counter-background-color	Color	String	"accent"
extra-selector	String	null	Additional selectors to include table styling.

Mixins

set()

Mixin

Change modules $config

File Information

File: _counter-list.scss
Group: counter-list
Type: mixin
Lines (comments): 45-48
Lines (code): 50-52

Examples

@include ulu.component-counter-list-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Output counter-list component styles

File Information

File: _counter-list.scss
Group: counter-list
Type: mixin
Lines (comments): 63-70
Lines (code): 72-154

Demo

View

Examples

<ol class="counter-list">
  <li class="counter-list__item">This is a item that will get counted</li>
  <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
  <li class="counter-list__item">Small Amount of Text</li>
</ol>

Preview

This is a item that will get counted
Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.
Small Amount of Text

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _counter-list.scss
Group: counter-list
Type: function
Lines (comments): 54-57
Lines (code): 59-61

Examples

@include ulu.component-counter-list-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config