Typography & Styling in Sitecore

Headings

All HTML headings, <h2> through <h6>, are available. <h1> is reserved for the page title. There should only be one .h1 per page. .h2 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Body copy

SMU's global default font-size is 13px, with a line-height of 18px. This is applied to the and all paragraphs. In addition, (paragraphs) receive a bottom margin of 12px by default.

A nationally ranked private university located near the heart of Dallas, SMU is a distinguished center for global research with a liberal arts tradition. SMU’s 11,000 diverse, high-achieving students come from all 50 states and 90 countries to take advantage of the University’s small classes, hands-on research opportunities, leadership development, community service, international study and innovative programs. The University offers a strong foundation in the humanities and sciences and undergraduate, graduate and professional degree programs through seven schools.

Now in its second century of achievement, SMU is increasingly recognized for the ways it supports students, faculty and alumni as they become ethical leaders in their professions and communities. The University’s  entrepreneurial spirit lives in people from every academic discipline who see opportunities to create something new in the world – and work hard to bring their innovations to life. SMU’s relationship with Dallas – the dynamic center of one of the nation’s fastest-growing regions – offers unique learning, research, social and career opportunities that provide a launch pad for our students, faculty and alumni to make a global impact. On the most beautiful college campus in the country, SMU Mustangs are energized by unbridled opportunities – from teaching, learning and research to creativity, performance and athletic endeavor.

SMU was founded by what is now The United Methodist Church, in partnership with civic leaders. The University is nonsectarian in its teaching and committed to academic freedom and open inquiry.

<p>...</p>

Lead body copy

Make an introduction paragraph stand out by adding .lead.

Southern Methodist University will create, expand, and impart knowledge through teaching, research, and service, shaping world changers who contribute to their communities and excel in their professions in a global society.

<p class="lead">...</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.

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>

<abbr class="initialism">

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Addresses

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

<address>

Preserve formatting by ending all lines with <br>.

SMU
PO Box 750100
Dallas, Texas 75275-0100
P: (214) 768-2000
Full Name
first.last@smu.edu 
<address>
  <strong>SMU</strong><br>
  PO Box 750100<br>
  Dallas, Texas 75275-0100<br>
  <abbr title="Phone">P:</abbr> (214) 768-2000
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:##"">first.last@smu.edu</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>.

The Library is the Heart of a University.

<blockquote>
  <p>The Library is the Heart of a University.</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>.

The Library is the Heart of a University.

Charles C. Selecman, President of SMU, 1940. 
<blockquote>
  <p>The Library is the Heart of a University.</p>
  <small>Charles C. Selecman, <cite title="Source Title">President of SMU, 1940.</cite></small>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

The Library is the Heart of a University.

Charles C. Selecman, President of SMU, 1940. 
<blockquote class="pull-right">
  ...
</blockquote>

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>

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

! Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.

Announcement

Alert Title: This is an example description of an announcement.

Usage in Sitecore

Select appropriate announcement item in current item template.

Usage in HTML

		<div class="alert alert-warning">
		<span class="badge badge-warning">Alert Title:</span>&nbsp; 
		<small>This is an example description of an announcement.</small>
		</div>

 

InfoBox

InfoBox Title

InfoBox Subheading

This is an example InfoBox description.

Usage in HTML

	<div class="well [well-right || well-left]">
		<h2>InfoBox Title</h2>
		<h3>InfoBox Subheading</h3>
		<p>This is an example InfoBox description.</p>
	</div>

Tabs

Tab 1
Tab 2
Tab 3

Usage in Sitecore

Select appropriate Tab Widget item in current Widgets folder.

Accordion

Accordion 1

Accordion 1 Text

Usage in Sitecore

Select appropriate Accordion Widget item in current Widgets folder