Section

A container component for wrapping distinct sections of a page.

npm version

npm install @vrembem/section
@import "@vrembem/section/index";

section

Huge section with a screen & background image

This is a demonstration of section area using the intro element along with a screen and background image. The screen color is set using the background modifiers and can be changed as needed.


<div class="section section_size_xl">
  <div class="section__container container">
    <div class="section__intro">
      ...
    </div>
  </div>
  <img class="section__background" src="..." />
  <div class="section__screen"></div>
</div>

section_size_[type]

Sections have a few size modifier options to help adjust the space that is used based on how prominent the section needs to be. These are optimized for all screen sizes to avoid oversized areas on mobile:

  • section_size_xs
  • section_size_sm
  • section_size_md
  • section_size_xl
  • section_size_lg

<div class="section section_size_xs">
  ...
</div>

<div class="section section_size_sm">
...
</div>

<div class="section section_size_md">
...
</div>

<div class="section section_size_lg">
...
</div>

<div class="section section_size_xl">
...
</div>