Header

The header is the topmost part of the BDUK layout system. It is fully modular, with three alignable sections (left, center, and right) — you can place any supported component into any section.

---

Structure

You define a header section using the following structure:

header = {
    layout = {
        left = { justify = "flex-start" },
        center = { justify = "center" },
        right = { justify = "flex-end" },
    },
    elements = {
        left = {
            {
                type = "group",
                items = {
                    { type = "logo", image = "bd_100.png" },
                    { type = "text", title = "BOII", subtitle = "UI Builder" }
                }
            }
        },
        center = {
            { type = "tabs" }
        },
        right = {
            {
                type = "namecard",
                avatar = "avatar_placeholder.jpg",
                background = "namecard_bg_4.jpg",
                name = "Player Name",
                title = "Some Player Title",
                level = 99,
                tier = "bronze"
            }
        }
    }
}

Each section (left, center, right) can be included or omitted, and you can insert any UI components inside — no limitations.

---

Supported Elements

You can use any of the following types in any of the three header sections:

type	Description
logo	Displays a logo image via background.
text	Title + optional subtitle, stacked vertically.
tabs	Auto-generated tab navigation from content.pages.
button	Single-action button element.
buttons	Button group using the Buttons class.
group	A horizontal wrapper that nests multiple child elements.
namecard	Visual identity block with avatar, name, title, tier, level.

---

Alignment Control

Each section's alignment can be styled independently using:

layout = {
    left = { justify = "flex-start", align = "center", gap = "1vw" },
    ...
}

These values map directly to Flexbox properties for layout precision.