Skip to page content

Some of our template styles require the developer to assign class attributes to elements. After the appropriate value of the class attribute has been added, that element will receive styling instruction from the template's CSS. Though possibilities are endless for this system, we have tried to keep class usage to a minimum, as it requires more maintenance on your part (and ours).

Multiple class values can be combined where applicable. To combine class names, separate the names by a space and place them in the attribute's value. For example, the following code adds a pre-defined border to the image and floats it to the left.

<img class="border left" alt="alt text" src="path/to/image.png">

All class names are case-sensitive.

Not all of these classes apply to all elements — many of our template classes are specific to form, image, list, or table elements.

Form-specific classes

Form-specific classes
Class Name Applicable Elements Class Description
border fieldset Applies a thin gray border on the element.
caption p, span Style captioned text associated with a form control. The caption is typically placed below its associated control.
formRow div, fieldset Used to group together all labels, form controls, and other associated tags on each "row" of a form.
label span Used to place an imitation label to the left of radio buttons and checkboxes in a fieldset with class="optionGroup"
layout form Invokes alignment rules for labels and inputs.
noLabel div Used in conjunction with the formRow class, it aligns form controls correctly when no label is present. This is typically used for the row with the submit button.
optionGroup fieldset Used to align groups of radio buttons or checkboxes. <fieldset class="optionGroup"> is used instead of <div class="formRow">.
required span Renders the element's text color in dark red.
secondary button, input, label button, input: Unbolds the button (or input button). This is typically used to differentiate a secondary button (e.g.: a reset button) from the default submit button.
label: Slightly reduces the font size; unsets the width and text alignment. This is typically placed after its associated form control.
striped form Add an alternating background color to form elements with class="formRow"

See also: Form element

Image-specific classes

Image-specific classes
Class Name Class Description
border Applies a thin solid border around the image
left Floats the image to the left and adds an appropriate margin to separate it from surrounding elements or text
right Floats the image to the right and adds an appropriate margin to separate it from surrounding elements or text

See also: Image element

The join class reduces the predefined top margin of an element. Elements with predefined top margins include, but are not limited to <address>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ul>, <ol>, <dl>, <form>, and <table>. The resulting effect is that the element is "joined" with its preceding sibling element.

Use of the join class should be the exception, rather than the rule. The appearance and flow of paragraphs, headers, lists, etc. is designed to look best in its default state — without additional classes or styling.

Link-specific classes
Class Name Class Description
anchorDown Adds a downward-pointing arrow before the link to indicate that the link points to a page section below it.
anchorUp Adds an upward-pointing arrow before the link to indicate that the link points to a page section above it.

See also: Link element

List-specific classes

Class Name Available Elements Class Description
anchorDown ul Changes the list style on child list items to a downward-pointing arrow to indicate that the links point to page sections below the list.
anchorUp ul Changes the list style on child list items to a upward-pointing arrow to indicate that the links point to page sections above the list.
more li Formats "More »" links within their respective lists
oversized ol, ul Adds a top and bottom margin on list items

See also: List element

Code example

<h2 id="messageBoxSection">Message box</h2>

<h3>Default (<code>class="message-box"</code>)</h3>
<div class="message-box">
	<p>At some point in my life, I'd like to run afoul of international maritime conventions. But before that, I'd like to amass a large fortune.</p>
</div>

<h3>Failure (<code>class="message-box failure"</code>)</h3>
<div class="message-box failure" role="alert">
	<ul>
		<li>One of us has failed, or the internet just had a hiccup.</li>
		<li>I'm not angry, just disappointed.</li>
	</ul>
</div>

<h3>Info (<code>class="message-box info"</code>)</h3>
<aside class="message-box info">
	<ul>
		<li>All the text on this page is important, but this text is <em>especially</em> important.</li>
	</ul>
</aside>

<h3>Loading (<code>class="message-box loading"</code>)</h3>
<div class="message-box loading" role="status">
	<ul>
		<li>The computer is thinking really hard.</li>
		<li>Please stand by. Or remain sitting, if you prefer.</li>
	</ul>
</div>

<h3>Success (<code>class="message-box success"</code>)</h3>
<div class="message-box success" role="status">
	<ul>
		<li>You just succeeded in doing whatever it was you were trying to do.</li>
		<li>Smile for a moment as you reflect on your accomplishment.</li>
	</ul>
</div>

<h3>Warning (<code>class="message-box warning"</code>)</h3>
<div class="message-box warning" role="alert">
	<ul>
		<li>Please use discretion in your decision-making process.</li>
		<li>Ignore this warning at your peril.</li>
	</ul>
</div>

<h3>The close button</h3>

<p>If a close button does not already exist, one is appended automatically to the message box via JavaScript. To prevent JavaScript from adding a close button, add the class <code>noClose</code> to the message box. For example, <code>class="message-box noClose"</code></p>

<div class="message-box noClose">
	<p>This message box does not have a close button.</p>
</div>

<div class="message-box">
	<button type="button" class="close" aria-label="Close">&times;</button>
	<p>This message box has a preexisting close button.</p>
</div>

Code example

<h2 id="podSection">Pod (<code>class="pod"</code>)</h2>

<p>Pod classes (<code>class="pod"</code>, <code>class="pod alt"</code>, <code>class="pod alt2"</code>) provide a method for offsetting or visually differentiating small sections of content without necessarily conveying additional semantic meaning. They are particularly useful in the right sidebar.</p>

<div class="pod">
	<h2>Default color</h2>
	<div>
		<p>Pod content.</p>
	</div>
</div>

<div class="pod alt">
	<h2><a href="/">Alternate color</a></h2>
	<div>
		<p>Pod content.</p>
	</div>
</div>

<div class="pod alt2">
	<h2>Second alternate color</h2>
	<div>
		<p>Pod content.</p>
	</div>
</div>

The <small> element represents side comments such as small print.

Table-specific classes

Table-specific classes
Class Name Available Elements Class Description
centered table, tr, td, th Center-aligns text. Use with discretion.
header caption Displays the table's caption in a style resembling the default <thead> style.
left table, tr, td, th Left-aligns text. This is typically the default behavior of the table.
right table, tr, td, th Right-aligns text. Useful for cells containing only numbers.
strict table The table will ignore the contents of its cells when it computes the widths of its cells. Instead, it will follow the dimensions specified by the user. This behavior might result in a cell's contents overflowing its container.
striped table Applies an alternating background color to rows within <tbody>.

See also: Table element

Wrap three sibling <div> elements in a <div> with class="threeColumn".

Wrap two sibling <div> elements in a <div> with class="twoColumn". Alternatively, use our built-in plugin.

In the rare instances that this particular presentation of text is necessary, use this class rather than typing all-uppercase text into the source code.

Page last modified: April 14, 2020 11:57:46 AM EDT