Blocks

Blocks are used to stack content sections on a page and to center content horizontally.

All components and elements are placed within a block.

Blocks are always <div> elements. We are NOT using the <section> element as we are using implicit sectioning (i.e. sectioning based on heading hierarchy).

Block widths

There are 4 possible maximum widths of content within a block:

  Max width Modifier
Default 1280px  
Narrow 1024px ds-block--narrow
Wide 1600px ds-block--wide
Full width 100% ds-block--full-width

Block

ready 
<!-- standard block -->
<div class="ds-block">
        <!-- components go here -->
</div>

<!-- narrow block -->
<div class="ds-block ds-block--narrow">
        <!-- components go here -->
</div>

<!-- wide block -->
<div class="ds-block ds-block--wide">
        <!-- components go here -->
</div>

<!-- full width block -->
<div class="ds-block ds-block--full-width">
        <!-- components go here -->
</div>

Demo

ready

Coloured backgrounds being used here to show how blocks work.