Commons

Commons is the abstract base component behind every section in this library. It is never used as a sectionType of its own; instead every section manifest lists commons in its requires array and extends its fields ("$extends": ["commons"]), inheriting the universal section wrapper system:

Container: constrain a section to the content max width with inContainer
Spacing: remove default margins and padding per edge with noMargin / noPadding
Background: color, image, light/dark overlay screens, and dark-theme text
Animation: fade sections in on scroll with isAnimated

Because every section shares this wrapper, all sections have consistent, predictable spacing and background behavior, configured through the same containerFields object.

Configuration

Every section supports the common properties. They are configured on the section entry itself and through the containerFields object:

yaml

- sectionType: any-section
  containerTag: section # section, article, aside, or div
  classes: ''
  id: ''
  isDisabled: false
  containerFields:
    inContainer: true # constrain to container max width
    isAnimated: true # fade in on scroll
    noMargin:
      top: false
      bottom: false
    noPadding:
      top: false
      bottom: false
    background:
      isDark: false # use light text on dark background
      color: 'var(--color-background-light)'
      image: '/assets/images/sample12.jpg'
      imageScreen: 'none' # light, dark, none

Configuration Options

Section Properties

Property	Type	Required	Description
`containerTag`	string	No	HTML tag for the section wrapper: `section`, `article`, `aside`, or `div`
`classes`	string	No	Additional CSS classes for the wrapper
`id`	string	No	Section ID, usable as an anchor target
`isDisabled`	boolean	No	Excludes the section from the build when `true`

Container Fields

Property	Type	Required	Description
`inContainer`	boolean	No	Adds `.in-container` to constrain the section to the max content width
`isAnimated`	boolean	No	Adds `.is-animated` for the fade-in-on-scroll effect
`noMargin.top` / `noMargin.bottom`	boolean	No	Remove the default section margins per edge
`noPadding.top` / `noPadding.bottom`	boolean	No	Remove the default section padding per edge
`background.color`	string	No	Background color (any CSS color, design tokens recommended)
`background.image`	string	No	Background image URL, positioned behind the content
`background.imageScreen`	string	No	Overlay on the background image: `light`, `dark`, or `none`
`background.isDark`	boolean	No	Adds `.is-dark` so text renders in the light color scheme

Notes

Commons is marked abstract in its manifest: it contributes styles and fields but is not rendered as a section of its own
The commons CSS also provides the responsive content layout (the Every Layout switcher pattern), the .prose measure, and utility classes like .sr-only
Individual sections can override the layout threshold and gaps via the --threshold and --content-gap custom properties in their own CSS

Styling

The section rhythm every component inherits is exposed as component-scoped custom properties, declared on .section-wrapper with fallbacks into the global design tokens. Override the properties from lib/overrides/commons/commons.css, not the rules that consume them; because every section wrapper carries them, one override retunes the whole page rhythm.

Property	Default	Controls
`--commons-section-margin`	`var(--space-l-2xl)`	Vertical margin between sections
`--commons-section-padding`	`var(--space-s-l)`	Default section padding
`--commons-content-gap`	`var(--content-gap, 2rem)`	Gap in the content switcher layout
`--commons-max-width`	`var(--wrapper-max-width, 85rem)`	Max width of in-container sections