Complex Components are described as such; An arrangement of components that give a module-like appearance.
 
This basically means you can make these modules using only the component build of brand.

- [Contact Banner](#contact-banner)
- [Tech List](#tech-list)
- [Content Intro](#content-intro)

## Contact Banner

A Contact Banner is simply a coloured section with a `heading-3` and a primary link.

```html
<section class="section section--green">
  <div class="col-md-6 offset-md-3">
    <h1 class="heading-2">A contact banner</h1>

    <a href="#" class="link-primary">Get in touch</a>
  </div>
</section>
```

## Tech List

Using a grid system inside of a coloured section, you can create this 'tech list' component.

```html
<section class="section section--blue">
      <div class="col-md-3">
          <header class="section__header">
              <h1 class="section__title">
                  Our Tech
              </h1>
          </header>
          <p class="section__header-text">
              This is our trusted Tech...
          </p>
      </div>
      <div class="col-md-9">
          <div class="row">
              <div class="col-md-4">
                  <h2 class="heading-3">
                      Languages
                  </h2>

                  <ul class="list--inline">
                      <li>
                          <i aria-hidden="true" class="and-icon-java icons--large"></i>
                          <span class="sr-only">java</span>
                      </li>
                      <li...>
                      <li...>
                  </ul>
              </div>
              <div class="col-md-4">
                  <h2 class="heading-3">
                      Frameworks
                  </h2>

                  <ul class="list--inline">
                      <li>
                          <i aria-hidden="true" class="and-icon-node icons--large"></i>
                          <span class="sr-only">node</span>
                      </li>
                      <li...>
                      <li...>
                  </ul>
              </div>
              <div class="col-md-4">
                  <h2 class="heading-3 white-content">
                      Tools
                  </h2>
                  <ul class="list--inline">
                      <li>
                          <i aria-hidden="true" class="and-icon-msqlserver icons--large"></i>
                          <span class="sr-only">msqlserver</span>
                      </li>
                      <li...>
                      <li...>
                  </ul>
              </div>
          </div>
          <div class="row">
              <div class="col">
                  <a href="/join-us/" class="link-primary">Join Our Team</a>
              </div>
          </div>
      </div>
</section>
```

## Content Intro

Content Intro is an offset section with a `heading-1`. The Design System states that if a Content Intro contains a link,
then the heading is coloured. This is achieved by applying a colour modifier matching that to the theme.

```html
<section class="section">
  <div class="col-md-6 offset-md-3">
    <h1 class="text-blue">Content Intro with link</h1>

    <p class="text-lead">
      You must set the colour manually of the theme of the page.
      Link will inherit page theme.
    </p>

    <p class="text-lead">
      We build and develop software products.
      We guide organisations on their digital transformation.
      We teach the skills needed for an internal digital capability.
    </p>

    <a href="#" class="link-primary">Learn more about us</a>
  </div>
</section>
```