Skip to main content

Skip to main content

Optional Teaser

A teaser is some text on the top of a page that describes something interesting - maybe a What's New item or other important anouncement dealt with in detail later on on this page...

Check out the CSS examples page for more markup examples

Optional Table of Contents

For a complicated page - like a user guide or technical reference

TOC entry 1
TOC entry 2
Some descriptive info about this TOC entry
TOC entry 3
  1. a list of sub items
  2. a list of sub items
  3. a list of sub items
  4. a list of sub items
TOC entry 4
Some info about this TOC entry

Alternatively, a simpler page may only need a simple TOC:

Choose one (or neither) ...

Page Title repeated here, start with h1

subtitles are used as the first paragraph under a main heading - if at all

flex-item-50 text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

Random text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

flex-item-50 text Random text Random text Random text Random text

Examples

flex-item-70 text Random text Random text Random text Random text

flex-item-70 text Random text Random text Random text Random text

flex-item-70 text Random text Random text Random text Random text

flex-item-70 text Random text Random text Random text Random text

JMRI site viewed on iphone
code:
Use the tag <code> to show short pieces of code (will fit in a scrolling box)
Use the tag <code class="block"> to show multi-line code (it will display every whitespace in those lines, so start at the left margin): 

// Get the navbar
var navbar = document.getElementById("mainNav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    mainNav.classList.add("sticky")
  } else {
    mainNav.classList.remove("sticky");
  }
}

mice text is for editorial comments and the like

Remarks get stuff before and after.

Notes get a "Note:" prepended.

h3 Section Title

h3 Content

... etc ...

h4 Section Title

h5 Section Title

List header

Lists are used to display single level outlines that benefit from a "topic and discussion" type of display.

Topic

discussion

Topic

Lists can have sections in them as well...

Section Title

H1 Content

Section Title

h2 Content

Section Title

h3 Content ... etc ...