Base Elements

Widgets

Components

Sections

Component Lists

Templates & Pages

Documentation for Utility Classes

AIChE Style Guide

Base Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Inline Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The bdo and bdi elements: Right to left text (in the markup it says "Right to left text")

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ruby element: 明日 (Ashita)

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example

Block Text Elements
Text in a div lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text in a div lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragragh lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veli esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another paragraph next to it liquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text in a <pre> tag. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.
Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Text wrapped in <pre> and <code>  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.
Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lists

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2
Buttons
Regular Button Secondary Button

<button> Buttons

<input type="submit"> Buttons

Avoid <input> buttons if possible, they are significantly less flexible than a <button>

Solid blue arrow Outline blue arrow
Outline blue arrow
Form Elements
Sed risus orci, auctor et dictum at, hendrerit eu augue.
Vivamus semper vehicula ante eget semper.
Morbi congue nulla vel tortor aliquet imperdiet.
Morbi vel dolor sit amet metus eleifend fringilla.
Nullam hendrerit, justo et iaculis tristique, ligula risus pretium erat, sed tempus lacus felis ut nulla.
Sed nec lacus sed nibh iaculis luctus.
Machine name: id_adipiscing_amet Edit
Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui.
Suspendisse sit amet sem id libero auctor pharetra sit amet ut dui.
Suspendisse potenti.
Quisque a velit diam.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nec urna ut lorem tempus aliquet eget nec lectus.
Pellentesque ac dictum ante.
Password strength:
Passwords match:
Nulla non nulla nec metus rhoncus congue.
Fieldset
Duis urna libero, tempus non mattis a, convallis ac erat.
Mauris eros quam, varius eget volutpat vel, tristique sed est.
Curabitur dapibus odio quis enim hendrerit eu placerat lorem accumsan.
Media elements

Inline image

Placeholder Image and Some Alt Text

Figure and Caption

A placeholder figure image.
A placeholder figure image.
The figcaption element example

The Audio Element:

The Video Element:

Embedded content:

YouTube video (iframe):

Table
This is a table caption
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
A row with a cell spanning all 3 columns
Table Footer 1 Table Footer 2 Table Footer 3