Flex Input

Default Styling

This allows you to have a button in the same row as its input field.

<form class="flex-input">
    <input type="text" placeholder="text" />
    <button>Submit</button>
</form>

Footer

<footer class="site-footer">

    <div class="wrapper wrapper--padded">

        <section class="row">

            <div class="col S-all M-4">

                <h6 class="is-grey is-uppercase">Address</h6>

                <address class="site-footer__address">
                    <ul class="is-plain">
                        <li>Number 4</li>
                        <li>The Crescent</li>
                        <li>Taunton</li>
                        <li>TA1 4EA</li>
                    </ul>
                </address>

                <ul class="is-plain">
                    <li>Email: <a href="mailto:hello@theideabureau.co">hello@theideabureau.co</a></li>
                </ul>

            </div>

            <div class="site-footer__colophon / col S-hide M-all">
                <span>&copy; 2016 The Idea Bureau. All rights reserved.</span>
                <span class="pull-right">Designed and Built by <a href="https://theideabureau.co">The Idea Bureau</a></span>
            </div>

        </section>

    </div>

</footer>

Hamburger

The hamburger animates on click to a cross. It is used to show the menu on smaller screens. Here we're using the .hamburger--demo class for presentation purposes only.

<div class="hamburger hamburger--demo">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>
<div class="menu-active">
    <div class="hamburger hamburger--demo">
        <div class="hamburger-box">
            <div class="hamburger-inner"></div>
        </div>
    </div>
</div>

Header

This is a presentation preview of the main header, the style changes slightly at the different breakpoints, and when the page is scrolled.

<header class="site-header__container">

    <div class="wrapper wrapper--padded">

        <div class="site-header">

            <div class="site-header__logo">
                <a href="/">
                    <img class="logo logo--desktop" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                    <img class="logo logo--desktop logo--desktop-scrolled" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                    <img class="logo logo--mobile" src="../../../aigis_assets/images/bureau-crest-with-text.svg">
                </a>
            </div>

            <nav class="site-nav__container">

                <ul class="nav / site-nav">

                    <li>
                        <a href="#">About</a>
                    </li>

                    <li>
                        <a href="#">Our Work</a>
                    </li>

                    <li>
                        <a href="#">Our People</a>
                    </li>

                    <li>
                        <a href="#">Contact</a>
                    </li>

                </ul> <!-- / .site-nav -->

            </nav> <!-- / .site-nav__container -->

        </div>

        <div class="hamburger">
            <div class="hamburger-box">
                <div class="hamburger-inner"></div>
            </div>
        </div>

    </div>

</header>

Media Object

This object is used with other objects to create floated elements. Read more about it.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.

<section class="media">
    <div class="media__object">
        <img src="http://placehold.it/76x63" alt="" />
    </div>
    <div class="media__body">
        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    </div>
</section>