Buttons are created by either using the .button class, button element, or submit input. Use the .button--large modifier to use a bigger button style.
<a class="button">Button</a>
<a class="button button--large">Button</a>
.button--grey modifier.<a class="button button--grey">Button</a>
<a class="button button--large button--grey">Button</a>
.button--ghost modifier.<a class="button button--ghost">Button</a>
<a class="button button--ghost button--grey">Button</a>
This is the default markup and styling for a generic section of content. It usually consists of:
This is a paragraph in a block of content.
Find out more<section class="content-block">
<h3 class="content-block__title">Section Title</h3>
<p>This is a paragraph in a block of content.</p>
<a href="#" class="button button--ghost button--flat">Find out more</a>
</section>
<div class="dropdown dropdown-custom">
<span class="dropdown-custom__view">Month</span>
<div class="dropdown-custom__container">
<div>
<a>January</a>
<a>February</a>
<a>March</a>
<a>April</a>
</div>
</div>
</div>
This is the default hero with just a title, hero's can also contain:
<section class="hero">
<div class="wrapper">
<div class="hero__content">
<h1>We are <span class="is-grey">The Idea Bureau</span></h1>
</div>
</div>
</section>
The slim variation has reduced padding top and bottom.
<section class="hero hero--slim">
<div class="wrapper">
<div class="hero__content">
<h1>We are <span class="is-grey">The Idea Bureau</span></h1>
</div>
</div>
</section>
This hero includes a paragraph and some buttons.
<section class="hero hero--slim">
<div class="wrapper">
<div class="hero__content">
<h1>We are <span class="is-grey">The Idea Bureau</span></h1>
<p>Want to find out more?</p>
<a class="button">Our People</a>
<a class="button button--ghost">Contact us</a>
</div>
</div>
</section>
This component contains an image with some text overlayed and is normally half of a row.
The quick fox jumps over the lazy lorem ipsum
<section class="image-block" style="background-image: url(http://unsplash.it/g/818/261?blur)">
<h3>Section Title</h3>
<p>The quick fox jumps over the lazy lorem ipsum</p>
</section>
This component contains a newsletter signup and is normally half of a row.
<section class="newsletter-block">
<h3>Want to keep up to date?</h3>
<p>Get involved with our private mailing list.</p>
<form class="flex-input">
<input type="email" placeholder="Email">
<button type="submit">Join</button>
</form>
</section>
This is the default card object that links to a news post.
<article class="post-card">
<a class="post-card__link">
<h2 class="post-card__title">This is a post object</h2>
<time class="post-card__date">10th February 2016</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis at unde libero voluptate quia repudiandae consectetur possimus sit blanditiis harum! Ad, consequuntur fuga itaque natus tenetur omnis, obcaecati dolores aliquam…</p>
<span class="post-object__more">Read more</span>
</a>
</article>
This is a card that's used to act as a call-to-action for the services offered, it consists of:
<div class="service-card">
<img class="service-card__icon" src="http://placehold.it/100" />
<h3 class="service-card__title">We Offer This</h3>
<p class="service-card__copy">Do you want to know more?</p>
<a class="button button--green button--ghost">Find out more</a>
</div>
