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.
Headings
Use heading tags <h1> through <h6> to structure the content of your web pages.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
Paragraphs
Paragraphs are defined with the <p> tag.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ut volutpat dui. Donec dapibus eu magna eu tristique.
Nam varius purus mauris, at suscipit ipsum imperdiet sit amet. Nulla interdum purus dui, id venenatis elit tristique in. Sed rhoncus convallis ipsum, id pretium enim imperdiet eu. Aliquam pretium euismod eros vitae dapibus. Donec a mi rutrum, ullamcorper velit in, commodo ipsum.
<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.
- Ordered list item
- Ordered list item
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
- Unordered list item
- Unordered list item
<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.
Nam feugiat tristique mauris, et interdum libero tempor vitae. Nulla vulputate porttitor mauris, in commodo sapien lobortis et. Nam quis tristique leo, in scelerisque justo. Proin commodo enim vel ante porttitor tincidunt.
<blockquote>Nam feugiat tristique mauris...</blockquote>
Nam feugiat tristique mauris, et interdum libero tempor vitae. Nulla vulputate porttitor mauris, in commodo sapien lobortis et. Nam quis tristique leo, in scelerisque justo. Proin commodo enim vel ante porttitor tincidunt.
<blockquote class="Quote"><p>Nam feugiat tristique mauris...</p></blockquote>
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>
Apply the following styles to convey messages of certain types to the user.
AsiInformation: Donec luctus nibh sed augue tincidunt
AsiSuccess: Donec luctus nibh sed augue tincidunt
AsiWarning: Donec luctus nibh sed augue tincidunt
AsiError: Donec luctus nibh sed augue tincidunt
<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>
Callouts
To help focus attention on a particular area, apply the callout classes to any element using the .CalloutArea1 and .CalloutArea2 classes.
CalloutArea1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus.
CalloutArea2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis odio quis ligula commodo lobortis. Pellentesque habitant morbi tristique senectus.
<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.
Nullam in vulputate odio. Sed id urna vulputate, porta orci et, luctus mi. In dapibus dui non nibh porta mollis ac quis libero. Nunc eget quam hendrerit neque malesuada semper sed sed ante.
<p class="FeatureText">Nullam in vulputate odio...</p>