Text

<div class="ds-block">

    <h1>This is a heading 1 &lt;h1&gt;</h1>
    <h2>This is a heading 2 &lt;h2&gt;</h2>
    <h3>This is a heading 3 &lt;h3&gt;</h3>
    <h4>This is a heading 4 &lt;h4&gt;</h4>
    <h5>This is a heading 5 &lt;h5&gt;</h5>
    <h6>This is a heading 6 &lt;h6&gt;</h6>

</div>

<div class="ds-block">

    <p>This is a <strong>paragraph</strong> &lt;p&gt;. The quick brown fox jumps over the lazy dog. Here is <a href="https://google.com">a link</a> in the middle. I watched the storm, so beautiful yet terrific.</p>

</div>

<div class="ds-block">

    <p class="ds-small">This is a <strong>small paragraph</strong> &lt;p&gt;. The quick brown fox jumps over the lazy dog. Here is <a href="https://google.com">a link</a> in the middle. I watched the storm, so beautiful yet terrific.</p>

    <!-- small tag also works -->
    <p><small>This is a <strong>small paragraph</strong> &lt;p&gt;. The quick brown fox jumps over the lazy dog. Here is <a href="https://google.com">a link</a> in the middle. I watched the storm, so beautiful yet terrific.</small></p>

</div>

<div class="ds-block">

    <p class="ds-lead">This is a <strong>lead paragraph</strong> &lt;p&gt;. The quick brown fox jumps over the lazy dog. Here is <a href="https://google.com">a link</a> in the middle. I watched the storm, so beautiful yet terrific.</p>

</div>

<div class="ds-block">

  <dl title="Nautical terms">
    <dt>Knot</dt>
    <dd>
      <p>A <em>knot</em> is a unit of speed equaling 1 
      nautical mile per hour (1.15 miles per hour or 1.852 
      kilometers per hour).</p>
    </dd>
    <dt>Port</dt>
    <dd>
      <p><em>Port</em> is the nautical term (used on 
      boats and ships) that refers to the left side
      of a ship, as perceived by a person facing towards 
      the bow (the front of the vessel).</p>
    </dd>
    <dt>Starboard</dt>
    <dd>
      <p><em>Starboard</em> is the nautical term (used 
      on boats and ships) that refers to the right 
      side of a vessel, as perceived by a person 
      facing towards the bow (the front of the vessel).</p>
    </dd>
  </dl>

</div>

<div class="ds-block">

    <hr>

</div>

<div class="ds-block">

    <p><a href="https://www.example.org">External link (to non latrobe.edu.au site)</a> has external-link icon automatically appended</a></p>

    <p><a href="https://latrobe.edu.au">Internal link (latrobe.edu.au)</a> - <a href="https://wwww.latrobe.edu.au">Internal link (www.latrobe.edu.au)</a></p>

    <p>Strong is used to indicate strong importance <strong>visually and aurally</strong>.</p>

    <p>Emphasis is used to give text emphasis <em>visually and aurally</em>.</p>

    <p>Subscript for things like H<sub>2</sub>O</p>

    <p>Superscript for things like Nike<sup>™</sup></p>

    <p>Delete for indicating an edit: in this case a deletion denoted by a <del>strike through</del> as opposed to an addition - see ins tag below.</p>

    <p>Code for inline code examples: <code>var dog = "poodle";</code>. Often used within pre tag when multiline code example needed.</p>

    <p>Bold and Italics are similiar to strong and emphasis but are <b>visual</b> <i>only</i>.</p>

    <p>Abbreviation element represents an abbreviation or acronym <abbr>NASA</abbr>.</p>

    <p>The optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else: <abbr title="HyperText Markup Language">HTML</abbr></p>

    <p>The <cite>cite element</cite></p>

    <p>The <dfn>dfn element</dfn></p>

    <p><dfn title="Title text">dfn element with title</dfn></p>

    <p>The <ins>ins element</ins></p>

    <p>The <kbd>kbd element</kbd></p>

    <p>The <mark>mark element</mark></p>

    <p>The <q>q element</q></p>

    <p>The <q>q element <q>inside</q> a q element</q> example</p>

    <p>The <s>s element</s></p>

    <p>The <samp>samp element</samp></p>

    <p>The <small>small element</small></p>

    <p>The <u>u element</u></p>

    <p>The <var>var element</var></p>

</div>