List

List utilities extend the base <ul> and <ol> elements with consistent spacing, style variants, and layout modifiers. Apply .list to any list element, then combine with modifier classes to control appearance and behavior.

All list utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Group	Classes	Effect	Common use
Base	`list`	`padding-left: 1.5rem; margin-bottom: 1rem`	Default list with consistent spacing.
Layout	`is-unstyled`, `is-inline`	`list-style: none; display: flex`	Navigation bars, tag lists, stripped layouts.
Bullet markers	`is-disc`, `is-circle`, `is-square`	`list-style-type: disc \| circle \| square`	Unordered content, nested lists.
Numeric markers	`is-decimal`, `is-leading-zero`	`list-style-type: decimal \| decimal-leading-zero`	Ordered steps, numbered guides.
Alpha markers	`is-lower-alpha`, `is-upper-alpha`	`list-style-type: lower-alpha \| upper-alpha`	Sub-steps, formal ordered lists.
Roman markers	`is-lower-roman`, `is-upper-roman`	`list-style-type: lower-roman \| upper-roman`	Legal outlines, chapters, major sections.

Usage

Apply .list to any <ul> or <ol> element. Chain modifier classes to control style and layout.

<ul class="list is-disc">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Item one
Item two
Item three

Unstyled list

Use is-unstyled to remove all markers and left padding. Useful for navigation, card lists, or custom-styled items.

<ul class="list is-unstyled">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Item one
Item two

Inline list

Use is-inline to render list items horizontally as a flex row. Ideal for navigation bars and tag groups.

<ul class="list is-inline">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Home
About
Contact

Leading-zero list

Use is-leading-zero for numbered lists that pad single digits with a leading zero.

<ol class="list is-leading-zero">
  <li>Install the package</li>
  <li>Import the CSS</li>
  <li>Initialize the config</li>
</ol>

Install the package
Import the CSS
Initialize the config

Nested list

All modifier classes can be mixed across nesting levels. Use different marker styles per level to indicate hierarchy.

<ol class="list is-decimal">
  <li>
    Main step
    <ul class="list is-circle">
      <li>Sub-step one</li>
      <li>Sub-step two</li>
    </ul>
  </li>
  <li>Next main step</li>
</ol>

Layout modifiers

Class	CSS	Recommended use
`list`	`padding-left: 1.5rem; margin-bottom: 1rem`	Default base list with consistent spacing.
`list is-unstyled`	`list-style: none; padding-left: 0`	Remove markers and indent for custom layouts.
`list is-inline`	`list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem`	Horizontal item rows for navbars and tags.

Marker styles

Class	Marker	CSS	Common use
`is-disc`	`●`	`list-style-type: disc`	Standard unordered list.
`is-circle`	`○`	`list-style-type: circle`	Secondary or nested lists.
`is-square`	`■`	`list-style-type: square`	Structured, editorial lists.
`is-decimal`	`1. 2. 3.`	`list-style-type: decimal`	Ordered steps.
`is-leading-zero`	`01. 02. 03.`	`list-style-type: decimal-leading-zero`	Numbered lists with leading zeros.
`is-lower-alpha`	`a. b. c.`	`list-style-type: lower-alpha`	Sub-steps, footnotes.
`is-upper-alpha`	`A. B. C.`	`list-style-type: upper-alpha`	Formal ordered lists.
`is-lower-roman`	`i. ii. iii.`	`list-style-type: lower-roman`	Legal, academic outlines.
`is-upper-roman`	`I. II. III.`	`list-style-type: upper-roman`	Chapters, major sections.

Usage notes

Apply .list as the base class on every <ul> or <ol> element, then chain modifier classes directly onto it.
All marker classes work on both <ul> and <ol> elements regardless of semantic type.
.list inherits color from its parent. To apply a custom color, set it on the .list element or a wrapping container.
is-inline and is-unstyled can be combined for tag rows and horizontal navigation strips.
Use different marker classes per nesting level to visually separate hierarchy in nested lists.
Avoid applying is-inline to long lists where wrapping might break the visual rhythm — consider a flex grid instead.