Jquery code on a computer screen

Sample Widgets

  1. Web Services Blog
  2. Employment
  3. Sample Widgets
  4. Sitecore Resources
  5. Training
  6. Contact Us
  7. Marketing and Communications
  8. MarCom Service Request

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

Body copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<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.

This line of text is meant to be treated as fine print.

<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.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>
Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

<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.

Alert Title

Etiam porta sem malesuada magna mollis euismod.

Alert Title

Donec ullamcorper nulla non metus auctor fringilla.

Alert Title

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Alert Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<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.

An abbreviation of the word attribute is attr.

<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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
<li>…</li>
</ul>

Ordered

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
<li>…</li>
</ol>

Description

A list of terms with their associated descriptions.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<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

  • Event 1

    Brief event description here...

  • Event 2

    Brief event description here...

  • Event 3

    Brief event description here...

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

Heads up! Twitter queries are cached for 15 minutes. Changes to this tag may not take effect immediately.

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

Tabs

TabContent1

Tab 1

TabContent2

Tab 2

TabContent3

Tab 3

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

This is a sample page title.

Program Designators

3 Year Option

This program has a 3-year option. View the Sample 3-Year Curriculum Plan.

3 Year Option

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<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

Default Primary Secondary Large

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.

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.

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.

Aaron Huffman

Aaron Huffman, M.F.A.

Chair, Assistant Professor of Graphic Design

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.

Info Graphic

Pullquote

Search Box

Search Results

  1. This is Cedarville University

    Media

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

  2. This is Cedarville University

    Page

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

  3. This is Cedarville University

    Academic Program

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Search Suggestions

Social Buttons

Video Thumbnail

Pagination