List Styles

Ordered, unordered, and definition lists inherit styles from the body and spacing modules. In addition to the default list types, Tyfy offers several display options for ordered and unordered lists.

Classes

.list-icons

Applied to an unordered list to replace the default bullets with icons. A second class is required to identify the icon to be used:

.list-icons-angle

Used with the list-icons class to replace the default bullets with the angle icon.

.list-icons-dash

Used with the list-icons class to replace the default bullets with the dash icon.

.list-icons-check

Used with the list-icons class to replace the default bullets with the check icon.

.list-nobullet

Applied to an unordered list to remove the bullets and left-hand padding.

.list-indented

Used with the list-nobullet class to more clearly identify individual list items. This class indents all lines after the first line in each list item. This class works with nested lists.

.list-cols-2, .list-cols-3

Applied to ordered and unordered lists to display items in columns. These classes use CSS columns; columns are read top to bottom and then left to right. For unordered lists, these classes can be used with list-icons or list-nobullet. The styles are responsive and reduce to a single column for small screen widths. These classes do not work with nested lists.

.list-grid-2, .list-grid-3, .list-grid-4

Applied to ordered and unordered lists to display items in rows. These classes use CSS flexbox; rows are read left to right and then top to bottom. For unordered lists, these classes can be used with list-icons or list-nobullet. The styles are responsive and reduce to a single column for small screen widths. These classes do not work with nested lists.

.list-flex

Applied to unordered lists to display list items in an in-line fashion. This class uses CSS flexbox. While this class is intended for use with the list-nobullet class, it can also be used alone or with the list-icons class. The default alignment of items is left. These classes do not work with ordered lists or nested lists.

.list-flex-center

Used with the list-flex class to center align the list items.

.list-flex-right

Used with the list-flex class to right align the list items.

Variables

$tyfont-heading

$tyfy-sans !default;

Font family applied to the <dt> tag.

$tyspacing

(sm:1, md:2, lg:3, indent:3) !default;

SASS map of values indicating the number of grid units for each spacing variable value. The small spacing is used betwen elements in a list; the indent spacing is used for indenting list items; the large spacing is used as a column gap for lists in grids or columns.

$tybreak-list-cols2

35em !default;

Above this em-based screen width grid and column lists can be 2 columns.

$tybreak-list-cols3

55em !default;

Above this em-based screen width grid and column lists can be 3 columns.

$tybreak-list-cols4

75em !default;

Above this em-based screen width grid and column lists can be 4 columns.

$tycolor-text-light

mix($tycolor-fg,$tycolor-bg,45%) !default;

Color of icon bullets when using the list-icons class.

Demo