Callouts

DATE LIST

Example:

Code:

12345678910111213141516171819<aside class="side-callout island-callout">
	<div class="callout-inner">
		<header><h1>Important Dates</h1></header>
		<ul class="date-list">
			<li>
				<span>December 1st, 2015</span>
				<span>Application Deadline</span>
			</li>
			<li>
				<span>December 1st, 2015</span>
				<span>Application Deadline</span>
			</li>
			<li>
				<span>December 1st, 2015</span>
				<span>Application Deadline</span>
			</li>
		</ul>
	</div>
</aside>

CALL TO ACTION

Example:

Code:

1234567<aside class="side-callout button-cluster">
	<ul class="clean">
		<li><a href="/" alt="/" title="/"><button class="btn btn-full">Apply Now</button></a></li>
		<li><a href="/" alt="/" title="/"><button class="btn btn-full">Request Information</button></a></li>
		<li><a href="/" alt="/" title="/"><button class="btn btn-full">Information Sessions</button></a></li>
	</ul>
</aside>

IMAGE CALLOUT

Example:

Code:

12345678<aside class="side-callout image-callout">
	<div class="callout-inner">
		<img src="http://placehold.it/520x175">
		<header><h1>Image Callout</h1></header>
		<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		<a class="more-link" href="/" alt="/" title="/">Learn More</a>
	</div>
</aside>

NO IMAGE CALLOUT

Example:

Code:

1234567<aside class="side-callout image-callout island-callout">
	<div class="callout-inner">
		<header><h1>No Image Callout</h1></header>
		<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		<a class="more-link" href="/" alt="/" title="/">Learn More</a>
	</div>
</aside>

LINK LIST

Example: