How to make sections in Xpages look like this

Question

I am baffled. In the oneUI 3 documentation page there is a nice section. It looks like this:

I create a new db and set the theme to 3.0.2 and put in the code below, and it looks nothing like what I am trying to produce.

How can I use the OneUI documentation to reproduce what I see there?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:section id="section1" header="Header"
        headerStyle="lotusSectionHeader2">
    </xp:section>
</xp:view>

Good point. It looks like this:

Answer 1

Note, the "Widget Container" control (xe:widgetContainer) in the XPages Extension Library is roughly equivalent to the OneUI Section control. You can see that in Extension Library Demo App at: XPagesExt.nsf/OneUI_WidgetContainer.xsp It might be a better fit to design the page using that control rather than the xp:section control.

Also, in the OneUI 3 doc that you link to, on the right of the page, 25% down the page, there's a Theme dropdown where you choose "default" or "gen2". The behavior you're asking for looks like the "gen2" behavior (seems like OneUI 2), while your screenshot of what it looks like is closer to the "default" (OneUI 3) behavior. You may want to investigate how to enable the gen2 appearance.