@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/dist/components/bs5/logo/logoCOALandscape2Lines.hbs

@@ -1,5 +1,6 @@
 {{!prettier-ignore}}
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 56" fill="{{fill}}" class="{{className}}">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 56" {{#if fill}}fill="{{fill}}"{{/if}} {{#if className}}class="{{className}}"{{/if}} {{#if width}}width="{{width}}"{{/if}}
+    {{#if height}}height="{{height}}"{{/if}}>
     <title>Queensland Government</title>
     <path d="M59.2787 21.2601C59.0853 21.3115 58.617 21.4554 58.3116 21.4965C58.8918 20.9209 59.2379 20.2219 59.2379 19.6463C58.9631 19.7388 58.4643 19.9238 58.0062 20.0266C58.9122 19.2454 59.4008 18.3511 59.187 17.1588C58.9122 17.3027 58.5152 17.5288 58.1284 17.6933C58.9224 16.4701 58.9122 15.3805 58.5865 14.7432C58.2302 15.0824 57.8026 15.473 57.3548 15.7505C57.65 14.332 57.6296 13.4172 57.0392 12.7696C56.4386 13.9209 55.9195 14.7637 55.0746 15.7814C55.1458 14.846 55.044 13.6742 54.4333 13.0574C54.4333 13.0574 54.2602 14.3629 53.8021 14.7843C53.6902 13.4994 53.3034 12.8005 52.7231 12.1118C52.7231 12.1118 52.6824 13.448 52.3261 14.2704C52.0208 13.1499 51.4507 12.2865 50.728 11.4642C50.7789 13.9311 50.0969 18.5773 48.1424 21.7021C47.9083 23.5523 47.7047 26.3482 44.7221 27.9928C44.2946 27.6844 43.5312 27.2938 42.4725 27.3555C42.1875 25.9576 43.9994 24.683 45.567 23.6756C47.1448 22.6477 47.837 21.774 47.7963 20.3966C47.7556 18.8959 46.7478 18.2792 45.7095 18.238C44.2437 18.1661 43.0425 19.5126 42.7575 20.078C42.33 20.2836 41.0779 20.6742 40.5588 20.8181C39.9887 20.9723 39.3372 21.2087 38.9301 21.5479C39.1744 21.7021 39.8564 21.7535 40.1312 21.7123C40.63 21.6404 42.218 21.3423 43.7347 21.1573C44.2946 21.4554 45.1802 21.9693 44.2335 22.6272C42.9408 23.4598 42.3809 23.6756 40.5588 24.6419C37.678 26.1631 38.6145 29.9972 39.3169 30.285C39.3169 31.5802 40.4672 33.9135 41.2408 34.7255C41.5869 36.3496 41.1288 38.7755 40.6402 39.7828C40.2432 38.796 39.5408 36.5141 39.0929 35.1778C39.5612 32.6492 38.8079 31.5391 38.2786 31.1176C37.7493 30.6756 36.9146 30.799 36.375 31.6727C37.2098 31.5802 37.4846 32.6595 37.4642 33.7696C37.4439 35.1059 37.108 36.1749 36.1816 36.1852C36.2529 37.3261 37.4744 37.6551 38.0852 37.1C38.1768 37.357 38.6654 38.8577 39.1337 40.194C39.4085 40.9855 39.6732 41.7153 39.8564 42.0956C40.0498 42.517 41.4546 42.589 41.6174 42.0956C41.8414 41.448 42.0144 40.9546 42.3707 40.194C42.6354 39.6184 43.012 38.8783 43.5719 37.7887C43.9485 38.4465 44.4575 39.4847 44.7425 40.194C44.8748 40.5126 44.9766 40.7799 44.9868 40.9032C45.0988 41.9928 45.0377 45.8577 44.7425 48.1705C41.5971 47.307 40.7115 48.8592 40.9863 50.0104C41.4444 49.5067 42.0246 49.5684 42.3911 49.8357C42.2994 50.6785 42.5336 51.2953 43.3886 51.5523C44.2946 49.1367 47.5317 49.6712 47.837 49.8768C47.8472 49.4142 48.2849 48.2527 46.6155 48.006C46.6766 45.9194 46.8903 43.3599 46.9718 42.8254C47.043 42.2909 47.1041 41.962 46.8496 41.1294C46.7784 40.8827 46.6868 40.5743 46.5951 40.2043C46.3814 39.3614 46.1574 38.2615 46.1371 37.0589C46.4221 37.3467 47.1143 37.5831 47.5927 37.47C47.9592 39.053 48.4885 38.5905 48.7634 39.2483C48.9059 39.5875 48.9364 39.9062 48.9771 40.194C49.0077 40.4715 49.0484 40.7079 49.2011 40.9135C50.3208 40.9443 51.2675 40.6771 51.9495 40.194C52.1633 40.0398 52.3363 39.8753 52.4992 39.6903C52.2243 38.0148 51.7561 37.1822 50.8908 36.1646C50.6669 34.7872 50.0256 33.5332 49.1604 32.4231C50.2597 32.0633 51.3693 31.1587 51.9597 30.542C52.489 30.5009 53.0896 30.0589 53.1303 29.1955C53.4357 29.1543 53.7004 29.1441 53.9345 29.0927C53.9039 28.8562 53.8429 28.4965 53.8123 28.2806C54.2195 28.2806 54.5961 28.2601 54.983 28.2292C54.871 27.9106 54.7285 27.5816 54.6165 27.3452C55.0237 27.3452 55.5225 27.3144 55.9296 27.2938C55.7159 26.8827 55.553 26.5332 55.4309 26.1734C55.8991 26.1323 56.6117 26.009 57.2021 25.8753C57.0087 25.6698 56.7949 25.4642 56.4793 25.1455C58.0164 24.683 58.6781 23.614 58.7595 23.1411C58.5356 23.1411 58.0673 23.2439 57.7925 23.2234C58.617 22.7094 59.1972 22.0104 59.2787 21.2601Z" />
     <path d="M37.8308 24.7343H28.3232H18.8055H18.4492V25.0941V31.9605C18.5408 32.0119 18.6223 32.0838 18.7139 32.1661V25.0427H37.9936V31.6624C38.0649 31.7343 38.126 31.8268 38.187 31.9502V25.1044V24.7446H37.8308V24.7343Z" />

package/dist/components/bs5/navbar/navbar.hbs

@@ -1,255 +1,75 @@
 <!-- QGDS Partial: Primary navigation -->
 
-<!-- Primary Navigation / Desktop -->
-<nav id="main-nav" class="navbar navbar-expand-lg" aria-label="Website navigation" role="navigation">
-    <div class="container navbar-contain">
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-            {{!-- Header for mobile navigation --}}
-            <div class="navbar__header">
-                <h3 class="navbar__heading">Menu</h3>
-                <button aria-controls="main-nav" class="navbar__toggle navbar__toggle--close" data-bs-toggle="collapse"
-                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Close menu">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
-                        <use href="{{metadata.options.icon-root}}#qld__icon__close"></use>
-                    </svg>
-                    <span class="navbar__toggle-text">Close</span>
-                </button>
+<nav id="main-nav" class="navbar navbar-expand-lg{{#if metadata.alternativeColor}} dark{{/if}}{{#if metadata.verticalOrientation}} vertical{{/if}}" aria-label="Website navigation" role="navigation">
+    <div id="navbarNav" class="container">
+            <div class="nav-header">
+                <span class="navbar-brand" href="#">{{#if metadata.navbarBrandName}}{{metadata.navbarBrandName}}{{/if}}</span>
+                <button id="burgerCloseBtn" type="button" class="navbar-btn" data-bs-toggle="collapse"
+                    aria-label="Close" data-bs-target="#main-nav" aria-expanded="false"
+                    aria-controls="collapseExample">Close</button>
             </div>
-            {{!-- End: Header for mobile navigation --}}
-
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <li class="nav-item nav-item-home">
-                    <a class="nav-link {{#if metadata.options.home-active}}nav-link-home-active{{/if}}"
-                        href="{{metadata.target_url}}" {{#if metadata.options.home-active}}aria-label="Home"{{/if}}>
-                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
-                            <use
-                                href="{{#if metadata.options.icon-root}}{{metadata.options.icon-root}}#qld__icon__home{{/if}}">
-                            </use>
-                        </svg>
-                        {{#if metadata.options.showHomeTitleSmallDevices}}
-                        <span class="home-label">Home</span>
-                        {{else}}
-                        <span class="visually-hidden">Home</span>
-                        {{/if}}
-                    </a>
-                </li>
-                {{#each navigation}}
-                {{#if dropdown_enabled}}
-                <li class="nav-item dropdown">
-                    <!-- Desktop primary dropdown style and behaviour -->
-                    <a class="nav-link dropdown-toggle desktop-only" href="{{target_url}}" id="menuDropdown"
-                        role="button" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false"
-                        aria-label="Toggle navigation">
-                        {{title}}
-                        <svg class="toggle_icon">
-                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
-                        </svg>
-                    </a>
-                    {{#if navigation_items}}
-                    <ul id="dropdown-menu" class="dropdown-menu" role="menu"
-                        data-bs-popper="none">
-                        <div class="row dropdown-menu__inner">
-                            {{#if dropdown_options}}
-                            <div class="col-12">
-                                <a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
-                                    <span class="">{{dropdown_options.feature_link_value}}</span>
-                                    <svg class="chevron__icon">
-                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
-                                    </svg>
-                                </a>
-                                {{#if dropdown_options.feature_link_description}}
-                                <p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}</p>
+            <div class="navbar-collapse">
+                <ul class="navbar-nav">
+                    {{#each navigation}}
+                        {{#if navigationItems}}
+                            <li class="nav-item dropdown{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
+                                <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}" aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                                {{#if iconName}}
+                                    <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
+                                    {{#if hideLabel}}
+                                        <span class="visually-hidden-lg">{{text}}</span>
+                                    {{else}}
+                                        {{text}}
+                                    {{/if}}
+                                {{else}}
+                                    {{text}}
                                 {{/if}}
-                                <hr>
-                            </div>
-                            {{/if}}
-                            {{#each navigation_items}}
-                            <li class="col-lg-4 col-sm-12">
-                                <a href="{{target_url}}" class="dropdown-item">
-                                    <span class="dropdown-item__text">{{title}}</span>
-                                    <svg class="chevron__icon">
-                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
-                                    </svg>
                                 </a>
-                                {{#if description}}
-                                <p class="dropdown-item__description">{{description}}</p>
-                                {{/if}}
-                            </li>
-                            {{/each }}
-                            {{#if dropdown_options.view_value}}
-                            <li class="col-12 text-end">
-                                <hr>
-                                <a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
-                                    <span>
-                                        {{dropdown_options.view_value}}
-                                        <svg class="chevron__icon">
-                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                            </use>
-                                        </svg>
-                                    </span>
-                                </a>
-                            </li>
-                            {{/if}}
-                        </div>
-                    </ul>
-                    {{/if}}
-                    <!-- Mobile only -->
-                    <div class="nav-item-group mobile-only">
-
-                        <!-- Primary dropdown style and behaviour -->
-                        <a class="nav-link first-element" href="{{target_url}}">
-                            {{title}}
-                        </a>
-
-                        <button class="dropdown-toggle second-element" id="menuDropdown" role="button" aria-controls=""
-                            data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
-                            aria-label="Toggle navigation">
-                            <svg class="toggle_icon">
-                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
-                            </svg>
-                            <span class="visually-hidden">Expand</span>
-                        </button>
-
-                        {{#if navigation_items}}
-                        <ul id="dropdown-menu" class="dropdown-menu" role="menu"
-                            data-bs-popper="none">
-                            <div class="row dropdown-menu__inner">
-                                {{#if dropdown_options}}
-                                <div class="col-12">
-                                    <a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
-                                        <span class="">{{dropdown_options.feature_link_value}}</span>
-                                        <svg class="chevron__icon">
-                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                            </use>
-                                        </svg>
-                                    </a>
-                                    {{#if dropdown_options.feature_link_description}}
-                                    <p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}
-                                    </p>
+                                <button class="nav-link dropdown-toggle" aria-current="page" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                    <span class="visually-hidden">Expand</span>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li>
+                                        <a class="dropdown-item parent-link" role="button" aria-controls aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{title}}{{/if}}</a>
+                                        {{#if dropdownOptions.description}}
+                                            <p>{{dropdownOptions.description}}</p>
+                                        {{/if}}
+                                    </li>
+                                    {{#each navigationItems}}
+                                        <li{{#if mobileOnly}} class="mobile-only"{{/if}}>
+                                            <a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
+                                            {{#if description}}
+                                                <p>{{description}}</p>
+                                            {{/if}}
+                                        </li>
+                                    {{/each}}
+                                    {{#if dropdownOptions.viewAllHref}}
+                                        <li>
+                                            <a class="dropdown-item view-all" href="{{dropdownOptions.viewAllHref}}">View all</a>
+                                        </li>
                                     {{/if}}
-                                    <hr>
-                                </div>
-                                {{/if}}
-                                {{#each navigation_items}}
-                                <li class="col-lg-4 col-sm-12">
-                                    <a href="{{target_url}}" class="dropdown-item">
-                                        {{title}}
-                                        <svg class="chevron__icon">
-                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                            </use>
-                                        </svg>
-                                    </a>
-                                    {{#if description}}
-                                    <p class="dropdown-item__description">{{description}}</p>
+                                </ul>
+                            </li>
+                        {{else}}
+                            <li class="nav-item{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
+                                <a class="nav-link" aria-current="page" href="{{url}}"{{#if target}}  target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
+                                {{#if iconName}}
+                                    <span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
+                                    {{#if hideLabel}}
+                                        <span class="visually-hidden-lg">{{text}}</span>
+                                    {{else}}
+                                        {{text}}
                                     {{/if}}
-                                </li>
-                                {{/each }}
-                                {{#if dropdown_options.view_value}}
-                                <li class="col-12 text-end">
-                                    <hr>
-                                    <a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
-                                        <span>
-                                            {{dropdown_options.view_value}}
-                                            <svg class="chevron__icon">
-                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                                </use>
-                                            </svg>
-                                        </span>
-                                    </a>
-                                </li>
+                                {{else}}
+                                    {{text}}
                                 {{/if}}
-                            </div>
-                        </ul>
+                                </a>
+                            </li>
                         {{/if}}
-                    </div>
-                </li>
-                {{else}}
-                <li class="nav-item">
-                    <a class="nav-link" href="{{target_url}}">{{title}}</a>
-                </li>
-                {{/if}}
-                {{/each }}
-                {{#each CTA}}
-                    <li class="nav-item dropdown CTA_feature">
-                        <!-- Mobile only -->
-                        <div class="nav-item-group mobile-only">
-
-                            <!-- Primary dropdown style and behaviour -->
-                            <a class="nav-link first-element" href="{{target_url}}">
-                                {{{label}}}
-                            </a>
-
-                            <button class="dropdown-toggle second-element" id="menuDropdown-{{id}}" role="button"
-                                aria-controls="" data-bs-toggle="dropdown" aria-expanded="false"
-                                aria-label="Toggle navigation">
-                                <svg class="toggle_icon">
-                                    <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
-                                </svg>
-                                <span class="visually-hidden">Expand</span>
-                            </button>
-
-                            {{#if dropdown_enabled}}
-                            <ul id="dropdown-menu-{{id}}" class="dropdown-menu"
-                                role="menu" data-bs-popper="none">
-                                <div class="row dropdown-menu__inner">
-                                    {{#if dropdown_options.dropdown_config.groups}}
-                                    <div class="col-12">
-                                        <a class="dropdown-menu__featured" href="{{dropdown_options.view_more_url}}">
-                                            <span class="">{{dropdown_options.view_more_label}}</span>
-                                            <svg class="chevron__icon">
-                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                                </use>
-                                            </svg>
-                                        </a>
-                                        <hr>
-                                    </div>
-                                    {{#each dropdown_options.dropdown_config.groups}}
-                                        {{#isType ../dropdown_options.dropdown_type "list"}}
-                                            <li class="col-lg-4 col-sm-12">
-                                                <a href="{{url}}" class="dropdown-item" target="{{action}}">
-                                                    {{label}}
-                                                    <svg class="chevron__icon">
-                                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                                        </use>
-                                                    </svg>
-                                                </a>
-                                            </li>
-                                        {{/isType}}
-                                        {{#isType ../dropdown_options.dropdown_type "form"}}
-                                            {{#if content}}
-                                                {{{content}}}
-                                            {{/if}}
-                                        {{/isType}}
-
-                                    {{/each }}
-                                    {{#if dropdown_options.dropdown_config.view_more}}
-                                    <li class="col-12 text-end">
-                                        <hr>
-                                        <a class="dropdown-menu__view_all"
-                                            href="{{dropdown_options.dropdown_config.view_more_options.url}}"
-                                            target="{{dropdown_options.dropdown_config.view_more_options.target}}">
-                                            <span>
-                                                {{dropdown_options.dropdown_config.view_more_options.label}}
-                                                <svg class="chevron__icon">
-                                                    <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
-                                                    </use>
-                                                </svg>
-                                            </span>
-                                        </a>
-                                    </li>
-                                    {{/if}}
-                                    {{/if}}
-                                </div>
-                            </ul>
-                            {{/if}}
-                        </div>
-                    </li>
-                {{/each}}
-            </ul>
+                    {{/each}}
+                </ul>
+            </div>
         </div>
-        <div id="overlay" class="navbar__overlay" aria-controls="main-nav"></div>
-    </div>
-</nav>
-<!-- MAIN NAVIGATION END -->
+        <div id="overlay"></div>
+</nav>

package/dist/components/bs5/pageLayout/templates/contentPageWithForm.hbs

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{title}}</title>
-    {{> head }}
 </head>
 
 <body>
@@ -18,44 +17,76 @@
     {{/if}}
 
     <main>
-        <div class="container-fluid">
-            <div class="container qld-content">
-                {{#if breadcrumbs}}
-                <div class="row">
-                    <div class="col-12">
-                        {{> breadcrumbs breadcrumbs}}
-                    </div>
+        <div class="container mt-40 mt-lg-64">
+            {{#if breadcrumbs}}
+            <div class="row">
+                <div class="col-12">
+                    {{> breadcrumbs breadcrumbs}}
+                </div>
+            </div>
+            {{/if}}
+
+            <div class="row">
+                {{#if sidenav}}
+                <!-- Side navigation Col -->
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                    {{> sidenav sidenav}}
                 </div>
                 {{/if}}
 
-                <div class="row">
-                    <div class="col-lg-8 mx-auto">
-                        <div class="content-section">
-                            {{{content}}}
+                <!-- Content Col -->
+                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
+
+                    <!-- Main Content Sections -->
+                    <div class="content-section mb-5 px-1 px-md-32">
+
+                        <h1 id="section-heading">Single page form (H1)</h1>
+                        <p>
+                            Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback is confidential.
+                        </p> 
+                        
+                        <h2 id="form-heading">Enquiry form (H2)</h2>
+
+                        {{#if inpageAlert}}
+                        <!-- Inpage Alert -->
+                        <div class="mb-32">
+                            {{> inpageAlert inpageAlert}}
+                        </div>
+                        {{/if}}
+
+                        <div class="mb-32">
+                            <p>Any information submitted using this form will be used in line with our privacy statement.</p>
+                            <p>Required fields are marked with an *</p>
                         </div>
 
                         {{#if form}}
                         <form class="qld-form mb-5">
-                            {{#each form.fields}}
-                            <div class="form-group mb-3">
+                            {{#each form.fields1}}
+                            <div class="form-group mb-32">
                                 {{#ifCond type '==' 'textbox'}}
                                 {{> textbox this}}
                                 {{else ifCond type '==' 'textarea'}}
                                 {{> textarea this}}
+                                {{else ifCond type '==' 'radio'}}
+                                {{> formcheck this}}
+                                {{/ifCond}}
+                            </div>
+                            {{/each}}
+
+                            <h3 id="form-heading">Contact details (H3)</h3>
+
+                            {{#each form.fields2}}
+                            <div class="form-group mb-32">
+                                {{#ifCond type '==' 'textbox'}}
+                                {{> textbox this}}
                                 {{else ifCond type '==' 'select'}}
                                 {{> select this}}
-                                {{else ifCond type '==' 'dateinput'}}
-                                {{> dateinput this}}
-                                {{else ifCond type '==' 'formcheck'}}
-                                {{> formcheck this}}
                                 {{else ifCond type '==' 'checkbox'}}
                                 {{> formcheck this}}
-                                {{else ifCond type '==' 'radio'}}
-                                {{> formcheck this}}
                                 {{/ifCond}}
                             </div>
                             {{/each}}
-
+                            
                             {{#if form.buttons}}
                             <div class="form-actions d-flex mt-5 gap-4">
                                 {{#each form.buttons}}
@@ -66,9 +97,9 @@
                         </form>
                         {{/if}}
 
-                        {{> contentFooter contentFooter}}
                     </div>
                 </div>
+                {{> contentFooter contentFooter}}
             </div>
         </div>
     </main>

package/dist/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{title}}</title>
-    {{> head }}
 </head>
 
 <body>
@@ -21,80 +20,101 @@
     {{/if}}
 
     <main>
-        <div class="container-fluid">
-            <div class="container qld-content">
-                {{#if breadcrumbs}}
-                <div class="row">
-                    <div class="col-12">
-                        <!-- breadcrumbs -->
-                        {{> breadcrumbs breadcrumbs}}
-                    </div>
+        <div class="container mt-40 mt-lg-64">
+            {{#if breadcrumbs}}
+            <div class="row">
+                <div class="col-12">
+                    <!-- breadcrumbs -->
+                    {{> breadcrumbs breadcrumbs}}
                 </div>
-                {{/if}}
-
-                <!-- Main Grid Layout: Side navigation and content -->
-                <div class="row">
-                    {{#if sidenav}}
-                    <!-- Side navigation Col -->
-                    <div class="col-lg-3 col-md-4 px-0">
-                        {{> sidenav sidenav}}
-                    </div>
-                    <!-- Content Col -->
-                    <div class="col-lg-8 col-md-7 ps-32">
-                        {{else}}
-                        <div class="col-12">
-                            {{/if}}
+            </div>
+            {{/if}}
+
+            <!-- Main Grid Layout: Side navigation and content -->
+            <div class="row">
+                {{#if sidenav}}
+                <!-- Side navigation Col -->
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                    {{> sidenav sidenav}}
+                </div>
+                <!-- Content Col -->
+                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
+                    {{else}}
+                    <div class="col-12">
+                        {{/if}}
 
-                            <!-- Main Content Sections -->
-                            <div class="content-section ps-32">
+                        <!-- Main Content Sections -->
+                        <div class="content-section mb-5 px-1 px-md-32">
 
-                                {{#if inpagenav}}
-                                <!-- inpagenav Section -->
-                                {{> inpagenav inpagenav}}
-                                {{/if}}
+                            {{#if inpagenav}}
+                            <!-- inpagenav Section -->
+                            {{> inpagenav inpagenav}}
+                            {{/if}}
 
-                                <h1 id="section-heading">Section heading (H1)</h1>
-                                <p>This is the main content area. It contains detailed information about the topic.</p>
+                            <h1 id="section-heading">Section heading (H1)</h1>
+                            <p>
+                                Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo. 
+                            </p> 
+                            <p>
+                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis. 
+                            </p>
+
+                            <h2 id="content-heading">Content heading (H2)</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                                incididunt ut labore et dolore magna aliqua.</p>
+
+                            {{#if calloutdata}}
+                            <!-- callout Section -->
+                            {{> callout calloutdata}}
+                            {{/if}}
 
-                                <h2 id="content-heading">Content heading (H2)</h2>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua.</p>
+                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+                            <p>Information about pre-registration inspection requirements.</p>
 
-                                <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                                <p>Information about pre-registration inspection requirements.</p>
+                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
+                            <p>Details about fees and charges for vehicle registration.</p>
 
-                                <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                                <p>Details about fees and charges for vehicle registration.</p>
+                        </div>
 
-                            </div>
+                        {{#if accordionItems}}
+                        <!-- accordion Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> accordion accordionItems}}
+                        </div>
+                        {{/if}} 
 
-                            {{#if image}}
-                            <!-- image Section -->
-                            <div class="my-4 ps-32">
-                                {{> image image}}
-                            </div>
-                            {{/if}}
+                        {{#if video}}
+                        <!-- video Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> video video}}
+                        </div>
+                        {{/if}}
 
-                            {{#if table}}
-                            <!-- table Section -->
-                            <div class="my-4 ps-32">
-                                {{> table table}}
-                            </div>
-                            {{/if}}
+                        <div class="my-5 p-1 p-md-32 bg-light">
+                            <h2 id="inspection">Section heading (H2)</h2>
+                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
+                                est.
+                                Tincidunt ultrices commodo vestibulum non netus. </p>
+                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
+                                condimentum adipiscing augue quisque eu.</p>
 
-                            {{#if video}}
-                            <!-- video Section -->
-                            <div class="my-4 ps-32">
-                                {{> video video}}
-                            </div>
-                            {{/if}}
+                            {{> callToAction callToAction}}
+                        </div>
 
-                            <!-- Content Footer -->
-                            {{> contentFooter contentFooter}}
+                        {{#if table}}
+                        <!-- table Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> table table}}
                         </div>
+                        {{/if}}
+
                     </div>
                 </div>
+
+                <!-- Content Footer -->
+                {{> contentFooter contentFooter}}
             </div>
+        </div>
     </main>
     <!-- Footer -->
     {{> footer footer}}