Commons

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

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

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

Configuration

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

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 markedabstractin 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.prosemeasure, and utility classes like.sr-only
Individual sections can override the layout threshold and gaps via the--thresholdand--content-gapcustom properties in their own CSS