Section

A container component for wrapping distinct sections of a page.

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;