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:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>

Paragraphs

Paragraphs are defined with a <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 an <a> tag and have four states that you can style:

  • Link
  • Visited
  • Hover
  • Active
Example link 
<a href="#">Example link</a>

Lists

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

  1. Ordered list item 1
  2. Ordered list item 2
<ol>
    <li>Ordered list item 1</li>
    <li>Ordered list item 2</li>
</ol>
  • Unordered list item
  • Unordered list item
<ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

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:

a.TextButton  

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

Color Swatches

  • bg-white
  • bg-grey
  • bg-grey-light
  • bg-black
  • bg-red 
  • bg-orange
  • bg-yellow
  • bg-green
  • bg-green-bright
  • bg-green-dark
  • bg-blue
  • bg-blue-bright
  • bg-purple

Styling with Color Classes

Background colors can be added to any element within the website. 

'bg-green' will result in the background color being set to green. Colors of any text elements on top of that background color are set automatically to the appropriate color to ensure the content is accessible and  readable.

Add the prefix 'row-" in front of a background color designation (e.g. 'row-bg-green') to designated the background color across the entire browser width.

Page Hero

Page heroes are used to introduce content on landing page and website sections.

Each hero section should contain introductory text, a photo, and can be set on any of the background colors available.

In addition to the background colors, an array of background textures is also available for adding design elements to the hero elements.

The page hero content should consist of two HTML Content iParts added to a single Content Zone within RiSE.

Styles are then applied to the Zone to achieve the desired look and feel of the hero element.

Intro text goes here. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. (50 words)

Page Hero Styling

The example page hero styling (above) includes the following classes added the Zone.

page-hero row-bg-red row-bg-lines-left

The class 'page-hero' is required for base styling of the hero elements.

The other classes alter the color and decoration of the element.

Background Patterns

Pattern Styles

There are four patterns available for backgrounds

  • dots
  • diagonal lines
  • vertical lines
  • squares

Pattern Positions

There are eight positions available for each of these patterns.

  • left
  • left-big (this covers most of the background, and is aligned left)
  • right
  • right-big (this covers most of the background, and is aligned right)
  • top-left
  • top-right
  • bottom-left
  • bottom-right

Combining Pattern Style and Pattern Position to Add Design Elements on Landing Pages.

Utilizing the available combinations of pattern and position, the following classes are available for adding design patterns to the background elements throughout the AAR website.

NOTE: Each of these can also use the 'row-' prefix to apply the pattern to the full-width background applied to the content row.
(e.g. row-bg-dots-left vs. bg-dots-left)

  • bg-dots-left
  • bg-dots-left-big
  • bg-dots-right
  • bg-dots-right-big
  • bg-dots-top-left
  • bg-dots-top-right
  • bg-dots-bottom-left
  • bg-dots-bottom-right
  • bg-diagonal-lines-left
  • bg-diagonal-lines-left-big
  • bg-diagonal-lines-right
  • bg-diagonal-lines-right-big
  • bg-diagonal-lines-top-left
  • bg-diagonal-lines-top-right
  • bg-diagonal-lines-bottom-left
  • bg-diagonal-lines-bottom-right
  • bg-vertical-lines-left
  • bg-vertical-lines-left-big
  • bg-vertical-lines-right
  • bg-vertical-lines-right-big
  • bg-vertical-lines-top-left
  • bg-vertical-lines-top-right
  • bg-vertical-lines-bottom-left
  • bg-vertical-lines-bottom-right
  • bg-squares-left
  • bg-squares-left-big
  • bg-squares-right
  • bg-squares-right-big
  • bg-squares-top-left
  • bg-squares-top-right
  • bg-squares-bottom-left
  • bg-squares-bottom-right