Headings

Body copy

<p>…</p>

Emphasis

Make use of HTML’s default emphasis tags with lightweight styles.

<small>

For de-emphasizing inline or blocks of text, use the small tag.

<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>

Bold

For emphasizing a snippet of text with a heavier font-weight.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

<em>rendered as italicized text</em>

Alignment classes

Easily realign text to components with text alignment classes.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Alert Box classes

Convey meaning through color with a handful of emphasis utility classes.

<p class="alert alert--success">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="alert alert--info"><h4>Alert Title</h4>Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="alert alert--warning"><h4>Alert Title</h4>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</div>
<div class="alert alert--danger"><h4>Alert Title</h4>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

<abbr>

For expanded text on long hover of an abbreviation, include the title attribute.

<abbr title="attribute">attr</abbr>

Addresses

Present contact information for the nearest ancestor or the entire body of work.

<address>

Preserve formatting by ending all lines with <br>.

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Pullquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

<div class="pullquote" aria-hidden="true">
	<p>…</p>
	<div class="pullquote__cite">&mdash; Dr. Marc Sweeney, dean, School of Pharmacy</div>
</div>

Lists

Unordered

A list of items in which the order does not explicitly matter.

<ul>
<li>…</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

<ol>
<li>…</li>
</ol>

Description

A list of terms with their associated descriptions.

<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

Buttons

To style a link as a button, apply a class of btn with a corresponding btn-- class.

<a class="btn btn--default">Default Button</>
<a class="btn btn--primary">Default Button</>
<a class="btn btn--secondary">Default Button</>
<a class="btn btn--hollow">Default Button</>
<a class="btn btn--primary-light">Default Button</>
<a class="btn btn--primary disabled">Default Button</>

Secondary Navigation

<ol class="secondary-nav">
	<li class="secondary-nav__active"><a href="#">Active Primary Link One</a></li>
	<li><a href="#">Primary Link Two</a></li>
	<ol>
		<li><a href="#">Secondary Link One</a></li>
		<li><a href="#">Secondary Link Two</a></li>
		<li><a href="#">Secondary Link Three</a></li>
		<li><a href="#">Secondary Link Four</a></li>
	</ol>
	<li><a href="#">Primary Link Three</a></li>
	<li><a href="#">Primary Link Four</a></li>
</ol>

Input Elements

Text Input

<label for="input-box">
    Input Box
    <input type="text" name="input-box" placeholder="Search for your program or interest area">
</label>

Number Input

<label>
    How many puppies?
    <input type="number" value="100">
</label>

Select Input

<label>
    Select Menu
    <select>
        <option value="husker">Husker</option>
        <option value="starbuck">Starbuck</option>
        <option value="hotdog">Hot Dog</option>
        <option value="apollo">Apollo</option>
    </select>
</label>

News List

Usage in Sitecore

Unsure at this time.

Usage in ColdFusion/HTML

    
<ul class="news-list">
	<li>
		<h3><a href="#">News Item</a></h3>
		<p>Description of news item...[<a href="#">more</a>]</p>
	</li>
	...
	<li class="more-link"><a href="#">More News</a> »</li>
</ul>
    

Events List

Usage in Sitecore

Add a “News Component”.

Usage in ColdFusion/HTML

    
<ul class="media-list media-list--event">
	<li class="media-list__item">
		<time class="media-list__date"><span class="media-list__month">Feb</span><span>16</span></time>
		<div class="media-list__content">
			<h3 class="media-list__title">Event 1</h3>
			<p class="media-list__preview">Brief event description here...</p>
		</div>
	</li>
</ul>
    

Twitter Feed

<cu:Twitter runat="server" ScreenName="[string]" NumTweets="[integer]"></cu:Twitter>

Tabs

Usage in Sitecore

Add a tabgroup subitem and include <cu:Tabs runat="server"></cu:Tabs> with an optional EnableHistory="true" parameter.

Accordion

    
<cu:Accordion runat="server"></cu:Accordion>
    

Page Title

Program Designators

Table

<table class="table table--condensed table--hover table--bordered table--striped">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		...
	</tbody>
</table>

Tag

Breadcrumbs

Cards

Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.

Learn More »

Frameless

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.

Learn More »

Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu condimentum sed.

Learn More »

Aaron Huffman, M.F.A.

Chair, Assistant Professor of Graphic Design

• TYL 127
• 937-766-3049
• Contact Aaron

History of Cedarville

In 1887, Cedarville College was established by five godly men who envisioned a college that would provide Christian higher education. Throughout its history, God has blessed Cedarville with incredible growth, from state-of-the-art facilities to professional programs, but one thing has remained the same. For 125-plus years, we have stood “For the World of God and the Testimony of Jesus Christ.

Learn More »

Info Graphic

Pullquote

Search Box

Search Results

Search Suggestions

Social Buttons

Video Thumbnail

Pagination