← Back to Guide

List Elements

Three classes — Ul, Ol, and Li — cover both bullet and numbered lists. Li can take a text string in its constructor for simple items, or be left empty so you can add child elements (links, spans, mixed content).

Bullet List: Ul

Renders a <ul>. Add Li children for each item. Capture the Ul reference so you can chain item adds without re-typing the variable.

var list = content.Add(new Ul());
list.Add(new Li("First item"));
list.Add(new Li("Second item"));
list.Add(new Li("Third item"));

Numbered List: Ol

Identical to Ul but renders <ol>. Browser handles the numbering.

var steps = content.Add(new Ol());
steps.Add(new Li("Open Visual Studio"));
steps.Add(new Li("Create a new project"));
steps.Add(new Li("Build and run"));

List Item with Mixed Content: Li

Pass no constructor arg to Li, then add child elements. Combined with the AddText / AddLink extensions, you can mix text, links, and inline code in a single line per item.

var list = content.Add(new Ul());

// Fluent — text + link in one chain
list.Add(new Li()
    .AddText("Visit the ")
    .AddLink("/Guide", "Guide home"));

// Explicit children when you need an inline element the helpers
// don't cover (like Code):
var li = list.Add(new Li());
li.Add(new Text("Call "));
li.Add(new Code("WithNewTab()"));
li.Add(new Text(" to open in a new tab."));

Nested Lists

Lists nest naturally — add a Ul or Ol as a child of an Li. The browser handles the indentation.

var outer = content.Add(new Ul());
outer.Add(new Li("Fruit"));
var fruit = outer.Add(new Li("Citrus"));
var sub = fruit.Add(new Ul());
sub.Add(new Li("Orange"));
sub.Add(new Li("Lemon"));
sub.Add(new Li("Lime"));
outer.Add(new Li("Vegetables"));

← Back to Guide