Section

A container component for wrapping distinct sections of a page.

npm version

Source Code

npm install @vrembem/section
@use "@vrembem/section";

section

Sections are composed using the base wrapper (section) along with three optional elements. The section__container element’s primary purpose is to wrap content with a max-width and centered using margin auto. The other two element’s—section__background and section__screen (usually used together)—add a background image and colored screen that fills the full size of the section component.

  • section
    • section__container
    • section__background
    • section__screen

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.


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

Depending on contrast when using background and screen elements, it may be needed to invert the text color of the section content for readability.

section_size_[key]

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. These values are built using the $padding-scale map.

  • section_size_xs
  • section_size_sm
  • section_size_md
  • section_size_lg
  • section_size_xl
<section class="section section_size_xl">
  ...
</section>

Sass variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$max-width 70rem Sets the max-width property on the section container element.
$screen-opacity 0.7 Sets the opacity property on the section screen element.
$screen-background core.$night Sets the background-color property on the section screen element.
$padding Sass map ref ↓ Sets the default padding for the section component.
$padding-scale Sass map ref ↓ Used to build the size modifiers for the section component.

$padding

Sets the default padding for the section component. Each key in the map represents a breakpoint to apply the specified padding value. The base key is applied with no media query.

$padding: (
  'base': 1.5em,
  'md': 2em 1.5em,
  'lg': 3em 1.5em
) !default;

$padding-scale

Used to build the section_size_[key] modifier where each key represents a map of breakpoint and padding value pairs for the size key modifier. The base key is applied with no media query.

$padding-scale: (
  'xs': (
    'base': 0,
    'md': 0,
    'lg': 0
  ),
  'sm': (
    'base': 1em,
    'md': 1em,
    'lg': 1em
  ),
  'md': (
    'base': 1.5em,
    'md': 2em 1.5em,
    'lg': 3em 1.5em
  ),
  'lg': (
    'base': 1.5em,
    'md': 4em 1.5em,
    'lg': 6em 1.5em
  ),
  'xl': (
    'base': 3em 1.5em,
    'md': 8em 2em,
    'lg': 12em 2em
  )
) !default;