The Section module is the backbone of Brand. Each piece of content should be separated by a section. Logic hierarchy and
document outline is enforced by the use of the Section module.

Each section is separated by `48px` and is defined by the `.section` class on the root of the module. The design system will
dictate that section content should start with an offset to the left of the page, achieved with Bootstraps grid but there 
are exceptions!

```html
<section class="section">
    ...
</section>
```

## With offset

The section class extends `.row` so you can place grid columns as a child of the section.

```html
<section class="section">
  <div class="col-md-6 offset-md-3">
      ...
  </div>
</section>
```

## Section Header

The Sections are clearly defined by their headers. The offset achieved on basic sections is where this header will go. 
Again, achieved by a grid system. This title is designed to be a `h2` or `heading-2` but the module will take care of that.

```html
<section class="section">
    <div class="section__header">
        <header class="section__header">
            <h1 class="section__title">Title</h1>
        </header>

        <p class="section__header-text">Section text</p>
    </div>
    <div class="section__body">
        ...
    </div>
</section>
```

## Theme

If you want to theme a section, and by that we mean 'colour all the links and theme-specific elements different to that of
the page' (The home page is a good example where this comes in handy), then you can theme a section very simply.

```html
<section class="section red-theme">
    ...
</section>
```

## Coloured Section

As you can see, sections can be filled with just about anything! Adding a 
colour modifier means you can colour the entire background but certain other stylings are affected such as padding. These
also override the pages '[theme](https://github.com/fakesamgregory/brAND/wiki/theming)' colour.

```html
<section class="section section--red">
    ....
</section>
``` 

## Section Image

Featuring an image can be achieved with this variation. The module is essentially a 50/50 split of content and image.
The image is a background image so is purely decorative.

```html
<section class="section section--pink section--image">
    <div class="section__text">
        ...
    </div>
    <div class="section__image" style="background-image: url(...)"></div>
</section>
```

## Full width

Some sections need to occupy the 'rest' of the page, you can add the modifier 'full-width' for this.

```html
<section class="section">
    <div class="section__header">
        ...
    </div>
    <div class="section__body section__body--full-width">
        ...
    </div>
</section>
```

### Important
Not all components are supported inside of these coloured, themed or 'imaged' versions of the section, so be warned!