Skip to main content

Section

Sections offer a simple object to control common NYP Framework page sections with some helpful modifiers that don't rely on markup structure and can be easily updated with JavaScript if necessary.

Links:

Overview

The section object provides quick access to common margins and/or paddings used on site sections.

Modifiers Description
--first Removes the top margin and replaces it with padding.
--inset Removes the margin and replaces it with padding.
--flush Removes top margin or padding applied to the section.
--last Removes the bottom margin and replaces it with padding.
--xs (8px)
--sm (16px)
--md (24px)
--lg (32px)		 Shrinks the margin applied to the section

Examples

I am the first section. Padding at the top and margin at the bottom.
I am a section. Margins top and bottom.
I am an inset section. Padding top and bottom. Good for background colors.
I am a small section. 16px of margin top and bottom.
I am section with no top padding or margin
I am the last section. Margin at the top and padding at the bottom 
<section class="o-section o-section--first">
  <span>I am the first section. Padding at the top and margin at the bottom.</span>
</section>
<section class="o-section">
  <span>I am a section. Margins top and bottom.</span>
</section>
<section class="o-section o-section--inset">
  <span>I am an inset section. Padding top and bottom. Good for background colors.</span>
</section>
<section class="o-section o-section--sm">
  <span>I am a small section. 16px of margin top and bottom.</span>
</section>
<section class="o-section o-section--no-top">
  <span>I am section with no top padding or margin</span>
</section>
<section class="o-section o-section--last">
  <span>I am the last section. Margin at the top and padding at the bottom</span>
</section>