General Content

Header style number one

Temporibus tenetur unde aut quasi aliquid quas impedit possimus voluptatum inventore delectus ratione, nobis ullam modi quia molestias.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas, officiis nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur. Consectetur ipsum, adipisci repellendus nobis velit!

Button Button Two Button Extended
i General Content

Markup

<div class="card general-content">

	<div class="copy-wrap">

		<h1>Header style number one</h1>

		<p class="support-text">Temporibus tenetur unde aut quasi aliquid quas impedit possimus voluptatum inventore delectus ratione, nobis ullam modi quia molestias.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas, officiis nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur. Consectetur ipsum, adipisci repellendus nobis velit!</p>

		<a href="#" class="button-link button-link-default">Button</a>
		<a href="#" class="button-link button-link-default alt">Button Two</a>
		<a href="#" class="button-link button-link-ext">
			Button Extended
			<i class="icon icon-arrow">
	            <svg><use xlink:href="img/spritemap.svg#icon-arrow-right"></use><svg>
	        </i>
		</a>

	</div>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=general-content" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">General Content</span>
	</a>
	<!-- Do not implement this link -->

</div>

Used on any landing page to display introductory content.

Varients: 1-3 Call to Action buttons possible

When including buttons there are several varients using modifier classes. The default class to apply to the link is "btn". This will give you the basic button styles of a plain grey button. By adding "btn-default" it will give you a outlined button with a white background and red background on hover. By adding "btn-default" and "alt" it will style the button with a outline, red background and a white background on hover. By adding the "btn-ext" class and the arrow icon markup will give you the wider extended button with an arrow on the right. By adding the "no-styles" and specifying the color by class such as adding "red" it will give you the "inline button" style look with a caret to the right.