The .section is used to define a thematic grouping of content within a webpage, helping to organize the content into distinct sections

In Luxize, most .section are using ≶section> tag. In some part of the page, .section is using ≶asidegt; or just plain ≶divgt;. Depends on what is the context of the information presented.

Basic .section HTML code:

<section class="section">

  <div class="section-bg bg-body">
    <div class="bg position-relative h-100 bg-primary-subtle ">
      <img src="/path/to/image" class="bg-img invisible" alt="" loading="lazy">
    </div>
  </div>
  <!-- /.section-bg.bg-body -->

  <div class="section-inner container-xl">
    
    <header class="section-header row gx-6">
  
      <h2 class="section-title col-12 col-sm col-lg-auto mt-0 mb-2 d-flex align-items-center">Section Title</h2>

      <p class="section-subtitle lead text-body-secondary col-12 col-lg mt-0 mb-2 mb-lg-2 d-flex align-items-center">Section Tagline</p>

      <p class="section-more col-12 col-sm-auto mt-2 mt-sm-0 mb-2 ms-lg-auto d-flex align-items-center">
        <a href="/url/target" class="btn btn-link btn-hover-outline-primary fw-bold">
          <span>More Link<i class="bi bi-arrow-right"></i></span>
        </a>
      </p>

    </header>

  </div>
  <!-- /.section-inner container-xl -->
  
</section>

Section Options

1. data-bs-theme to set theme for the .section. If not specified will inherit theme from the parent. Available theme to choose: light, dark and inverse

   <section class="section" data-bs-theme="inverse">
     ...
   </section>

2. section--bg-pull-up to the background pulled up. To make only the top part of the background is being pull up, use section--bg-pull-up-t and section--bg-pull-up-b to make only the bottom part of the background is beiing pulled up.

   <section class="section section--bg-pull-up">
     ...
   </section>

3. section--bg-pull-down to the background pulled down. To make only the top part of the background is being pull down, use section--bg-pull-down-t and section--bg-pull-down-b to make only the bottom part of the background is beiing pulled down.

   <section class="section section--bg-pull-up">
     ...
   </section>

4. To adjust .section spacer, you can use these classnames

   • .section--spacer-y-0 to make the top and bottom spacing to 0 (none)
   • .section--spacer-t-0 to make the top spacing to 0 (none)
   • .section--spacer-b-0 to make the bottom spacing to 0 (none)
   • .section--spacer-y-sm to make the top and bottom spacing more compact than standard
   • .section--spacer-t-sm to make the top spacing more compact than standard
   • .section--spacer-b-sm to make the bottom spacing more compact than standard
   • .if-is-sticky--spacer-sm to make the bottom spacing more compact than standard if the section is sticky

   This will make the section have compact spacing

   <section class="section section--spacer-y-sm">
     ...
   </section>

5. Same with Masthead we can make the section sticky during scroll.

   <section class="section if-is-sticky--spacer-sm" data-spy="scroll" data-scroll="sticky">
     ...
   </section>

More About Section

• Integrating swiper to section
• Make Section sticky on scroll