Page Alignment (Horizontal Spacing)<section>

basic full width section

 <section>
  <div class="section__inner">
    @Html.Kentico().WidgetZone()
  </div>
</section>

basic small full width section

 <section class="section--sm">
  <div class="section__inner">
    @Html.Kentico().WidgetZone()
  </div>
</section>

left rail area

main content area

 <section class="section--split">
  <div class="section__inner">
    <div class="section__rail">
      @Html.Kentico().WidgetZone()
    </div>
    <div class="section__main">
      @Html.Kentico().WidgetZone()
    </div>
  </div>
</section>

main content area

right rail area

 <section class="section--split">
  <div class="section__inner">
    <div class="section__main">
      @Html.Kentico().WidgetZone()
    </div>
    <div class="section__rail">
      @Html.Kentico().WidgetZone()
    </div>
  </div>
</section>

Composition Backgrounds <div class="composition composition--fill-***">

Composition Padding <div class="composition composition--padded[-***]">

Basic un-classed composition

 <div class="composition"> </div>

Composition with small padding

 <div class="composition composition--padded-sm"> </div>

Composition with standard padding

 <div class="composition composition--padded"> </div>

Composition with large padding

 <div class="composition composition--padded-lg"> </div>

Composition padding with flush top modifier

Can be used on small, standard, or large padding

 <div class="composition composition--padded composition--padded-flush-top"> </div>

Composition padding with flush bottom modifier

Can be used on small, standard, or large padding

 <div class="composition composition--padded composition--padded-flush-bottom"> </div>

Composition Margin <div class="composition composition--spaced[-***]">Margins are shown in orange for demonstration purposes

Basic un-classed composition

 <div class="composition"> </div>

Composition with small margins

 <div class="composition composition--spaced-sm"> </div>

Composition with standard margins

 <div class="composition composition--spaced"> </div>

Composition with large margins

 <div class="composition composition--spaced-lg"> </div>

Composition margins with flush top modifier

Can be used on small, standard, or large margins

 <div class="composition composition--spaced composition--spaced-flush-top"> </div>

Composition margins with flush bottom modifier

Can be used on small, standard, or large margins

 <div class="composition composition--spaced composition--spaced-flush-bottom"> </div>