Text & Inline Elements

These are the building blocks for any textual content in a FlightPlan page. Every element shown here lives in the FlightPlan.Core.Dom.Elements namespace and renders to its corresponding HTML tag.

Headings: H1, H2, H3

Three heading levels. All take a string in the constructor and render the matching HTML tag. Styling comes from the active StyleLibrary.

content.Add(new H1("Page Title"));
content.Add(new H2("Section Heading"));
content.Add(new H3("Subsection Heading"));

Renders as:

Page Title

Section Heading

Subsection Heading

Paragraph: P

The workhorse for body text. P is a ContainerElement, so it can take a leading text string in its constructor AND child elements (links, spans, code) — all rendered inside a single <p> tag.

content.Add(new P("A simple paragraph of text."));

Renders as:

A simple paragraph of text.

Inline Span: Span

Inline element for styling part of a paragraph. Like P, it accepts text in the constructor and child elements.

var p = content.Add(new P("Status: "));
p.Add(new Span("Active").WithStyle(s => s
    .Color("green")
    .FontWeight("bold")));

Renders as:

Status: Active

Anchor / Link: A

Renders an <a> tag. Constructor takes href and display text. Use WithNewTab() to open in a new browser tab and WithClass() for custom styling.

content.Add(new P()
    .AddText("Visit the ")
    .AddLink("/Guide", "Guide home")
    .AddText(" or open the ")
    .AddLink("https://opso.gsk.com", "OpsO portal", newTab: true)
    .AddText(" in a new tab."));

Renders as:

Visit the Guide home or open the OpsO portal in a new tab.

Inline Helpers: AddText / AddLink

Extension methods on any ContainerElement that return the parent (not the child), so you can chain mixed text and links fluently. Lives in InlineExtensions.cs.

// Without helpers — clunky:
var p = content.Add(new P());
p.Add(new Text("See " ));
p.Add(new A("/docs", "the docs").WithNewTab());
p.Add(new Text(" for details."));

// With helpers — fluent:
content.Add(new P()
    .AddText("See ")
    .AddLink("/docs", "the docs")
    .AddText(" for details."));

Renders as:

See the docs for details.

Inline Code: Code

Wraps content in a <code> tag for inline monospace formatting. Use it for variable names, method names, or short code references inside a paragraph.

var p = content.Add(new P("Use "));
p.Add(new Code("WithNewTab()"));
p.Add(new Text(" to open in a new browser tab."));

Renders as:

Use WithNewTab() to open in a new browser tab.

Preformatted Block: Pre

A <pre> block for multi-line code samples or fixed-width text. Preserves whitespace exactly. Every code sample on this very page is a Pre.

content.Add(new Pre(@"public class Hello
{
    public string Greet() => "Hi!";
}"));

Renders as:

public class Hello
{
    public string Greet() => "Hi!";
}

Raw Text Node: Text

Plain text with no wrapping element. Useful when you need to mix loose text between child elements inside a container, without forcing a <span>.

var p = content.Add(new P());
p.Add(new Text("Inline text without a wrapper."));

Renders as:

Inline text without a wrapper.

Unencoded HTML: RawHtml

Injects unescaped HTML directly. Use sparingly — only when you need markup the framework doesn't expose. Never pass user-supplied content to RawHtml; it bypasses HTML encoding and opens an XSS hole.

content.Add(new RawHtml("<em>Emphasized</em> via raw HTML."));

Renders as:

Emphasized via raw HTML.

Line Break: Br

Self-closing <br>. Use inside a paragraph or container to force a line break without starting a new block element.

var p = content.Add(new P("Line one."));
p.Add(new Br());
p.Add(new Text("Line two."));

Renders as:

Line one.
Line two.

← Back to Guide