NYU Libraries logo

Block heading

This block spans the entire width 
<div class="block">
  <h2 class="heading--block">Block heading</h2>
  This block spans the entire width
</div>

Flex block

This row detects how many columns to span using Javascript.

Flex block

This row detects how many columns to span using Javascript. 
<div class="flex-blocks">
  <div class="block">
    <h2 class="heading--block">Flex block</h2>
    This row detects how many columns to span using Javascript.
  </div>
  <div class="block">
    <h2 class="heading--block">Flex block</h2>
    This row detects how many columns to span using Javascript.
  </div>
</div>

block--50

This block spans 50% of its parent.

block--50

This block spans 50% of its parent. 
<div class="block--container">
  <div class="block block--50">
    <h2 class="heading--block">block--50</h2>
    This block spans 50% of its parent.
  </div>

  <div class="block block--50">
    <h2 class="heading--block">block--50</h2>
    This block spans 50% of its parent.
  </div>
</div>

block--33

This block spans 33% of its parent.

block--33

This block spans 33% of its parent.

block--33

This block spans 33% of its parent. 
<div class="block--container">
  <div class="block block--33">
    <h2 class="heading--block">block--33</h2>
    This block spans 33% of its parent.
  </div>

  <div class="block block--33">
    <h2 class="heading--block">block--33</h2>
    This block spans 33% of its parent.
  </div>

  <div class="block block--33">
    <h2 class="heading--block">block--33</h2>
    This block spans 33% of its parent.
  </div>
</div>

block--25

This block spans 25% of its parent.

block--25

This block spans 25% of its parent.

block--25

This block spans 25% of its parent.

block--25

This block spans 25% of its parent. 
<div class="block--container">
  <div class="block block--25">
    <h2 class="heading--block">block--25</h2>
    This block spans 25% of its parent.
  </div>

  <div class="block block--25">
    <h2 class="heading--block">block--25</h2>
    This block spans 25% of its parent.
  </div>

  <div class="block block--25">
    <h2 class="heading--block">block--25</h2>
    This block spans 25% of its parent.
  </div>

  <div class="block block--25">
    <h2 class="heading--block">block--25</h2>
    This block spans 25% of its parent.
  </div>
</div>
Back to Style Guide