Text on line by itself

[nkronberg]

Maybe this is super simple, I don't know, but I am having a tough time figuring it out. I'd just like to have text inside a section/panel display on its own line, with content appearing below it.

In the below example, "Section-heading" should be on its own line which spans the entire orange section, and the blue 'test' section should start underneath that line. It doesn't necessarily need to be centered, but to have that option would be nice. It would also be great to be able to have this same configuration with multiple sections/panels below the span of text.

Example code:

New-HTML -Name 'Test' -Show {
            New-HTMLSection -HeaderBackgroundColor '#F38F1B' {
            New-HTMLSection -Invisible {
                New-HTMLText -Text "Section-heading" -FontSize 20 -FontWeight bold -Alignment center
            }
            New-HTMLSection {
                New-HTMLText -Text "Test"
            }
        }
}

Thank you!

[PrzemyslawKlys]

New-HTML -Name 'Test' -Show {
    New-HTMLSection -HeaderBackGroundColor '#F38F1B' -Direction column {
        New-HTMLContainer {
            New-HTMLText -Text "Section-heading" -FontSize 20 -FontWeight bold -Alignment center
            New-HTMLText -Text "Section-heading" -FontSize 20 -FontWeight bold -Alignment left
            New-HTMLTable
        }
        New-HTMLSection -Direction column {
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLTable
            New-HTMLSection {
                New-HTMLTable
                New-HTMLText -Text 'test'
            }
            New-HTMLSection {
                New-HTMLTable
                New-HTMLContainer {
                    New-HTMLText -Text 'test'
                    New-HTMLText -Text 'test'
                }
            }
        }
    }
}

New-HTMLContainer/New-HTMLSection is not always required. It depends on situation.

New-HTML -Name 'Test' -Show {
    New-HTMLSection -HeaderBackGroundColor '#F38F1B' -Direction column {
        New-HTMLText -Text "Section-heading" -FontSize 20 -FontWeight bold -Alignment center
        New-HTMLText -Text "Section-heading" -FontSize 20 -FontWeight bold -Alignment left
        New-HTMLTable
        New-HTMLSection -Direction column {
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLText -Text "Test"
            New-HTMLTable
            New-HTMLSection {
                New-HTMLTable
                New-HTMLText -Text 'test'
            }
            New-HTMLSection {
                New-HTMLTable
                New-HTMLContainer {
                    New-HTMLText -Text 'test'
                    New-HTMLText -Text 'test'
                }
            }
        }
    }
}

Direction defines how Flex elements (section/container/panel and so on) are positioned. Row based, column based, reverse column, reverse row. This gives you some options to play with.

Hope this helps.