Base elements

This page describes some of the basic HTML elements available in your iMIS site. You can style these HTML elements within your theme. When working with styles, it is recommended that you use an in-browser developer tool to help you inspect page elements to determine which CSS you might need to modify. Your browser’s development tools are normally accessible by right-clicking a page element and selecting Inspect.

Basic HTML elements

The following are the basic HTML elements included with iMIS:

Headings

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

<h1>Heading 1</h1>

Paragraphs

Paragraphs are defined with a <p> tag.

<p>...</p>

Links

Links are defined with an <a> tag and have four states that you can style:

• Link
• Visited
• Hover
• Active

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

Images

Display images with an <img> tag:

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

Use utility classes img-thumb-32, img-thumb-40, img-thumb-50, img-thumb-64, img-thumb-128 or img-thumb-200 to display an appropriately-sized thumbnail image.

<img alt="" src="/assets/images/default/person.png" class="img-thumb-32" />
<img alt="" src="/assets/images/default/person.png" class="img-thumb-40" />
<img alt="" src="/assets/images/default/person.png" class="img-thumb-50" />
<img alt="" src="/assets/images/default/person.png" class="img-thumb-64" />
<img alt="" src="/assets/images/default/person.png" class="img-thumb-128" />
<img alt="" src="/assets/images/default/person.png" class="img-thumb-200" />

Lists

Ordered lists begin with an <ol> tag; unordered lists begin with a <ul> tag:

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

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

Horizontal rule

Insert a horizontal rule with an <hr> tag when you want to separate content:

<hr />

Blockquotes

Use a <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

You can apply a standard button style to any element by using the .TextButton class. However, it is recommended to use the .TextButton class primarily with the <a>, <button>, and <input type="button" /> tags. Use the class .LinkButton to style any button like a link.

<!--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"/>

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

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

<!--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"/>

<!--Small sized text button-->                    
<button class="TextButton SmallButton">button.TextButton.SmallButton</button>  

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

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

<!--Link button-->
<button class="TextButton LinkButton">button.TextButton.LinkButton</button>

User messages

Apply the following styles to convey messages to users:

<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

The following emphasis classes are included with iMIS:

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>