For a complicated page - like a user guide or technical reference
Alternatively, a simpler page may only need a simple TOC:
Choose one (or neither) ...
subtitles are used as the first paragraph under a main heading - if at all
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
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
<code>
to show short pieces of code (will fit in ascrolling box)<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 Content
... etc ...
Lists are used to display single level outlines that benefit from a "topic and discussion" type of display.
discussion
Lists can have sections in them as well...