Module Positions

MokoJoomHero provides 11 module positions arranged in a standard page layout.

Layout Diagram

+---------------------------------------------+
|                  topbar                      |
+---------------------------------------------+
| [logo/brand]              [menu]            |
+---------------------------------------------+
|                  banner                      |
+---------------------------------------------+
|                   hero                       |
+---------------------------------------------+
|               breadcrumbs                    |
+---------------------------------------------+
|                 main-top                     |
+------+------------------------------+-------+
|      |                              |       |
| side |         content              | side  |
| bar  |        (component)           | bar   |
| left |                              | right |
|      |                              |       |
+------+------------------------------+-------+
|                main-bottom                   |
+---------------------------------------------+
|                  footer                      |
+---------------------------------------------+
|                  debug                       |
+---------------------------------------------+

Position Details

Position	Location	Module Style	Use Case
`topbar`	Above header	none	Contact info, social links, announcements
`menu`	Inside header	none	Main navigation menu
`banner`	Below header	none	Full-width banners, promotions
`hero`	Below banner	hero	Hero images, call-to-action, landing content
`breadcrumbs`	Below hero	none	Breadcrumb navigation
`main-top`	Above content	card	Featured articles, notices
`sidebar-left`	Left of content	card	Secondary navigation, filters
`sidebar-right`	Right of content	card	Related content, ads, widgets
`main-bottom`	Below content	card	Related articles, CTAs
`footer`	Page footer	none	Footer menus, copyright, links
`debug`	After footer	none	Debug module (hidden from visitors)

Module Chrome Styles

none -- Raw module output, no wrapper
card -- Wrapped in a bordered card with header and body
hero -- Styled for the hero section gradient background

Responsive Behaviour

On screens narrower than 768px:

Sidebars stack below the main content
Navigation collapses to vertical layout
Header switches to stacked brand + nav layout