Base Elements

This page describes some of the basic HTML elements that appear in your iMIS site and that you can style within your theme. You can use this page to quickly test how these elements will look if you want to make any style changes. When working with styles, we recommend using an in-browser developer tool to help you inspect page elements to determine which CSS you may need to modify. Your browser’s development tools are normally accessible by right-clicking a page element and selecting Inspect Element.

Basic HTML Elements

Headings

Use heading tags <h1> through <h6> to structure the content of your web pages.

<h1>Heading 1</h1>

Paragraphs

Paragraphs are defined with the <p> tag.

<p>...</p>

Links

Links are defined with the <a> tag and have four states that you can style: link, visited, hover, and active.

<a href="#">Example link</a>

Images

Display images with the <img> tag.

<img src="/images/UploadedImages/cairnsnight.jpg" alt="Alternate text for the image">

Lists

Ordered lists start with the <ol> tag, and unordered lists start with the <ul> tag.

<ol>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
</ol>

<ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

Horizontal rule

Insert a horizontal rule with the <hr> tag when you need to separate content.

<hr />

Blockquotes

Use the <blockquote> tag to mark content as quoted from a source. You can also apply the .Quote class to a <blockquote> to highlight the text.

<blockquote>Nam feugiat tristique mauris...</blockquote>

<blockquote class="Quote"><p>Nam feugiat tristique mauris...</p></blockquote>

Buttons

Basic buttons

You can apply a standard button style to any element by using the .TextButton class. However, we recommend primarily using it with <a>, <button>, and <input type="button" />.

<!--Plain text button-->
<a href="#" class="TextButton">a.TextButton</a>                    
<button class="TextButton">button.TextButton</button>
<input type="button" value="input.TextButton" class="TextButton"/>

<!--Primary text button-->                    
<a href="#" class="TextButton PrimaryButton">a.TextButton.PrimaryButton</a>
<button class="TextButton PrimaryButton">button.TextButton.PrimaryButton</button>
<input type="button" value="input.TextButton.PrimaryButton" class="TextButton PrimaryButton"/>

<!--Disabled text button-->                    
<a href="#" class="TextButton" disabled="disabled" >a.TextButton disabled</a>
<button class="TextButton" disabled="disabled">button.TextButton disabled</button>
<input type="button" value="input.TextButton disabled" class="TextButton" disabled="disabled"/>

<!--Medium sized text button-->                    
<a href="#" class="TextButton MediumButton">a.TextButton.MediumButton</a>                  

<!--Large text button-->
<a href="#" class="TextButton LargeButton">a.TextButton.LargeButton</a>

User messages

Apply the following styles to convey messages of certain types to the user.

<p class="AsiInformation">AsiInformation: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiSuccess">AsiSuccess: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiWarning">AsiWarning: Donec luctus nibh sed augue tincidunt</p>
<p class="AsiError">AsiError: Donec luctus nibh sed augue tincidunt</p>

Emphasis classes

Callouts

To help focus attention on a particular area, apply the callout classes to any element using the .CalloutArea1 and .CalloutArea2 classes.

<p class="CalloutArea1">CalloutArea1: Lorem ipsum dolor sit amet... </p>
<p class="CalloutArea2">CalloutArea2: Lorem ipsum dolor sit amet... </p>

Featured link

Apply the .FeatureActionLink class to call attention to a link.

<a href="#" class="FeatureActionLink">Featured link</a>

Featured text

Apply the .FeatureText class to call attention to a section of content.

<p class="FeatureText">Nullam in vulputate odio...</p>