.l-main-section
  h2 Code Examples

  p To create a code example like the one below, simple copy the code

  pre.prettyprint.linenums
    code.
      pre.prettyprint.linenums
        code.
          //SOME CODE
          var name = "Alex Wolfe";
          alert(name);

  .l-sub-section
    h3 Specify starting line number

    pre(class="prettyprint linenums:4")
      code.
        pre.prettyprint.linenums:4
          var title = "This starts on line four";

  .l-sub-section
    h3 Code Highlighting
    p.
      There are three types of highlights avialable
      <strong>Outlined</strong>, <strong>Pink</strong>, and
      <strong>Black</strong>. You can see examples below and
      the class names needed for each type.

    pre.prettyprint.linenums
      code.
        // Pink Background Version
        // class="pnk"
        var elephants = "The <span class="pnk">pink</span> elephants were marching...";

        // Black Background Version
        // class="blk"
        var night = "The night was pitch <span class="blk">black</span>.";

        // Outlined Version
        // class="otl"
        var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";

.l-main-section
  h2 Alerts

  p Single line statments that are additional or critical to the content of a section or page.

  .alert.is-critical A very <strong>critical</strong> alert
  .alert.is-important A very <strong>important</strong> alert
  .alert.is-helpful A very <strong>helpful</strong> alert

  pre.prettyprint.linenums
    code.
      .alert.is-critical A very <strong>critical</strong> alert
      .alert.is-important A very <strong>important</strong> alert
      .alert.is-helpful A very <strong>helpful</strong> alert