Present text, status, guides, badges, notices, timelines, cards, and structured content.

Content elements

Content elements explain state without requiring input. Use them for onboarding, warnings, summaries, status, and grouped information.

Labels and paragraphs

local Label = Section:AddLabel({
    Text = "Session ready",
    Icon = "circle-check",
    DoesWrap = true,
})

Label:SetText("Connected")
Label:SetColor(Color3.fromRGB(52, 211, 153))

Labels can also control Visible, Font, TextSize, alignment, RichText, images, and background transparency.

local Banner = Section:AddBanner({
    Name = "New release",
    Content = "XLQP Gen1 is ready.",
    Icon = "sparkles",
    Height = 130,
    Actions = {
        {
            Name = "View changes",
            Callback = function()
                print("Open changelog")
            end,
        },
    },
})

The controller can SetImage, SetTitle, SetContent, and AddAction.

Status and notices

local Status = Section:AddStatusBox({
    Title = "Service",
    Content = "All systems operational",
    Variant = "success",
})

Status:SetStatus("warning")
Status:SetContent("Connection is unstable")

Cards and values

Method	Best for	Important options
`AddInfoCard`	Highlighted explanation	`Name`, `Content`, `Description`, `Icon`, `Color`
`AddStatCard`	Single metric	`Name`, `Value`, `Description`
`AddBadge`	Small state label	`Name`, `Text`, `Color`
`AddKeyValueList`	Property summary	`Name`, `Items`
`AddPillList`	Compact tags	`Name`, `Items`/`Tags`, `Height`, `Width`
`AddTagCloud`	Flexible tag collection	`Name`, `Tags`, `Height`, `TagWidth`

Section:AddKeyValueList({
    Name = "Session",
    Items = {
        { Key = "Place", Value = game.PlaceId },
        { Key = "Players", Value = #game.Players:GetPlayers() },
    },
})

Timeline, changelog, and checklist

local Timeline = Section:AddTimeline({
    Name = "Startup",
    Items = {
        { Title = "Library loaded", Content = "XLQP initialized" },
        { Title = "Config restored", Content = "Saved values applied" },
    },
})

Timeline:Add({ Title = "Ready", Content = "Interface mounted" })

AddChangelog accepts Content, Logs/Items, and Height. AddChecklist accepts Items and Callback. Their controllers can update their lists after creation.

Notifications

local Notify = Section:AddNotify({
    Name = "Saved",
    Content = "Your configuration was updated.",
    Pos = "TopRight",
    Time = 4,
})

Notify:Fire()

Use AddToastAction for a notification with one action. AddNotify supports Buttons, icons/images, position, duration, and callbacks.

Supporting layout

Method	Purpose
`AddDivider`	Visual separator
`AddSpacer` / `AddSpace`	Fixed vertical space
`AddBoxSection`	Collapsible content group
`AddShortcutHint`	Keyboard shortcut explanation
`AddCopyBox`	Copyable text or identifier
`AddCode`	Display source/code content
`AddFilterList`	Search and run items
`CreateFAQ`	Expandable question collection
`CreateScrollHint`	Animated scroll guidance
`CreateCursorTag`	Label that follows the cursor

Section:AddCopyBox({
    Name = "Place ID",
    Content = tostring(game.PlaceId),
})

Section:AddShortcutHint({
    Name = "Toggle interface",
    Key = "RightShift",
    Content = "Show or hide XLQP",
})

Content elements

On this page